How to add promotion / custom bloc to the collections pages

OpuSsS
Visitor
3 0 1

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 :

 

 zefzgrzrgezrg.png

Replies 10 (10)
JoesIdeas
Shopify Expert
2028 182 535

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

• Creator of Order Automator (automate tagging, fulfillment, FBA, notifications, fraud, and more)
• Shopify developer for 10+ years, store owner for 7 years
• I make guides like Shopify Automation Tips and How to Deal with Fraud and Chargebacks
golden47
New Member
8 0 0

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
Shopify Expert
2028 182 535

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.

• Creator of Order Automator (automate tagging, fulfillment, FBA, notifications, fraud, and more)
• Shopify developer for 10+ years, store owner for 7 years
• I make guides like Shopify Automation Tips and How to Deal with Fraud and Chargebacks
golden47
New Member
8 0 0

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). 

 

Capture d’écran 2022-02-01 à 11.52.31.png

 

 <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
Tourist
26 0 0

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

englishcyclist
Shopify Partner
10 0 8

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

 

Screenshot 2022-09-01 at 08.21.44.png

StiefTschobbs
Shopify Partner
2 0 0

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

 

Durch einzigartiges Branding & kreative Kommunikation unverwechselbare Markenidentitäten von Unternehmen & Organisationen erschaffen.
martino3
Tourist
9 0 3

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:

Screen Shot 2023-08-02 at 7.40.37 AM.png
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
Visitor
1 0 0

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

martino3
Tourist
9 0 3

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