Issue: User wants to swap the position of sale price and compare price on product pages, placing the sale price first (left) and compare price second (right).
Solution Provided:
base.css file using flexbox and order property to rearrange prices.price__sale,
.ajax-cart-item__price {
display: flex;
align-items: baseline;
}
.price__sale span:nth-child(2),
.ajax-cart-item__price .cart-compare {
order: 1;
margin-left: 8px;
}
Cart Page Fix:
main-cart-items.liquid fileStatus: Resolved. All price positions successfully swapped across product pages, collection pages, drawer cart, and main cart page.
Follow-up: Another user asked how to implement this on Dawn theme version 11.
I would like to have the sales price be first (to the left) on product pages and the compare price to come second (to the right of the sales price). Is there any way to do that?
URL: www.teefiti.dk code: Teefiti2022
Hello @MetteT 
Inside Shopify Admin, you can go to Edit code, open file base.css and add this code snippet at the bottom
.price__sale {
display: flex;
}
.price__sale span:nth-child(2) {
order: 1;
}
The result
Hope that helps!
@ZenoPageBuilder Hi, thank you that did work! However it changed the order both on the product pages and on the products in collections, which is fine but there is suddenly no margin between the prices when looking at products in collections as you can see here:
How do i fix this? And is there also a way to make this change apply to my cart and drawer cart, that still has the compare price first? 
Thank you so much.
Hi @MetteT
Thank you for pointing it out. Please use this code instead
.price__sale,
.ajax-cart-item__price {
display: flex;
align-items: baseline;
}
.price__sale span:nth-child(2),
.ajax-cart-item__price .cart-compare {
order: 1;
margin-left: 8px;
}
This should make the compare price to the right for cart drawer also, and add spacing between numbers. For the cart page, we need to modify the file cart.liquid or cart-template.liquid to swap the price and compare price. If you cannot find the code line, you can post the file content here I can help.
@ZenoPageBuilder Thanks again! That fixed the margin issue, and fixed the order of the prices in my drawer cart. In regards to the cart page, i dont seem to have either of the files you mentioned. I have these:
Should i just use the same code as in the base.css as you wrote for me in your previous message?
Can you send me the file cart.json?
@ZenoPageBuilder The cart.json has the following code:
{
"sections": {
"cart-items": {
"type": "main-cart-items",
"settings": {
"show_vendor": false
}
},
"cart-footer": {
"type": "main-cart-footer",
"blocks": {
"subtotal": {
"type": "subtotal",
"settings": {
}
},
"buttons": {
"type": "buttons",
"settings": {
}
}
},
"block_order": [
"subtotal",
"buttons"
],
"settings": {
"show_cart_note": false
}
},
"featured-products": {
"type": "featured-collection",
"settings": {
"title": "BESTSELLERS",
"collection": "bestsellers",
"products_to_show": 4,
"show_view_all": false,
"swipe_on_mobile": true,
"image_ratio": "adapt",
"show_secondary_image": true,
"add_image_padding": false,
"show_image_outline": false,
"show_vendor": false,
"show_rating": false
}
},
"b73baa5d-623a-4f1b-82d7-e850d6de0b31": {
"type": "multicolumn",
"blocks": {
"template--15642815135975__b73baa5d-623a-4f1b-82d7-e850d6de0b31-166851029849a771a7-0": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/1_d7715414-d787-4e89-b1c7-3c2bc96d0d02.png",
"title": "GRATIS LEVERING*",
"text": "
Ved køb over 599,00 DKK<\/p>
Levering inden for 1-3 hverdage<\/p>",
"link_label": "Læs mere",
"link": "shopify:\/\/policies\/shipping-policy"
}
},
"template--15642815135975__b73baa5d-623a-4f1b-82d7-e850d6de0b31-166851029849a771a7-1": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/2_88b76790-1087-4637-944c-0cc789c5fb71.png",
"title": "HURTIG HJÆLP",
"text": "
Vi besvarer alle henvendelser inden for 1-2 hverdage<\/p>",
"link_label": "Gå til Help Center",
"link": "shopify:\/\/pages\/help-center"
}
},
"template--15642815135975__b73baa5d-623a-4f1b-82d7-e850d6de0b31-166851029849a771a7-2": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/3_4e1e1917-4b4b-46e8-886a-5f0234807f6e.png",
"title": "GRATIS RETUR OG BYT",
"text": "
30 dages fuld returret på alle ordrer<\/p>",
"link_label": "Læs mere",
"link": "shopify:\/\/policies\/refund-policy"
}
},
"d442ab99-c05b-444b-963f-6bc3c0aee129": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/4_abb5d67b-83f4-46d5-91aa-434b388b5dad.png",
"title": "NEM OG HURTIG RETUR",
"text": "
Alle ordrer har medsendte returlabels<\/p>",
"link_label": "Læs mere",
"link": "shopify:\/\/policies\/refund-policy"
}
}
},
"block_order": [
"template--15642815135975__b73baa5d-623a-4f1b-82d7-e850d6de0b31-166851029849a771a7-0",
"template--15642815135975__b73baa5d-623a-4f1b-82d7-e850d6de0b31-166851029849a771a7-1",
"template--15642815135975__b73baa5d-623a-4f1b-82d7-e850d6de0b31-166851029849a771a7-2",
"d442ab99-c05b-444b-963f-6bc3c0aee129"
],
"settings": {
"title": "",
"image_width": "third",
"image_ratio": "square",
"column_alignment": "center",
"background_style": "secondary",
"button_label": "",
"button_link": "",
"swipe_on_mobile": true
}
},
"bad610f5-3ad6-4c8c-b196-8699177a9c21": {
"type": "rich-text",
"blocks": {
"template--15642815135975__bad610f5-3ad6-4c8c-b196-8699177a9c21-166851029866260e20-0": {
"type": "heading",
"settings": {
"heading": "HAR DU BRUG FOR HJÆLP?",
"heading_size": "h2"
}
},
"template--15642815135975__bad610f5-3ad6-4c8c-b196-8699177a9c21-166851029866260e20-1": {
"type": "text",
"settings": {
"text": "
Få information og skriv til os gennem vores Help Center.<\/p>"
}
},
"template--15642815135975__bad610f5-3ad6-4c8c-b196-8699177a9c21-166851029866260e20-2": {
"type": "button",
"settings": {
"button_label": "Gå til Help Center",
"button_link": "shopify:\/\/pages\/help-center",
"button_style_secondary": true
}
}
},
"block_order": [
"template--15642815135975__bad610f5-3ad6-4c8c-b196-8699177a9c21-166851029866260e20-0",
"template--15642815135975__bad610f5-3ad6-4c8c-b196-8699177a9c21-166851029866260e20-1",
"template--15642815135975__bad610f5-3ad6-4c8c-b196-8699177a9c21-166851029866260e20-2"
],
"settings": {
"color_scheme": "accent-1",
"full_width": true
}
}
},
"order": [
"cart-items",
"cart-footer",
"featured-products",
"b73baa5d-623a-4f1b-82d7-e850d6de0b31",
"bad610f5-3ad6-4c8c-b196-8699177a9c21"
]
}
Hi @MetteT
Please send me the file main-cart-items.liquid also, the code should be in there.
@ZenoPageBuilder here it is:
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{% schema %}
{
"name": "t:sections.main-cart-items.name",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-cart-items.settings.show_vendor.label"
}
]
}
{% endschema %}
Hi @MetteT
Find this code snippet
{% if item.variant.compare_at_price > item.variant.price %}
~~{{ item.variant.compare_at_price | money }}~~
{% endif %}
{%- if item.original_price != item.final_price -%}
{{ 'products.product.price.regular_price' | t }}
<s>
{{- item.original_price | money -}}
</s>
{{ 'products.product.price.sale_price' | t }}
<strong>
{{ item.final_price | money }}
</strong>
{%- else -%}
{{ item.original_price | money }}
{%- endif -%}
and reorder it like this
{%- if item.original_price != item.final_price -%}
{{ 'products.product.price.regular_price' | t }}
<s>
{{- item.original_price | money -}}
</s>
{{ 'products.product.price.sale_price' | t }}
<strong>
{{ item.final_price | money }}
</strong>
{%- else -%}
{{ item.original_price | money }}
{%- endif -%}
{% if item.variant.compare_at_price > item.variant.price %}
~~{{ item.variant.compare_at_price | money }}~~
{% endif %}
@ZenoPageBuilder Thank you!! That worked.
Hello, please do you know how to do it on theme dawn 11 ? thanks in advance