Adding Banner Image To Product Grid In Collection Template

Add Image with Text inside Product Grid in Collection

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All  Shopify 2.0 FREE themes  ONLY

Are you ready to make your online shop pop? We’ve got a cool tool that lets you add an image, some text, and even a clickable button right inside your collection grid. It’s a simple tweak that can make shopping on your site a lot more engaging, especially if you're using one of Shopify's free themes.

Why Bother Customizing Your Collection Grid?

Think about the first thing customers see when they check out your store. Yep, it’s your collection grid. Now imagine it looking not just good, but great—with beautiful images, special offers in bold text, and buttons that tempt shoppers to click on them. That’s what our new code snippet can do for you. It’s all about catching the eye and keeping people browsing longer.

You can check the demo store here. Password: made4uo

What you are buying:

  • Add an image with text and button in the collection grid
  • Image and text will add to the number of products per page
  • Able to customize which page to add and what placement in the grid
  • Option to occupy the grid size or twice the grid size

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code.

2. Open the Snippet folder, and create a new snippet, name it "collection-image-text". Then place the code below. Make sure to SAVE.

 

3. Open the Section folder, and open the "main-collection-product-grid.liquid" file.

4. Find the {%- for product in collection.products -%}, and place the code below.

 

See image for placement

Image text in collection grid

 

5. Go to the {% schema %}, and after last square bracket ( ] ), and the code below.

 

See image for placement

Collection grid Image text
4. Make sure to SAVE.

Curious? Let’s Chat!

If you have a different theme or just have a few questions, don’t hesitate to contact us using "chat with made4uo". We’re here to help make your Shopify store the best it can be, and we can’t wait to get started.

Copied!
Back to blog

Leave a comment