How can I change sale price color without affecting regular prices on Impulse theme?

[Deoxes]

@KetanKumar I am also using the theme Impulse by Archetype and had the same issue we want to be resolved. I added the code you suggested and it worked but it ended up “also changing” my regular priced items (non-sale items) to be red as well and we want them to remain their original black color.

I don’t want any of my products not on sale to be affected by these code changes.

End goal is to have: Regular non-sale products have price that remains original black color and current sale items have the strike through price in grey with new sale price in red.

Let me know if you have a solution. Thank you in advance for your time, I appreciate any help I can get.

My codes on Product Page:

.product__price.on-sale {color: #B22222;}

I wanna make sale price on Collection Page, and Home Page. Thanks.

Thanks.

[Deoxes]

I wanna compare the price colour change to the Collection Page and Home Page, can you help me do like that?

[KetanKumar]

@Deoxes

yes, please share store url

[Deoxes]

@KetanKumar

www.dehome.co.uk

I use codes now:

.grid-product__tag–sale {display:none;}
.product__price.on-sale {color: #B22222;}
.grid-product__price {
color: #000;
}
.grid-product__price–original {
color: #B22222;
}

But on the home and collection page I have the sale price black, if I wanna change it with the code they change both, I wanna just on the sale price change to red colour. Thanks.

You can go to my website and check it.

[Deoxes]

@KetanKumar

Now is like that, but I wanna swap colours, but red colours showing just on discounted products.

Thanks for the help.

[Deoxes]

@KetanKumar

I wnna to my collection page will be on sale products like that, but non discounted products be like always in black colour.

[KetanKumar]

@Deoxes

yes, please share store url so i will check code

[Deoxes]

@KetanKumar

dehome.co.uk

[KetanKumar]

can you please send product card grid code

[Deoxes]

Can you explain where I can find it?

[Deoxes]

@KetanKumar

[KetanKumar]

@Deoxes

yes, please go to Edit code >>> snnipets >>> product card or product gird item

[Deoxes]

@KetanKumar

{%- liquid
unless grid_item_width
assign grid_item_width = ‘medium-up–one-quarter small–one-half’
endunless

unless per_row
assign per_row = ‘4’
endunless

assign on_sale = false
if product.compare_at_price > product.price
assign on_sale = true
endif

assign product_tags = product.tags | join: ‘,’
assign has_custom_label = false
if product.metafields.theme.label and product.metafields.theme.label != blank
assign has_custom_label = true
assign custom_label = product.metafields.theme.label.value
elsif product_tags contains ‘label’
for tag in product.tags
if tag contains ‘label’
assign tag_starts_with = tag | slice: 0
if tag_starts_with == ‘_’
assign has_custom_label = true
assign custom_label = tag | replace: ‘label’, ‘’
endif
endif
endfor
endif
-%}

{%- if has_custom_label -%}

{{ custom_label }}

{%- else -%} {%- unless product.available -%}

{{ 'products.product.sold_out' | t }}

{%- endunless -%} {%- if on_sale and product.available -%}

{{ 'products.general.sale' | t }}

{%- endif -%} {%- endif -%}

{%- liquid
assign fixed_aspect_ratio = false
unless settings.product_grid_image_size == ‘natural’
assign fixed_aspect_ratio = true
endunless

assign preview_image = product.featured_media.preview_image
assign img_url = preview_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’
-%}

{%- if settings.quick_shop_enable -%}

{{ settings.quick_shop_text }}

{%- endif -%} {%- if fixed_aspect_ratio -%}

{%- else -%}

{%- endif -%}

{%- if settings.product_hover_image and product.media.size > 1 -%}
{%- for media in product.media offset: 1 limit: 1 -%}
{%- assign second_image = media.preview_image -%}
{%- endfor -%}

{%- assign img_url = second_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- endif -%}

{%- if settings.enable_swatches -%}
{%- assign swatch_trigger = ‘products.general.color_swatch_trigger’ | t | downcase -%}
{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == ‘color’ and option_name contains ‘colour’
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = ‘’ -%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ‘,’ | append: ‘,’ | append: value | split: ‘,’
-%}

{%- if variant.image -%}

{%- endif -%} {%- endunless -%} {%- endfor -%} {%- endif -%} {%- endfor -%} {%- endif -%}

{{ product.title }}

{%- if settings.vendor_enable -%}

{{ product.vendor }}

{%- endif -%}

{%- if on_sale -%} {{ 'products.general.regular_price' | t }} {{ product.compare_at_price | money }} {{ 'products.general.sale_price' | t }} {%- endif -%} {%- if product.price_varies -%} {%- assign price = product.price_min | money -%} {{ 'products.general.from_text_html' | t: price: price }} {%- else -%} {{ product.price | money }} {%- endif -%} {%- if on_sale -%} {%- if settings.product_save_amount -%} {%- if settings.product_save_type == 'dollar' -%} {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%} {%- else -%} {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%} {%- endif -%} {{ 'products.general.save_html' | t: saved_amount: saved_amount }} {%- endif -%} {%- endif -%}

{%- assign product_variant = product.selected_or_first_available_variant -%}
{%- if product_variant.unit_price_measurement -%}

{%- capture unit_price_base_unit -%} {%- if product_variant.unit_price_measurement -%} {%- if product_variant.unit_price_measurement.reference_value != 1 -%} {{ product_variant.unit_price_measurement.reference_value }} {%- endif -%} {{ product_variant.unit_price_measurement.reference_unit }} {%- endif -%} {%- endcapture -%}

{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}

{%- endif -%}

{%- if settings.enable_swatches -%} {%- liquid assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase assign swatch_file_extension = 'png' assign color_count = 0 -%}

{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == ‘color’ and option_name contains ‘colour’
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = ‘’ -%}

{%- for variant in product.variants -%} {%- assign value = variant.options[option_index] %} {%- unless values contains value -%} {%- liquid assign values = values | join: ',' | append: ',' | append: value | split: ','

assign color_file_name = value | handle | append: ‘.’ | append: swatch_file_extension
assign color_image = color_file_name | file_img_url: ‘50x50’ | prepend: ‘https:’ | split: ‘?’ | first
assign color_swatch_fallback = value | split: ’ ’ | last | handle
assign color_count = color_count | plus: 1
-%}

<a
href=“{{ variant.url | within: collection }}”
class=“color-swatch color-swatch–small color-swatch–{{ value | handle }}{% if variant.image %} color-swatch–with-image{% endif %}”
{% if variant.image %}
data-variant-id=“{{ variant.id }}”
data-variant-image=“{{ variant.image | img_url: ‘400x’ }}”
{% endif %}
aria-label=“{{ product.title }} - {{ value }}”
style=“background-color: {{ color_swatch_fallback }};{% if images[color_file_name] != blank %} background-image: url({{ color_image }});{% endif %}”>
{{ value }}

{%- endunless -%}
{%- endfor -%}

{%- if color_count < 2 -%} {%- style -%} .grid-product__colors--{{ product.id }} { display: none; } {%- endstyle -%} {%- endif -%} {%- endif -%} {%- endfor -%} {%- endif -%}

{%- if settings.enable_product_reviews -%}

{%- endif -%}

[Deoxes]

@KetanKumar

Is that correct product grid item? code?

[KetanKumar]

@Deoxes

can you add this code and let me know after i will give other one more code

first add below code

{%- liquid
unless grid_item_width
assign grid_item_width = 'medium-up--one-quarter small--one-half'
endunless

unless per_row
assign per_row = '4'
endunless

assign on_sale = false
if product.compare_at_price > product.price
assign on_sale = true
endif

assign product_tags = product.tags | join: ','
assign has_custom_label = false
if product.metafields.theme.label and product.metafields.theme.label != blank
assign has_custom_label = true
assign custom_label = product.metafields.theme.label.value
elsif product_tags contains '_label_'
for tag in product.tags
if tag contains '_label_'
assign tag_starts_with = tag | slice: 0
if tag_starts_with == '_'
assign has_custom_label = true
assign custom_label = tag | replace: '_label_', ''
endif
endif
endfor
endif
-%}

{%- if has_custom_label -%}

{{ custom_label }}

{%- else -%}
{%- unless product.available -%}

{{ 'products.product.sold_out' | t }}

{%- endunless -%}
{%- if on_sale and product.available -%}

{{ 'products.general.sale' | t }}

{%- endif -%}
{%- endif -%}

{%- liquid
assign fixed_aspect_ratio = false
unless settings.product_grid_image_size == 'natural'
assign fixed_aspect_ratio = true
endunless

assign preview_image = product.featured_media.preview_image
assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}

{%- if settings.quick_shop_enable -%}

{{ settings.quick_shop_text }}

{%- endif -%}
{%- if fixed_aspect_ratio -%}

{%- else -%}

{%- endif -%}

{%- if settings.product_hover_image and product.media.size > 1 -%}
{%- for media in product.media offset: 1 limit: 1 -%}
{%- assign second_image = media.preview_image -%}
{%- endfor -%}

{%- assign img_url = second_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- endif -%}

{%- if settings.enable_swatches -%}
{%- assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase -%}
{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_name contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ',' | append: ',' | append: value | split: ','
-%}

{%- if variant.image -%}

{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}

{{ product.title }}

{%- if settings.vendor_enable -%}
{{ product.vendor }}

{%- endif -%}

{%- if on_sale -%}
{{ 'products.general.regular_price' | t }}
{{ product.compare_at_price | money }}
{{ 'products.general.sale_price' | t }}
{%- endif -%}
{%- if product.price_varies -%}
{%- assign price = product.price_min | money -%}
{{ 'products.general.from_text_html' | t: price: price }}
{%- else -%}
{{ product.price | money }}
{%- endif -%}
{%- if on_sale -%}
{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{%- endif -%}
{%- endif -%}

{%- assign product_variant = product.selected_or_first_available_variant -%}
{%- if product_variant.unit_price_measurement -%}

{%- capture unit_price_base_unit -%}
{%- if product_variant.unit_price_measurement -%}
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
{{ product_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}

{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}

{%- endif -%}

{%- if settings.enable_swatches -%}
{%- liquid
assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase
assign swatch_file_extension = 'png'
assign color_count = 0
-%}

{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_name contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}

{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ',' | append: ',' | append: value | split: ','

assign color_file_name = value | handle | append: '.' | append: swatch_file_extension
assign color_image = color_file_name | file_img_url: '50x50' | prepend: 'https:' | split: '?' | first
assign color_swatch_fallback = value | split: ' ' | last | handle
assign color_count = color_count | plus: 1
-%}

{{ value }}

{%- endunless -%}
{%- endfor -%}

{%- if color_count < 2 -%}
{%- style -%}
.grid-product__colors--{{ product.id }} {
display: none;
}
{%- endstyle -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}

{%- if settings.enable_product_reviews -%}

{%- endif -%}

[Deoxes]

added in theme.css.liquid but nothing happened.

[Deoxes]

@KetanKumar Nothing, I need just price colour in collection page change. my colour #B22222

[Deoxes]

@KetanKumar Check in product page, I have made how I want, just on collection I need make the same and don’t know the code of it.

[KetanKumar]

@Deoxes

oh sorry your have added wrong if possible to give theme access so i will quick fix

[Deoxes]

@KetanKumar If Possible tell me where I need past that code, because last time when I give access to my shopify change the codes and I need set it back I broke my theme, I wanna make it myself to know where I put that code, if that ok for you please tell me where I need put that long code?