Add labels to your Shopify product grid without apps
This type of requirement is very common since many times we do not want to show the % discount in the product gallery but rather we want to put a symbol of a specific event or highlight one product over another. This video is made on the turbo template.
v class="sale_banner thumbnail_banner"><img src="CASE YOUR IMAGE" align="right" style="width:60%;height:60%;" /> I leave you the product-detail.liquid {% assign collection_handles = product.collections | map: 'handle' %} <div class="thumbnail-overlay"> <a href=" {{ product.url | within: collection }} " itemprop="url" class="hidden-product- link"><h1> {{ product.title }} <h1></a> <div class="info"> {% if settings.thumbnail_hover_enabled and settings.quick_shop_enabled %} {% include "product-info" %} {% include 'quick-shop-button' %} {% elsif settings.thumbnail_hover_enabled %} {% include "product-info" %} {% elsif settings.quick_shop_enabled %} {% include 'quick-shop-button' %} {% endif %} </div> </div> <div class="banner_holder"> {% if product.available %} {% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %} <div class="sale_banner thumbnail_banner"><img src="https://cdn.shopify.com/s/files/1/2656/3744/files/apoyame_redondo.png?20330" align="right" style="width:60%;height:60%;" /> </div> {% endif %} {% endif %} {% if collection_handles contains 'new' %} <div class="new_banner thumbnail_banner"> {{ 'collections.general.new' | t }} </div> {% endif %} {% if collection_handles contains 'pre-order' %} <div class="preorder_banner thumbnail_banner"> {{ 'collections.general.pre_order' | t }} </div> {% endif %} </div>
DO YOU PREFER TO DO IT WITH AN APP?
Leave a comment
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.