Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
I want additional functionality like the "SALE" product label. That particular label is triggered by a base price and reduced price.
For "Ex-display" and "Ex-demo" I created the metafield, selected them in the product page and voila! Nothing...
Metafields on the left are right underneath the product file, and yet nothing shows.
This is the Galleria theme, in case you are wondering.
I am sure I need to add an additional snippet of code somewhere in the theme code, I just don't know where.
The URL to this page is here.
Any help would be appreciated!
you will need to add a code to fetch the value on screen. if you are not familiar with code then allow me to help you with codeplacement.
Hi @Danishshopdev - I am familiar with adding code to the theme.
I need to know...
- What the snippet looks like
- What file to add it to
- Where in the file to add it
I know this looks silly to a seasoned coder, but let's just say I am on a learning curve 😉
All the best,
Sacha
I forgot this @Danishshopdev - these are the metafields I created:
...with these two validations for the custom label:
I've found code in product-badges.liquid that seems to control the other badges I am less interested in.
Am I correct to assume some code needs to be added in the section below:
<link rel="stylesheet" href="{{ 'product-badges.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'product-badges.css' | asset_url | stylesheet_tag }}</noscript>
<div class="#product-badges hide-loading">
{%- if settings.product_badge_sale_show and product.compare_at_price -%}
<div class="#product-badge" style="background-color: {{ settings.product_badge_sale_color }}">
{%- if settings.product_badge_sale_style == 'sign' or product.price_varies -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.product_badge_sale_style == 'amount' -%}
{%- assign saved_value = product.compare_at_price | minus: product.price | money_without_trailing_zeros -%}
{{ 'products.product.saved_amount' | t: value: saved_value }}
{%- elsif settings.product_badge_sale_style == 'persentage' -%}
{%- assign pct = product.price | times: 100 | divided_by: product.compare_at_price -%}
{%- assign saved_value = 100 | minus: pct | append: '%' -%}
{{ 'products.product.saved_amount' | t: value: saved_value }}
{%- endif -%}
</div>
{%- endif -%}
{%- if settings.product_badge_sold_out_show and product.available == false -%}
<div class="#product-badge" style="background-color: {{ settings.product_badge_sold_out_color }}">
{{ 'products.product.sold_out' | t }}
</div>
{%- endif -%}
{%- if settings.product_badge_new_show -%}
{%- liquid
assign target = settings.product_badge_new_expiration | times: 24 | times: 60 | times: 60
assign now = 'now' | date: '%s'
assign product_date = product.published_at | date: '%s'
assign diff = now | minus: product_date
-%}
{%- if diff < target -%}
<div class="#product-badge" style="background-color: {{ settings.product_badge_new_color }}">
{{ settings.product_badge_new_label | default: 'New' }}
</div>
{%- endif -%}
{%- endif -%}
{%- if settings.product_badge_free_show -%}
{%- if product.price == 0 and product.price_varies == false -%}
<div class="#product-badge" style="background-color: {{ settings.product_badge_free_color }}">
{{ settings.product_badge_free_label | default: 'Free' }}
</div>
{%- endif -%}
{%- endif -%}
</div>
Super eager to learn how to properly implement this.
TIA,
Sacha