product-template.liquid if else code logic

electroarcade
New Member
4 0 0

Hi,

I have looked at a few resources as want to add badges/image/text on my product and collections page and feel that installing a third party app is overkill.

I'm using the debut theme and working on sections> product-template.liquid

Right under the shipping policy line around 156 I have tried variations of this;

{% if 'product.tags' contains 'freeship' %}
{{ 'products.product.sold_out' | t }}
<img src="https://cdn.shopify.com/s/files/1/1010/7028/files/1628840-delivery-truck-free-icon-delivery-truck-pn..." alt="" class="free-shipping__img">
{% else %}
<p>H</p>
{% endif %}

In short I want to be able to use some kind of tag in product admin on a specific product that will then display to website visitor whatever I chose should logic match.

for example if tag = 'freeship' & product = 'in-stock' & price > '250' 

In above I have left line "products.product.sold_out" as was thinking of calling image from icons but will probably remove that.

I have above code working but found that it shows on products without tag "freeship"

Would appreciate an insight into variables and logic I can use to finalise this.

Thanks heaps and hopefully this also helps others.

 

I have referred to;

{% unless product.available %}
  <div class="product-badge sold"><span>{{ 'product.sold_out' | t }}</span></div>
{% else %}
  {% if product.compare_at_price > product.price %}
    <div class="product-badge sale"><span>{{ 'product.on_sale' | t }}</span></div>
  {% elsif product.tags contains 'preorder' %}
    <div class="product-badge preorder"><span>Pre Order</span></div>
  {% elsif product.tags contains 'new' %}
    <div class="product-badge new"><span>New</span></div>
  {% endif %}
{% endunless %}

and

<div class="free-shipping">
  <img src="https://cdn.shopify.com/s/files/1/1010/7028/files/1628840-delivery-truck-free-icon-delivery-truck-png-png-512_512_preview_100x.png?3464" alt="" class="free-shipping__img">
  <span class="free-shipping__text">FREE Worldwide Shipping</span>

  <style scoped>
    .free-shipping{
      padding-top: 10px;
      padding-bottom: 10px;
      text-align: center;
    }
    .free-shipping__img{
      vertical-align: middle;
      max-width: 40px;
      display: inline-block;
      margin-right: 5px;
    }
    .free-shipping__text{
      vertical-align: middle;
      display: inline-block;
      font-size: 17px;
    }
  </style>
</div>

https://youtu.be/REaBCovsKcU

 

 

 

0 Likes
suyash1
Shopify Partner
2712 285 450

@electroarcade - logic looks fine, only thing is you have {% if 'product.tags' contains 'freeship' %}

 

can you please remove those '' on product.tags and check? so it becomes {% if product.tags contains 'freeship' %}

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
electroarcade
New Member
4 0 0

aha, value vs variable thanks works a treat.

Are you able to assist with where to edit collection code so that I can do the same in order to add a free shipping tag in the same section as 'SALE', SOLD OUT' tags under price?

https://electroarcade.com.au/collections/arcade-machines

 

0 Likes
suyash1
Shopify Partner
2712 285 450

@electroarcade - please check if you have any price template or it will be in collection section

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
electroarcade
New Member
4 0 0

Thanks,

base logic worked well. I've tried to extend logic so that there are 3 clauses with 2 matches and 3rd being an else.

Thought would be straight forward but not the case - even when I try to accommodate closing the if and div my code is wrapped in.

Would greatly appreciate some guidance.

tried;

{%if %}

product type A and tag A show imageA

{%elsif %}

product type B and tag A and product price  equal to or greater than 225 show imageB

{%else %}

product type B and tag A show imageA

{%endif %}

also as seen in existing shopify code, tried wrapping each logic in an

{%if %}

{%endif %}

as below, but non of these work and throw up errors that stop me from saving code.

Line 9 onwards is my code, but have included complete section

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte" data-product-policies>
  {%- if shop.taxes_included -%}
    {{ 'products.product.include_taxes' | t }}
  {%- endif -%}
  {%- if shop.shipping_policy.body != blank -%}
    {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
  {%- endif -%}

{% comment %}Show different free shipping images if specific product type has freeshipping tag{% endcomment %}
  {% if product.type == 'handheld console' and product.tags contains 'freeshipping' %}
    <img src="https://cdn.shopify.com/s/files/1/0494/6935/8246/files/free-shipping-over-225.gif?v=1620036880" alt="" class="free-shipping_img">
  {%- endif -%}
  {% if product.type == 'retro arcade games console' and product.tags contains 'freeshipping' and product.price => 225 %}
    <img src="https://cdn.shopify.com/s/files/1/0494/6935/8246/files/free-shipping-product-under-price.gif?v=16189..." alt="" class="free-shipping_img">
  {%- endif -%}
  {% if product.type == 'retro arcade games console' and product.tags contains 'freeshipping' %}
    <img src="https://cdn.shopify.com/s/files/1/0494/6935/8246/files/free-shipping-over-225.gif?v=1620036880" alt="" class="free-shipping__img">
  {% else %}
{% endif %}

</div>
{%- endif -%}

 

----

 

this lets me save once I change elsif to else, however the logic is now flawed and shows the free shipping image sitewide.

 

{% comment %}Show different free shipping images if specific product type has freeshipping tag{% endcomment %}
{% if product.type == 'handheld console' and product.tags contains 'freeshipping' %}
<img src="https://cdn.shopify.com/s/files/1/0494/6935/8246/files/free-shipping-over-225.gif?v=1620036880" alt="" class="free-shipping_img">
{% else product.type == 'retro arcade games console' and product.tags contains 'freeshipping' and product.price => 225 %}
<img src="https://cdn.shopify.com/s/files/1/0494/6935/8246/files/free-shipping-product-under-price.gif?v=16189..." alt="" class="free-shipping_img">
{% else product.type == 'retro arcade games console' and product.tags contains 'freeshipping' %}
<img src="https://cdn.shopify.com/s/files/1/0494/6935/8246/files/free-shipping-over-225.gif?v=1620036880" alt="" class="free-shipping__img">
{% endif %}

 
0 Likes