Change Price Color based on products tags

[Joachimgolf]

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.

[EBOOST]

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

[Joachimgolf]

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

[Joachimgolf]

Thank you so much @EBOOST , this worked perfectly!