Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
Hi, I glad to hear that it can help you.
You can follow steps below to update for cart and search:
1. Go to sections/price-colors.liquid( this file has been created at step 2 above)
2. Replace old code with code below
{% if section.blocks.size > 0 %}
<style>
{%- for block in section.blocks -%}
body .price-tag-{{ block.settings.tag }} .cart-item__discounted-prices,
body .price-tag-{{ block.settings.tag }} .cart-item__details > div.product-option,
body .price-tag-{{ block.settings.tag }} .price-item {
color: {{ block.settings.pricecolor }};
}
{%- endfor -%}
</style>
{% 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 %}
3. Go to sections/predictive-search.liquid add code below to file( refer the screenshot below)
{%- 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 %}"
4. Go to sections/main-cart-items.liquid add code below to file( refer the screenshot below)
{%- 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 %}"
5. Go to snippets/cart-drawer.liquid add code below to file( refer the screenshot below)
{%- 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 %}"
Hi @Joachimgolf,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Add a new section ( price-colors.liquid)
3. Copy code below to file has just create at step 2
{% if section.blocks.size > 0 %}
<style>
{%- for block in section.blocks -%}
body .price-tag-{{ block.settings.tag }} .price-item {
color: {{ block.settings.pricecolor }};
}
{%- endfor -%}
</style>
{% 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 %}
4. Go to Layout/theme.liquid
5. Add code below after 'body' tag
{% section 'price-colors' %}
6. Go to snippets/card-product.liquid add code below to file( refer the screenshot below)
{%- 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 %}
7. Go to sections/main-product.liquid add code below to file( refer the screenshot below)
{%- 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 %}
8. Go to sections/featured-product.liquid add code below to file( refer the screenshot below)
{%- 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 %}"
9. Go to product to add tag for product with prefix is "price:". Ex: price:yellow
10. Go to customize to add color for tag. Remember remove "price:" prefix
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?
This is an accepted solution.
Hi, I glad to hear that it can help you.
You can follow steps below to update for cart and search:
1. Go to sections/price-colors.liquid( this file has been created at step 2 above)
2. Replace old code with code below
{% if section.blocks.size > 0 %}
<style>
{%- for block in section.blocks -%}
body .price-tag-{{ block.settings.tag }} .cart-item__discounted-prices,
body .price-tag-{{ block.settings.tag }} .cart-item__details > div.product-option,
body .price-tag-{{ block.settings.tag }} .price-item {
color: {{ block.settings.pricecolor }};
}
{%- endfor -%}
</style>
{% 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 %}
3. Go to sections/predictive-search.liquid add code below to file( refer the screenshot below)
{%- 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 %}"
4. Go to sections/main-cart-items.liquid add code below to file( refer the screenshot below)
{%- 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 %}"
5. Go to snippets/cart-drawer.liquid add code below to file( refer the screenshot below)
{%- 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 %}"
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024