strikethrough line on product price - dawn theme

[Vws9]

Hello,

I have  a shopify store and i want to use Dawn theme, but after i uploaded my products and set the prices

as you can see in the image

on product page or in the front page i dont have that line that cross on the higher price .. the strikethough line ..

And i dont know why cuz like 5 years ago i used shopify for a store and it was that simple but now ..

Can anybody help me please ?

[lynth]

Hi Vws9, try this:

1. Access the Theme Editor:

   • Go to your Shopify admin panel.
   • Navigate to Online Store > Themes.
   • Find the Dawn theme and click on Customize.

2. Enable Compare-at Price:

   • In the theme editor, navigate to the Product pages.
   • Look for the section where product prices are displayed.
   • Ensure that the Compare-at price is enabled. This might be a setting within the product price section or a checkbox that needs to be checked.

3. Edit Theme Code (if necessary):

   • If the compare-at price isn’t showing up, you may need to edit the theme code.

   • Go back to the Themes section and click on Actions > Edit code for the Dawn theme.

   • Open the main-product.liquid file located under Sections.

   • Look for the code that displays the product price. It will look something like this:

<span class="price">{{ product.price | money }}</span>

• Add the compare-at price code:

{% if product.compare_at_price > product.price %}
<span class="compare-at-price">{{ product.compare_at_price | money }}</span>
{% endif %}

[Vws9]

I dont have this line of code in main-product.liquid, also i search for this line in price.liquid and nothing 😞 

<span class="price">{{ product.price | money }}</span>

I just saw that if i want to edit the product on store, the sale will show

but if i click save or anything and exit the sale doesnt show ...

[magecomp]

Hello @Vws9 

If your theme isn't displaying the strikethrough correctly, try this

• Go to Online Store > Themes.
• Click "Actions" > "Edit code" for your active theme.
  
  • Look for a file named price.liquid or something similar. This file typically controls how prices are displayed.
    
    • Look for the code that displays the compare-at price.
    • Add the CSS style text-decoration: line-through; to the HTML element containing the compare-at price.

<span class="compare-at-price" style="text-decoration: line-through;">{{ product.compare_at_price | money }}</span>

[Vws9]

That is all the code from price.liquid

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - placeholder: {Boolean} Renders a placeholder price (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  elsif placeholder
    assign target = null
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
  assign money_price = price | money
  assign money_price_min = price_min | money
  assign money_price_max = price_max | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

{%- unless target == null and placeholder == null -%}
  <div
    class="
      price
      {%- if price_class %} {{ price_class }}{% endif -%}
      {%- if available == false %} price--sold-out{% endif -%}
      {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
      {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
      {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
      {%- if show_badges %} price--show-badge{% endif -%}
    "
  >
    <div class="price__container">
      {%- comment -%}
        Explanation of description list:
          - div.price__regular: Displayed when there are no variants on sale
          - div.price__sale: Displayed when a variant is a sale
      {%- endcomment -%}
      <div class="price__regular">
        {%- if product.quantity_price_breaks_configured? -%}
          {%- if show_compare_at_price and compare_at_price -%}
            {%- unless product.price_varies == false and product.compare_at_price_varies %}
              <span class="visually-hidden visually-hidden--inline">
                {{- 'products.product.price.regular_price' | t -}}
              </span>
              <span>
                <s class="price-item price-item--regular variant-item__old-price">
                  {% if settings.currency_code_enabled %}
                    {{ compare_at_price | money_with_currency }}
                  {% else %}
                    {{ compare_at_price | money }}
                  {% endif %}
                </s>
              </span>
            {%- endunless -%}
          {%- endif -%}
          <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
          <span class="price-item price-item--regular">
            {{-
              'products.product.volume_pricing.price_range'
              | t: minimum: money_price_min, maximum: money_price_max
            -}}
          </span>
        {%- else -%}
          <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
          <span class="price-item price-item--regular">
            {{ money_price }}
          </span>
        {%- endif -%}
      </div>
      <div class="price__sale">
        {%- unless product.price_varies == false and product.compare_at_price_varies %}
          <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
          <span>
            <s class="price-item price-item--regular">
              {% if settings.currency_code_enabled %}
                {{ compare_at_price | money_with_currency }}
              {% else %}
                {{ compare_at_price | money }}
              {% endif %}
            </s>
          </span>
        {%- endunless -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
        <span class="price-item price-item--sale price-item--last">
          {{ money_price }}
        </span>
      </div>
      <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
        <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
        <span class="price-item price-item--last">
          <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
          <span aria-hidden="true">/</span>
          <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
          <span>
            {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
              {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
          </span>
        </span>
      </small>
    </div>
    {%- if show_badges -%}
      <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
        {{ 'products.product.on_sale' | t }}
      </span>

      <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
        {{ 'products.product.sold_out' | t }}
      </span>
    {%- endif -%}
  </div>
{% endunless %}

[Moeed]

Hey @Vws9 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @Vws9 

It should have a line-through on compare prices by default on the Dawn theme. Maybe some customized code you added caused this issue. Could you share store URL so I can check? 

 

[Vws9]

https://af4f76-8c.myshopify.com/

that's the url 

i didn't customized the code or something, just the basic product uploads and setting the prices..

[Dan-From-Ryviu]

Which product has a compared price higher than the price? You must add a compared price value higher than the price then it will automatically add a line-through

[Vws9]

All of them ...

The compare price is 49.90 and the price 29.90, but ...

[Dan-From-Ryviu]

I see they are the same price. 

[lynth]

Vws9 do you use any sales apps?

[Vws9]

Nope, i have 0 apps installed, i just installed the theme and imported the products ..

[Vws9]

i dont know why .. 

look 

so i dont get it, there is a bug a the theme ?

[lynth]

I'm not sure. Try to change the compare price and save it. We'll see what will happen.

[Vws9]

I did this, repeatedly, but the result remains the same

[Vws9]

So that means there is no solution for my problem ? 

🤣🤣 

[Vws9 · Accepted solution]

So i think i managed to solve the problem i guess 

I imported all the products from my previous store that was made with wordpress + woocommerce, on all my imported products i have the problem with the compared-at price, but i just wanted to see if i upload a product manually (a test product), the problem will still be there ?

As an answer - no, the compared price appeared, but the text is in frech 🤣 i dont get it how because all the store is in another language not in frech, but still it's much better than previous problem.. 

Thank you all for your help !