How to move the price to the left of the old price

[Spartan697]

Hello,

I would like to move the price to the left of the old price which is crossed out if possible

Example: $19.99 $29.99 instead of $29.99 $19.99

My theme is DAWN 2.0

Thanks

[JohnWR]

I don't have access to that specific theme, but you'll need to edit the product template liquid file for it and move the price elements around. for example on my theme, this element has the discounted price:

<span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
{{ product.price | money }}
</span>

then there's a if elsif else statement to show the other price:

{% if product.compare_at_price > product.price %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price">
                {{ product.compare_at_price_max | money }}
              </s>
            {% else %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price hide">
                {{ product.compare_at_price_max | money }}
              </s>
            {% endif %}

putting one above the other will change the way the price is shown.

[Spartan697]

@JohnWR 

thank you for your answer, I did your method, it moves the price on the left but the old price on the right is not displayed by being crossed out

[Ollie]

Hey @Spartan697.

Thanks for reaching out.

Did you attempt to change the coding as advised by @JohnWR? Make sure to mark their post as a solution if this worked for you.

Looking into the options using the Dawn theme, we are unable to move the location of the sales price on the product pages using the Theme Editor. With that being said, it would be possible to have the price display to the left with a manual change of coding. Since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal team to make the changes on your half.

If you are interested in using the design time, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before speaking with a Support Advisor about the changes you would like to see.

Let me know if you have any additional questions.