Adding an image to the side of the Collection Page grid

heyitsa
Visitor
2 0 0

Hello, I would like to add an image per collection page on the side of each grid. After two/three rows of images, each collection page will have an image that's a 2 x 2 block that can link to another page or site.

Here's what I think the steps would be:

1. Create a new image upload form to be added in the collection page editor (Separate from the main desc box, form should include option to insert link destination)

See photo for example:

heyitsa_0-1596392597938.png

I'm currently stuck on how to display the in the grid itself as the collection page has a loop of product items, and I don't know how to insert the image there. Can someone point me in the right direction? Currently using the Symmetry theme v4.5.0

collection-template.liquid snippet

    <div class="collection-listing{% if section.settings.coll_gridstream_mode == 'stream' %}-stream{% endif %} cf">
      <div class="product-list">
        {% for product in collection.products %}
        {% include 'product-block' with product, include_quick_buy_markup: include_quick_buy_markup %}
        {% endfor %}
      </div>
    </div>

 

Replies 5 (5)

diego_ezfy
Shopify Partner
2936 562 883

Hello,

Please share the URL of your store.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

heyitsa
Visitor
2 0 0

Hey, thanks for replying. Currently the store is under development so it's not online as of yet.

malissa-pearl
Tourist
4 0 1

Hi! I am trying to do something similar. Were you ever able to figure something out?

golden47
New Member
8 0 0

Hi, 

Hope you're good! 

Did you manage to create this kind of section ? 

Im looking for the same 🙂

seantay1993
Explorer
85 2 7

Hi, have you solved this, was trying to do think too.