Hi all,
my Sale and Sold Out badges on product pages aren’t aligned to the price. Is there a way to align them up higher to the same height as the price? Pics attached below.
url:
pass:
test99
Topic summary
A user is experiencing misalignment between product badges (Sale/Sold Out) and pricing on their Shopify product pages, with badges appearing lower than desired.
Solutions Provided:
Two community members offered CSS-based fixes:
- First approach: Add custom CSS code to the theme.liquid file before the
</head>tag to adjust badge positioning - Second approach: Insert CSS code before the
</body>tag in theme.liquid, specifically targeting.product .price--largewith flexbox properties (display: flexandalign-items: center) for screens 750px and wider
Both solutions involve editing the theme’s liquid files through the Shopify admin panel (Online Store → Theme → Edit code). Screenshots were provided showing the expected alignment results after implementing the fixes.
Status: The issue appears resolved with multiple working solutions offered, though no confirmation from the original poster is visible.
1 Like
- Here is the solution for you @vvyan
- Please follow these steps:
- Then find the theme.liqid file.
- Then add the following code at the before tag and press ‘Save’ to save it.
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Hello @vvyan
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.