Shopify Question posted in
The Shopify help center can be found here.

Non-product images in Shopify Boundless product collection grid

I’d like to insert static non-product images within a Boundless theme collection product grid, in order to chop it up a bit and add some extra visual content to my clothing store.

Something along the lines of Prod1, Prod2, Prod3, NonProd1, Prod4, Prod5, NonProd2, Prod6, Prod7 etc.

The inserted images would need to be irregularly placed for aesthetic reasons, so control of where they sit would be useful.

Is there any way of achieving this by modifying or replacing the collection.liquid or other template? It seems to me from the liquid files that there’s a looping system in play, but unfortunately I can’t figure it out.

My collections don’t change size, and I’m happy to have different liquid templates for each collection.

I’ve been tweaking and modding the boundless theme to get what I want, and one day I’m going to start again with Timber, but for now this is a bit beyond me…

Thanks for any help.

Tags:

2

Answers


  1. 0

    The collection template is using a for loop and inside a for loop you have the access to the following forloop.index which returns the current iteration number.

    So inside the collection file you can add the following.

    {% if forloop.index == 4 %}
    <div class="non-product">
        <img src="SRC" alt="">
    </div>
{% endif %}

    If you want more control over this you can set a theme setting option for the number 4 and change it from the theme setting panel so that you don’t have to modify it from the code every time.

    Login or Signup to reply.
  2. 0

    There are a few ways, it really depends on how you want to manage it and what specifically you want to achieve.

    If you really want to curate the images you can use config/settings_schema.json or a /sections

    All that you need to do is define an image or image_picker in your schema like so:

      {
    "type": "image_picker",
    "id": "image_id",
    "label": "Image"
  },

    And then you can reference the select image like so {{ settings.image_id }}

    The above is for the site settings schema, the sections are largely the same but do have some important nuances so it’s worth reading fully the provided sources.

    Alternatively if you wanted to show the products featured images you could do a loop of the collection: where most-recent is the handle of the collection.

    {% for product in collections.most-recent.products %}
  <a href="{{ product.url }}">
    {{ product.featued_image }}
  </a>
{% endfor %}

    If you are unsure of objects or tags that are available to you the Cheatsheet is the go to.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search