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.

Why Add Icon Images to Your Shopify Footer?

• Makes your footer look professional
• Enhances brand visibility
• Improves user experience

Steps to Add Icon Images in Shopify Footer

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.

2. Edit Footer Section in Theme Customizer

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

• 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 Instasize to easily resize your icons before uploading them.
• 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!