Shopify themes, liquid, logos, and UX
Our company is using Refresh Theme and we want to add "New" badges matching the style of the Sale badges on products we tag "new."
I have tried adding an elsif to the card-product liquid file in the card__badge div after line 339 (in the same section as the Sold Out and Sale badges) using the logic
{%- elsif card_product.tags contains "new" -%}
<span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme}}">New</span>
however this is not working.
Can anyone help me correct this code or edit the correct file?
Solved! Go to the solution
This is an accepted solution.
Using the dawn reference
https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L123
The code should look like this
{%- if card_product.available == false -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- elsif card_product.tags contains "new" -%}
<span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme}}">New</span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}}
</span>
{%- endif -%}
Beyond that you'd have to provide more line of code for context or someone would have to debug it.
If you need this customization finalized then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
Using the dawn reference
https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L123
The code should look like this
{%- if card_product.available == false -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- elsif card_product.tags contains "new" -%}
<span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme}}">New</span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}}
</span>
{%- endif -%}
Beyond that you'd have to provide more line of code for context or someone would have to debug it.
If you need this customization finalized then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Thanks so much! I just got these working on the product cards. I was using the correct snippet of code (that matches the one you shared), but there turned out to be a second block of code impacting the badges around line 122 in the product-card.liquid file that needed to be modified instead of the one at line 339 that I'd been working with before.
They're currently only displaying on the cards, which I'm happy with, I'll be working on getting them to display on the product detail pages as well.
These forum posts have been super helpful, so I'm sharing my product page solution for Refresh in case anyone is looking for it:
In price.liquid below the last endif but above the closing div tag
{%- if product.tags contains "new" -%}
<span class="badge price__badge-new color-{{ settings.sale_badge_color_scheme }}">
New
</span>
{%- endif -%}
In component-price.css add ".price .price__badge-new," to the list of variables on line 57 and 60.
In component-card.css add (anywhere)
.card-information .price .badge {
display: none;
}
This will style the badges exactly like the sale badges. If you want to give the "new" badges their own styling, you can duplicate the "badge" class in base.css, rename it something like "badge-new", and edit the attributes as you wish. then change all three instances of the class "badge" to your styled "badge-new" class
(That is, change to class="badge-new badge... in both price.liquid and card-product.liquid and change to .card-information .price .badge-new in component-card.css).
Hello @PaulNewton
Do you know how can i make it like this? Please, I want to add badges on my products exactly like the zegna site.
my store: https://diversusoficialsite.myshopify.com/
password: diversusoficial
Hi @HELDERWRLD along with being a badge customization , it's also like a product-subtitle customization for the product description page.
If you need this customization done for you then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
my store: https://diversusoficialsite.myshopify.com/
password: diversusoficial
My theme is Dawn, can you help me please?
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024