How to add promotion / custom bloc to the collections pages

[OpuSsS]

I'd like to add custom blocks to my products loop in the collections pages. Right now, i've tried it by adding a custom "promo" tag to some of my products and use conditional rendering in my template files to hide price/link/title. But it's not super intuitive, and since i use a custom tag filter it adds this category to it... How can i do this without using apps ? here is an example :

 

[JoesIdeas]

You could try using forloop.index  and do something different in index == x, or every x items, or if you want it in a random spot, assign a random number then match that with the index for where to put the promo card.

https://shopify.dev/docs/themes/liquid/reference/objects/for-loops#forloop-index

[golden47]

Hi @JoesIdeas , 

I'm trying to add this features on my Prestige theme but I don't know how..

Can you please give more information about the steps ? 🙂 

Thanks a lot, 

[JoesIdeas]

I would use the forloop index to mark differences, you can see code examples here: https://shopify.dev/api/liquid/objects/for-loops#forloop-index

You'd put the code in the loop that shows your product cards. To find the code, start with collection.liquid template, then read the code in that file and also in any included files. Eventually it will take you to the loop that shows the product cards, that's where you'd want to implement the code based on the examples given in that documentation.

If you're not familiar with editing themes and testing, finding code to edit, etc, this guide will help you with the process: https://speedboostr.com/how-to-safely-edit-your-shopify-theme

If you'd prefer to have a Shopify developer handle it for you feel free to contact my team at speedboostr.com/contact for a quote.

[golden47]

Hi, 

Thanks a lot for your answer ! 

I've added the forloop, but it's not exactly what it should be 😕

Indeed, it shows the image on the bottom of each products.. and what I need is to alternate, 5 products and 1 image content (on the same line). 

 <div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}">
             {% for products in collections %}
   		{% if forloop.last == true %}   
              {{ forloop.length5 }}
              {%- render 'product-item', product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
              {{ forloop.length1 }}
              <img src="https://cdn.shopify.com/s/files/1/0594/0258/4216/files/Content.jpg?v=1643712678">             
              {% endif %}
             {% endfor %}
          </div>

Is it because the products are displayed with the render ? I'm on Prestige theme .. 

Thanks a lot for your feedback, 

[Newbiebie]

Hi OpuSsS, may I ask if there's an app for that? If yes, what's the name ? Thanks so much 

[englishcyclist]

I came to find the same answer - surprised no-one has made an app for this collection promo booster thing. Another example: 

[StiefTschobbs]

So how could i implement this promo item into the collection page?

[martino3]

I was looking for a similar function, so I wrote my own

I used a custom blog type for the promo images and then metafields to control where and when the promos appear in the collection page as follows below:

This is in product-item.liquid, and I passed the count variable from collection-main.liquid in the forloop:

 {% for product in collection.products limit: 36 %}
      {% include "product-item", count: forloop.index %}
 {% endfor %}

{% comment %}
  Using marketing-promo blog posts as marketing promos in collections. 
  Metadata fields controls positioning, URL, and promo size. 
  Tags in blog post equivalent to collection title control placement in collection.
{% endcomment %}
{% assign nowTime = 'now' | date: '%s' %}

{% for article in blogs.marketing-promos.articles %}

  {% assign adnum = article.metafields.marketing.ad_position %}
  {% assign adurl = article.metafields.marketing.ad_url %}
  {% assign adsize = article.metafields.marketing.ad_size %}
  {% assign adpages = article.metafields.marketing.ad_pages %}
  {% assign dateStart = article.metafields.marketing.ad_start.value | date: '%s' %}
  {% assign dateEnd = article.metafields.marketing.ad_end.value | date: '%s' %}
  
  {% comment %} Start/stop appearance of promos at specified date/time {% endcomment %}
  {% if dateStart < nowTime and dateEnd > nowTime %}
 
  {% comment %} Don't allow triple width promo to be placed anywhere but first column {% endcomment %}
  {% if adsize == "Triple" %}
    {% assign mod = adnum | modulo: 3 %}
    {% case mod %}
      {% when 0 %}
        {% assign adnum = adnum | minus: 2 %}
      {% when 2 %}
        {% assign adnum = adnum | minus: 1 %}
    {% endcase %}
  {% endif %}

  {% comment %} Don't allow double width promo to be placed in column 3 {% endcomment %}
  {% if adsize == "Double" %}
    {% assign mod = adnum | modulo: 3 %}
    {% if mod == 0 %}
      {% assign adnum = adnum | minus: 1 %}
    {% endif %}
  {% endif %}

  {% for tags in article.tags %}
    {% if collection.title contains tags %}
      {% comment %}count var passed from collection-main as forloop.index - index of product tile{% endcomment %}
      {% if count == adnum %}
        {% for pages in adpages.value %}
          {% if current_page == pages %}
            {% if adsize == "Double" %}
              <div class="col-xs-12 col-sm-12 col-md-8 no-padding product-list">
            {% elsif adsize == "Triple" %}
              <div class="col-xs-12 col-sm-12 col-md-12 no-padding product-list-{{ adsize }}">
            {% else %}
              <div class="col-xs-6 col-sm-6 col-md-4 no-padding product-list">
            {% endif %}
              <div class="scaleOnHover product-list-inner">
                <div class="product-area text-center clearfix">
                  <div class="ad-thumbnail-{{ adsize }}"> 
                    <a {% if adurl != blank %} href="{{ adurl }}" {% endif %} id="img-{{ count }}" target="_blank" rel="noopener"><img style="max-width: unset;" src="{{ article.image | img_url: 'large' }}" alt="{{ article.image.alt | escape }}"></a>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      {% endif %} 
    {% endif %} 
  {% endfor %}
{% endif %} {% comment %}end if datetime{% endcomment %}
{% endfor %}

 The tags used in the custom blog post must match the collection title for the promo to appear there. 

Here are the metafields used:

There are three size promos - single, double, and triple, since we're using a three-column layout for our collections. The blog post featured image must match the dimensions of the column(s)

Let me know if there are any questions, I know this is an old thread.

[torimca]

Is there an app that has this feature now? Seeing this post is from 2 years ago

[martino3]

There might be an app for this, I don't know.  Wanted to avoid another app