Product Prices on One Line

Store Design
,

Topic summary

A store owner wants to consolidate product pricing elements (strikethrough price, current price, and sale badge) onto a single horizontal line on their product detail pages, as they currently display vertically and take up too much space.

Solutions Provided:

Two community members offered CSS solutions:

  • First approach: Uses flexbox with a media query to apply the single-line layout only on screens 481px and wider, preventing layout issues on mobile devices. Includes gap spacing and negative margin adjustments.

  • Second approach: Initially provided a simpler flexbox solution, then refined it based on feedback to reorder the price elements using CSS order property, placing the sale price first, followed by the original price, then the sale badge.

Current Status:

The discussion appears resolved with working CSS code provided. The store owner confirmed the second solution looked better and requested the price order adjustment, which was successfully addressed in the final code snippet.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Currently our product pricing on product detail page is too spread out. I want the strikethrough price, current price and sale badge all on one line.

https://www.physioworldshop.co.uk/products/collections-electric-couches-products-addax-practice-manager-electric-treatment-couch-2-sections-blue

This is what we currently have:

product-page-current.png
product-page-current.png1369Ă—507 162 KB

This is what I would like

product-page-required.png
product-page-required.png1369Ă—507 162 KB

1 Like
2

Hey @ChrisW3 .

Here’s how to achieve that:

  1. Navigate to Sales Channels → Online Store → “Customize” button → Theme settings (Gear icon on the left sidebar) → Custom CSS
  2. Add the following code:
@media screen and (min-width: 481px) {
  li:has(.inc_vat_text) span {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: -30px !important;
  }
}
  1. Save (right top corner)
  2. Hard refresh the storefront

If done correctly, the result should be like this:

Screenshot_2.png
Screenshot_2.png795Ă—401 61.3 KB

The ruleset is only applied for 480+ px (so no mobile phones) as the single line gets too wide for small screens. Feel free to adjust the values as you see fit.

3

Please add this code below to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings

.product-meta span {
    display: flex !important;
    align-items: center;
    margin-right: 8px;
}

Screenshot 2025-04-02 at 09.17.38.png
Screenshot 2025-04-02 at 09.17.38.png1766Ă—640 44.5 KB

4

Hi Dan, it looks better, thank you. How would I get the lower price first, then the sale price after, so it is more like this:

ChrisW3_0-1743579104545.jpeg
ChrisW3_0-1743579104545.jpeg1179Ă—1034 70.3 KB

5

Please update the code

.product-meta span {
    display: flex !important;
    align-items: center;
    margin-right: 8px;
    order: 2;
}
.product-meta span.inc_vat_text {
    order: 1 !important;
}
.product-meta span.percentage_text {
    order: 3 !important;;
}