How to Put Icon Images in Footer Shopify: Ultimate Guide

So, you want to put icon images in the footer of your Shopify store? No problem. It's way simpler than you think. Let's dive into it.

Makes your footer look professional
Enhances brand visibility
Improves user experience

1. Upload Your Icon Images

First things first, you need to have your icon images ready.

Go to your Shopify Admin Dashboard.
Navigate to Settings > Files.
Click on Upload files, and select your icon images.
Once uploaded, copy the URL of each image. You'll need this later.

Now, it's time to put those images in your footer.

These steps focus on one footer element. For the full theme editor, image, and mobile workflow, start with the guide to editing a Shopify website.

Navigate to Online Store > Themes.
Click on Customize on your active theme.
Scroll down to find the Footer section.
Click on the Footer section to edit.

3. Add HTML Code

This is the fun part. Adding HTML code:

In the Footer section, look for a place where you can add custom HTML. It might be a rich text editor or a custom HTML block.
Paste this simple HTML code:

<img src="URL_of_your_icon_image" alt="Your Alt Text" style="width: 30px; height: 30px; margin: 5px;" />

Replace URL_of_your_icon_image with the URL you copied earlier. Repeat for each icon you want to add.

4. Save and Check

Click on Save.
Check your store's footer to make sure the icons are showing up correctly.

Optional: Add CSS Styling

You might want to make those icons look even better. Here's how you can do it:

Go back to your Theme Customizer.
Click on Theme settings > Edit code.
Find your theme's CSS file (usually theme.scss.liquid or theme.css).
Add this CSS at the bottom:

.footer-icons img {
    width: 30px;
    height: 30px;
    margin: 5px;
}

Save the file and that's it! Your icons should now look amazing.

Other Customization Options

Image Resizing: Use the Shopify image resizer to size your icons before uploading them.
Store Logo: If you're adding the brand mark rather than a footer icon, prepare it with the Shopify logo size guide.
Background Remover: Make your icons look cleaner by removing their background with Instasize.
Magic Fill: Need to extend the edges of your icon? Instasize’s Magic Fill has got you covered.

FAQs

Q: Why aren't my icons showing up?

A: Double-check the image URLs and make sure you've saved your changes.

Q: Can I add more than one icon?

A: Absolutely, just repeat the HTML code for each icon.

Q: Do I need to know how to code to do this?

A: Not really. Just follow the steps and you'll be fine.

That's it! Adding icon images to your Shopify footer is a breeze, especially with tools like Instasize to help you handle the images the right way. Happy customizing!