Adding image before and after products in collection page

Store Design
1

I’m interested in adding a plain image before and after products in the collection page.

I’m not sure if this the right approach but I was experimenting with adding the following to collection-template.liquid but I wasn’t sure exactly where to add it. Also, I’m not sure how to position two images - one as the first image and the second as the fourth image after the two products as seen in the attached image.

{% if collection.handle == ‘all-products’ %}
<img src="https://cdn.shopify.com/s/files/1/0357/3583/0661/files/X0259.3.jpg?v=1594313379"/>
{% endif %}

Thanks in advance!

icp887_0-1602558197370.png
icp887_0-1602558197370.png1579×777 179 KB

2

Each theme will have a collection template, and in there will be a loop that shows the number of products allowed for on each page.
That loop could be within collection.liquid, but could also be in a Section or Snippet. Some digging may be needed.

Once you find the loop you could add your own code to add something at the start and end, or even after x number of products.

I don’t know your theme but what’s of most help here? Just to show some very basic code of how do add images into a loop like that or something else? Something more specific?

There’s some caveats and things to consider here as well but we’ll get to that later.

3

Hi Jason, thanks so much for replying and for the information!

I neglected to include this in my original question but I’m using the Prestige theme - hopefully that’s of some help.

More specifically:

  1. Hypothetically, if I were to include this image (https://cdn.shopify.com/s/files/1/0357/3583/0661/files/X0259.3.jpg?v=1594313379) as the first and fourth images in a collections page with with two products in between, what would that code look like? And also what would it look like positionally within the loop?
  2. If I wanted to make certain images conditional to specific collections, would I use {% if collection.handle == ‘all-products’ %} …{% endif %} statements?
  3. I can do some digging to find the loop myself. However, what are some elements or characteristics of a loop or that I should be looking for?

I’m not sure if I’m being clear but let me know if I can clarify these in any way.

Thanks so much again - really appreciate it!

4

Hi,

How can you add image into the loop after X number of products?