Questions, feedback, and updates on the new online store design experience
Hello. I am using Dawn Theme in the online store. While trying the app for discount tags, I accidentally deleted the app I liked. I can't find the app and the discount I entered to try is still in the online store. Can I delete the discount tag and find the app causing it?
Solved! Go to the solution
This is an accepted solution.
You can change it. It uses the Accent-2 color in Theme Settings. Beyond that, you need to add bit of CSS code and add the css identifier to badge. I have done this already myself. I use the sale badge as a way show Discount Percentage between Compare and Price.
You will need to edit the code for the Dawn template.
Look in Card-Product.liquid under Snippets for this code
{%- if card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
And add {% comment %} to beginning and at end{% endcomment %}. You can remove these later if you decide you want it back.
{% comment %}
{%- if card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
{% endcomment %}
Next step is goto price.liquid under snippets;
{%- if show_badges -%}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{{ 'products.product.sold_out' | t }}
</span>
And add {% comment %} to beginning and at end{% endcomment %}.
{% comment %}
{%- if show_badges -%}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{{ 'products.product.sold_out' | t }}
</span>
{%- endif -%}
{% endcomment %}
Furthermore, Sale Tag is default behavior of Shopify when you use Compare Price and Price fields together. Whenever the Compare Price is Greater, Shopify treats Price as a Sale Price.
Thank you very much.
Can I change color Sale tags?
This is an accepted solution.
You can change it. It uses the Accent-2 color in Theme Settings. Beyond that, you need to add bit of CSS code and add the css identifier to badge. I have done this already myself. I use the sale badge as a way show Discount Percentage between Compare and Price.
Hi AlohaAkahai
I did apply this code and is working perfectly. I have an issue with the SOLD OUT badge, it is removed too. How can I add it back as it is important to show sold out in the grid. Thanks
Hi! I need help with this too- I just want the sale badge removed while leaving the cross out price viewable and all the CSS I’ve found deletes the sold out badge too- anyone know how to just delete the sale badge from main page+ collection pages??
If the sold out badge is gone then you don't have badges set to be shown in preferences.
The code {%- if show_badges -%} checks if you have it turned off or on.
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023