I’d like to have the price before the “Compare at” badge, and the strikethrough “Compare at” price at the right. I can’t seem to figure out how to rearrange this in the code editor.
TIA!
Current:
Desired layout:
Topic summary
A user wants to rearrange the price component layout in Shopify’s Dawn 8.0 theme—specifically moving the sale price before the “Compare at” badge and positioning the strikethrough compare-at price to the right.
Attempted Solutions:
- Two support representatives (PageFly-Victor and GemPages) provided CSS/JavaScript code snippets to be added to theme.liquid
- Code placement varied: some suggested before
</head>, others before</body>
Issues Encountered:
- Prices became duplicated when viewing collections
- Visual results didn’t match the desired layout
- Different code placements produced inconsistent outcomes
- User questioned whether reordering elements within specific CSS selectors (like
.price--large.price--on-sale) would affect the layout
Current Status:
The issue remains unresolved. PageFly-Victor’s latest response requests removing all previously added code before </head> to start fresh, suggesting the multiple code attempts may be conflicting. The discussion is ongoing with troubleshooting in progress.
Hi @SweetStop
This is Victor from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Victor | PageFly
Hello @SweetStop ,
You can follow these steps to swap Price and sale price:
- Go to Online Store->Theme->Edit code
- Open your theme.liquid file, paste the below code before
Result like this
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Thank you -
This is the only custom code entered into my template with the exception of installed apps.
Here’s the result of your instructions:
If I paste the code in the same location in the theme.liquid file that GemPages below describes, I get this:
I get this in both paste locations, prices become duplicated when showing a collection:
This was the result:
Pasting your code in front of as PageFly-Victor described above caused no change.
Hi @SweetStop Would you mind share with you the URL of your site and password if its password protected?
It’s www.sweetstop.shop.
Thanks for helping with this.
I’ve tried pasting the code before and before and gotten the same results both ways, different from yours:
Does rearranging the order within these lines of code, such as - “(‘.price.price–large.price–on-sale.price–show-badge span.badge.price__badge-sale.color-accent-2’)” affect the layout? I’ve tried moving a few things around, but just can’t seem to get the right result.
Hi @SweetStop Sorry for the late reply.
I think before adding any code, please help me to remove all the code that was added before.
And all all the code here before the
Before the only.
Thank you