Removing the sale option and making the price one line?

[katie99dreams]

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?

[goldi07]

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:

<span class="price__badge-sale">
   {{ 'products.product.on_sale' | t }}
</span>

4.Delete or comment out that section.

Thank you 😊

[katie99dreams]

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? 

[DaisyVo]

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" 

Result 

Best,

Daisy

[DaisyVo]

Yes, its css for your website

[katie99dreams]

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

[Rahul_dhiman]

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

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

[katie99dreams]

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