Solved

Change Price Color based on products tags

Joachimgolf
Shopify Partner
26 0 2

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.

Accepted Solution (1)
EBOOST
Shopify Partner
869 235 263

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 %}"

EBOOST_0-1712967162117.png

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 %}"

EBOOST_1-1712967294282.png

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 %}"

EBOOST_2-1712967396767.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

Replies 4 (4)

EBOOST
Shopify Partner
869 235 263

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 %}

EBOOST_0-1712675724177.png

 

4. Go to Layout/theme.liquid

5. Add code below after 'body' tag

{%  section 'price-colors' %}

EBOOST_1-1712675820222.png

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 %}

EBOOST_2-1712675979246.png

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 %}

EBOOST_3-1712676097264.png

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 %}"

EBOOST_4-1712676232380.png

9. Go to product to add tag for product with prefix is "price:". Ex: price:yellow

EBOOST_5-1712676316614.png

10. Go to customize to add color for tag. Remember remove "price:" prefix

EBOOST_6-1712676414348.png

 

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Joachimgolf
Shopify Partner
26 0 2

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?

EBOOST
Shopify Partner
869 235 263

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 %}"

EBOOST_0-1712967162117.png

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 %}"

EBOOST_1-1712967294282.png

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 %}"

EBOOST_2-1712967396767.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Joachimgolf
Shopify Partner
26 0 2

Thank you so much @EBOOST , this worked perfectly!