A user seeks to dynamically change product price colors on Dawn 8.0.1 based on product tags, specifically wanting items tagged “Superdeals” to display prices in orange (#ED6A20) across collection and product pages.
Solution Provided:
A detailed code implementation using Liquid templates:
price-colors.liquid section with customizable color blockscard-product.liquid and featured-product.liquidprice:colorname (e.g., price:yellow)price: prefixExtended Implementation:
The solution was successfully expanded to cover:
main-cart-items.liquid)cart-drawer.liquid)predictive-search.liquid)Current Status:
The original poster confirmed the solution works perfectly. A later user encountered an issue where colors weren’t applying, which was resolved by ensuring tag names use lowercase text only. The discussion appears resolved with a working implementation across all requested areas.
Hello!
Anyone know how we can change the price color of a product based on product tags? We are using Dawn 8.0.1.
We have specific products that has a flat low price called “Superdeals”, and we want to change the price color for products that has the “Superdeals” tag.
Is there a way to dynamicaly use a rule that say “If product has tag (Superdeals)” → "Change price color to #ED6A20.
We want to use this on both product pages & collection pages.
Hi @Joachimgolf ,
May I suggest to update code these steps:
{% if section.blocks.size > 0 %}
{% endif %}
{% schema %}
{
"name": "Price color",
"settings": [
],
"blocks": [
{
"type": "price_color",
"name": "Price color",
"settings": [
{
"type": "text",
"id": "tag",
"label": "tag"
},
{
"type": "color",
"id": "pricecolor",
"label": "Price color",
"default": "#000000"
}
]
}
]
}
{% endschema %}
Go to Layout/theme.liquid
Add code below after ‘body’ tag
{% section 'price-colors' %}
{%- liquid
assign tagPrice = ''
assign tags = card_product.tags
for tag in tags
if tag contains 'price:'
assign tagPrice = tag | split : 'price:' | last
endif
endfor
-%}
{% if tagPrice != '' %} price-tag-{{ tagPrice }} {% endif %}
{%- liquid
assign tagPrice = ''
assign tags = product.tags
for tag in tags
if tag contains 'price:'
assign tagPrice = tag | split : 'price:' | last
endif
endfor
-%}
{% if tagPrice != '' %} price-tag-{{ tagPrice }} {% endif %}
{%- liquid
assign tagPrice = ''
assign tags = product.tags
for tag in tags
if tag contains 'price:'
assign tagPrice = tag | split : 'price:' | last
endif
endfor
-%}
{% if tagPrice != '' %} price-tag-{{ tagPrice }} {% endif %}"
Hello @EBOOST !
Thank you so much for the detailed reply. I tried this code and it worked perfectly! Are we also able to do this for the cart page, the Cart Drawer & instant search results?
Hi, I glad to hear that it can help you.
You can follow steps below to update for cart and search:
Go to sections/price-colors.liquid( this file has been created at step 2 above)
Replace old code with code below
{% if section.blocks.size > 0 %}
{% endif %}
{% schema %}
{
"name": "Price color",
"settings": [
],
"blocks": [
{
"type": "price_color",
"name": "Price color",
"settings": [
{
"type": "text",
"id": "tag",
"label": "tag"
},
{
"type": "color",
"id": "pricecolor",
"label": "Price color",
"default": "#000000"
}
]
}
]
}
{% endschema %}
{%- liquid
assign tagPrice = ''
assign tags = product.tags
for tag in tags
if tag contains 'price:'
assign tagPrice = tag | split : 'price:' | last
endif
endfor
-%}
{% if tagPrice != '' %} price-tag-{{ tagPrice }} {% endif %}"
{%- liquid
assign tagPrice = ''
assign product = item.product
assign tags = product.tags
for tag in tags
if tag contains 'price:'
assign tagPrice = tag | split : 'price:' | last
endif
endfor
-%}
{% if tagPrice != '' %} price-tag-{{ tagPrice }} {% endif %}"
{%- liquid
assign tagPrice = ''
assign product = item.product
assign tags = product.tags
for tag in tags
if tag contains 'price:'
assign tagPrice = tag | split : 'price:' | last
endif
endfor
-%}
{% if tagPrice != '' %} price-tag-{{ tagPrice }} {% endif %}"
Thank you so much @EBOOST , this worked perfectly!
Hello @EBOOST
Thanks for sharing the code and your help, but I have done all the steps but the color didn’t change as it appear in the photo below, please help
