Featured collection section on home page- Price before sale removed

Store Design
1

On the home page in the featured collection section, After enlarging the price ( which looks great) now the scored-out price that tells the customer what the price was before the sale and the new price are so far apart from each other that it’s forcing some prices to take up two or three lines. Can someone please help me bring them closer together?

unnamed.jpg
unnamed.jpg1170×579 46.2 KB

2

Hi @jay113
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Handsdownpro.com.au

4

Hi @jay113

Due to the large font size, the remaining space on the line is not enough to display, so the line will be separated into next line.

The spacing can be reduced by following these suggestions:

Themes => Edit code => Base.css. Add the following codes at the end of the file.

.price .price-item {
display: contents !important;
margin: 0px !important;
}

Reduce the font size a bit to save space

.price-item--sale {
font-weight: 600;
font-size: 20px !important;
letter-spacing: 0px !important;
}
.price--on-sale .price-item--regular {
font-size: 16px;
}

But if you just want to reduce the font size when viewing on mobile, just add the following code:

@media only screen and (max-width: 576px) {
.price .price-item {
display: contents !important;
margin: 0px !important;
}
.price-item--sale {
font-weight: 600;
font-size: 20px !important;
letter-spacing: 0px !important;
}
.price--on-sale .price-item--regular {
font-size: 16px;
}
}

Here’s the result:

BSSCommerce_0-1686133990626.png
BSSCommerce_0-1686133990626.png353×761 93.1 KB

5

I really like the option you gave for the mobile version as that is where Im having the most problems. The only thing is that it took away the strikethrough that was on the non-sale price. Can you please help me just to get that line that was through the grey old pricing please, but keep the rest? Thank you so much!

6

Hi @jay113

I have checked and found the code I suggested does not affect the loss of the strikethrough on the non-sale price.

So, I can show you the code to have strikethrough on your theme.

.price--on-sale .price-item--regular {
    text-decoration: line-through;
    color: rgba(var(--color-foreground),.75);
    font-size: 1.8rem;
}
  • You can add the !important attribute to make sure there is always a dash on your non-sale price.
.price--on-sale .price-item--regular {
    text-decoration: line-through !important;
    color: rgba(var(--color-foreground),.75);
    font-size: 1.8rem;
}

If it worked, please mark as a solution. Good luck!