How to add separator line

[Spay]

Just like this store has under the product price

[Small_Task_Help]

Hi,

Need to add custom css at section

CSS code example

.separator-line {
    border-bottom: 1px solid #dddddd; /* Adjust thickness and color as needed */
    margin: 20px 0; /* Adjust margin to control spacing around the line */
}

[Rahul_dhiman]

Hello @Spay
Go to online store ----> themes ----> actions ----> edit code ---->assets ---->component-price.css ----> line number 48
search this code

@media screen and (min-width: 750px) {
.price--large {
font-size: 1.8rem;
}
}

and replace with this code

. @media screen and (min-width: 750px) {
.price--large {
font-size: 1.8rem;
border-bottom: 1px solid grey;
}
}

result

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

[BSSCommerce-HDL]

Hi @Spay

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Made4uo-Ribe]

Hi @Spay

Would you mind to share your store URL? Thanks!

[Spay]

@Rahul_dhiman ive added the code and it works but it doesnt work when viewing on mobile?

[Rahul_dhiman]

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->component-price.css ----> line number 41
search this code

.price--large {
font-size: 1.6rem;
line-height: calc(1 + .5 / var(--font-body-scale));
letter-spacing: .13rem;
}

and replace with this code

.price--large {
font-size: 1.6rem;
line-height: calc(1 + .5 / var(--font-body-scale));
letter-spacing: .13rem;
border-bottom: 1px solid grey;
}

result

Thanks