Re: strikethrough line on product price - dawn theme

Solved

strikethrough line on product price - dawn theme

Vws9
Excursionist
23 2 3

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

 

Screenshot 2024-08-05 104737.png

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 ?

Accepted Solution (1)
Vws9
Excursionist
23 2 3

This is an 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 !

View solution in original post

Replies 17 (17)

lynth
Shopify Partner
125 6 15

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

 

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
Vws9
Excursionist
23 2 3

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

Screenshot 2024-08-05 110059.png

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

magecomp
Shopify Partner
450 31 47

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>
Helping voluntarily. Please like and accept the solution if it helps. Thanks!
Our Bestseller Shopify Apps    |      Mobile App Builder by MageComp    |      Shoplock Hide Pages/Collections

Need a developer?  Just visit MageComp website
Vws9
Excursionist
23 2 3

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
Shopify Partner
5886 1599 1901

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

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Dan-From-Ryviu
Shopify Partner
10094 2006 2058

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? 

Screenshot 2024-08-05 at 15.13.13.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Vws9
Excursionist
23 2 3

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
Shopify Partner
10094 2006 2058

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Vws9
Excursionist
23 2 3

All of them ...

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

Dan-From-Ryviu
Shopify Partner
10094 2006 2058

 

I see they are the same price. 

Screenshot 2024-08-05 at 15.52.55.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

lynth
Shopify Partner
125 6 15

Vws9 do you use any sales apps?

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
Vws9
Excursionist
23 2 3

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

Vws9
Excursionist
23 2 3

i dont know why .. 

look 

 

Screenshot 2024-08-05 121842.png

 

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

lynth
Shopify Partner
125 6 15

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

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
Vws9
Excursionist
23 2 3

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

Vws9
Excursionist
23 2 3

So that means there is no solution for my problem ? 

🤣🤣 

Vws9
Excursionist
23 2 3

This is an 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 !