Removing the sale option and making the price one line?

Technical Q&A
, , , ,
1

Hello, on mobile view my original price plus markdown price don’t fit in one line. I want to remove the sale text too. If the original price and markdown can’t fit in one line, how can I remove the original price and just keep the markdown?

2

Hello @katie99dreams

To fix this in the Sense theme, you have two options:

1.Force both prices to fit in one line by reducing font size or adjusting spacing.
2.Hide the original price when they don’t fit in one line.
Solution 1: Adjust font size & spacing
Try reducing the font size for price elements in your CSS. Add this to your theme’s base.css or theme.css file:

@media screen and (max-width: 768px) {
  .price .price__sale {
    font-size: 14px; /* Adjust as needed */
  }
  .price .price__regular {
    font-size: 14px; /* Adjust as needed */
    margin-right: 5px;
  }
}

This helps fit both prices in one line.

Solution 2: Hide Original Price on Mobile
If the original price and markdown don’t fit, hide the original price on mobile and show only the markdown price. Add this to base.css or theme.css:

@media screen and (max-width: 768px) {
  .price .price__regular {
    display: none;
  }
}

This hides the original price (crossed-out price) on mobile, showing only the markdown price.

To remove the “Sale” text, edit your product-price.liquid file:

1.Go to Online Store > Themes > Edit Code
2.Open Snippets > product-price.liquid
3.Find something like:


   {{ 'products.product.on_sale' | t }}

4.Delete or comment out that section.

Thank you :blush:

3

Hi @katie99dreams

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.aio.min.css and add this code at the end of the file

.card__badge.bottom.left {
    display: none !important;
}

.price--on-sale .price-item--regular {
    display: none !important;
}

Step 3: Find this file and remove text “From”

DaisyVo_0-1741406946825.png
DaisyVo_0-1741406946825.png1915×961 154 KB

Result

DaisyVo_1-1741406954961.png
DaisyVo_1-1741406954961.png341×528 112 KB

Best,

Daisy

4

Hello @katie99dreams
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-card-aio-min.css
add this code at the end of the file and save.

.card__badge {
display: none !important;
}
s.price-item.price-item--regular {
display: none !important;
}

result

8.png
8.png347×520 60.8 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Yes, its css for your website

6

Hi! Thank you for much for your response. I tried the first option and it still didn’t change anything. Then, I went to look at the last solution and i can’t find the price_badge-sale in my code. I attached a screenshot as well. Do you know where it could be?

WechatIMG1362.jpg
WechatIMG1362.jpg401×1625 73.2 KB

7

Hi! How can I just remove the ‘from’? I want to keep everything else as is.

8

Hi! How can I just remove the ‘from’? I want to keep everything else as is.