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.
- 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!