Hi! I’m using the Dawn theme and have some items on sale so I created a new css file and added some code to make the compare at price (strikedthrough) and sale price appear black (#000000 ) and red (#ff0000 ) respectively on the product pages and also the collection pages.
However, when the sale item is added to cart, only the sale price appears and it is black just like a normal item would appear. I would like to make the compare at price (strikedthrough) and sale price appear black (#000000 ) and red (#ff0000 ) respectively on the Your cart page and also on the final checkout page so that customers can easily confirm that the item they’ve added and about to purchase is discounted.
I’ve added screenshots with edits to show what I mean.
Does anyone have a code to do this? My store is saikocollective.com
Hi @saikocollective you cannot edit the checkout page. please share the cart page code, it can b edited.
Ok I see. With the cart page code, which file name is it you’d need? I’m still a beginner and just know super basic stuff about editing the new css file I made but not much else about the other sections and files.
please search in theme files with the name cart. it should be in the sections folder
This is the code in the file named main-cart-items.liquid
{{ ‘component-cart.css’ | asset_url | stylesheet_tag }}
{%- style -%}
@media screen and (min-width: 750px) {
{%- unless settings.cart_type == ‘drawer’ -%}
{%- endunless -%}
{{ 'sections.cart.empty' | t }}
{{ 'general.continue_shopping' | t }}
{%- if shop.customer_accounts_enabled and customer == nil -%}
{{ 'sections.cart.login.title' | t }}
{{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
{%- endif -%}
{%- if cart != empty -%}
{{ 'sections.cart.title' | t }}
{%- for item in cart.items -%}
{%- endfor -%}
{{ 'sections.cart.headings.product' | t }}
{{ 'sections.cart.headings.total' | t }}
{{ 'sections.cart.headings.quantity' | t }}
{{ 'sections.cart.headings.total' | t }}
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
{% endif %}
{%- if settings.show_vendor -%}
{{ item.product.vendor }}
{%- endif -%}
{{ item.product.title | escape }}
{%- if item.original_price != item.final_price -%}
{{ 'products.product.price.regular_price' | t }}
{{- item.original_price | money -}}
{{ 'products.product.price.sale_price' | t }}
{{ item.final_price | money }}
{%- else -%}
{{ item.original_price | money }}
{%- endif -%}
{%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
{{ option.name }}:
{{ option.value }}
{%- endfor -%}
{%- endif -%}
{%- for property in item.properties -%}
{%- endif -%}
{%- endfor -%}
{{ item.selling_plan_allocation.selling_plan.name }}
{%- endif -%}
{%- for discount in item.discounts -%}
{%- render 'icon-discount' -%}
{{ discount.title }}
{%- endfor -%}
{%- if item.original_line_price != item.final_line_price -%}
{{ 'products.product.price.regular_price' | t }}
{{ item.original_line_price | money }}
{{ 'products.product.price.sale_price' | t }}
{{ item.final_line_price | money }}
{%- else -%}
{{ item.original_line_price | money }}
{%- endif -%}
{%- if item.variant.available and item.unit_price_measurement -%}
{{ 'products.product.price.unit_price' | t }}
{{ item.variant.unit_price | money }}
/
{{ 'accessibility.unit_price_separator' | t }}
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{{ 'products.product.quantity.label' | t }}
{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}
{% render 'icon-minus' %}
{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}
{% render 'icon-plus' %}
{% render 'icon-remove' %}
{%- if item.original_line_price != item.final_line_price -%}
{{ 'products.product.price.regular_price' | t }}
{{ item.original_line_price | money }}
{{ 'products.product.price.sale_price' | t }}
{{ item.final_line_price | money }}
{%- else -%}
{{ item.original_line_price | money }}
{%- endif -%}
{%- if item.variant.available and item.unit_price_measurement -%}
{{ 'products.product.price.unit_price' | t }}
{{ item.variant.unit_price | money }}
/
{{ 'accessibility.unit_price_separator' | t }}
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endif -%}
{{ 'accessibility.loading' | t }}
{% schema %}
Hi @Ahsan_ANC , I would like to hire you to tweak my shopify Sense theme to show the Compare At price and savings on the cart page. Please let me know how to contact you for this job, thank you.
Here is the step by step guide to add compare at price to the cart page to all the shopify free themes and dawn theme. https://www.devluxx.com/blogs/shopify-tutorials/how-to-add-compare-at-price-to-the-cart-page-in-shopify-dawn-theme
