How do I put this separator line on the product page?

Store Design
, ,
1

anapdeabreu_0-1719592363904.png
anapdeabreu_0-1719592363904.png932×792 79.1 KB

When I save it in HTML and open it in the browser, it appears normally, but on the Shopify page it does not appear.

1 Like
2

https://lojabauer.com.br/products/espremedor-eletrico-inteligente-para-sucos-e-vitaminas

3

Hi @anapdeabreu ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSCommerceHDL_0-1719592679990.png
BSSCommerceHDL_0-1719592679990.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

BSSCommerceHDL_1-1719592685205.png
BSSCommerceHDL_1-1719592685205.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

.price__sale::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    background-color: #00000038;
}

Here is result:

BSSCommerceHDL_2-1719592739165.png
BSSCommerceHDL_2-1719592739165.png675×884 234 KB

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 :heart_eyes:

4

Hi @anapdeabreu

i cant find your reviews on the prodcut title.

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.product__info-container > div:nth-child(3) {
    border-bottom: 5px solid black;
}
5

Como seria para que estivesse sempre antes do seletor de variantes? Porque alguns produtos possuem variantes e avaliações, pouco antes do preço acabar não sendo o design desejado. link this for example: https://lojabauer.com.br/products/cinta-de-sustentacao-para-gestantes-bauer?variant=49339582447935

1 Like
6

Hi @anapdeabreu , Can you take a picture for me to describe the place you need?

7

anapdeabreu_0-1719594277183.png
anapdeabreu_0-1719594277183.png622×627 50.2 KB

Imagine that you have the evaluations already imported, it should look like I drew it. it’s possible?
Not all products have it, but I want it to always be above the price if there are no variants, or above the variant selector if there are variants

1 Like
8

Hi @anapdeabreu , Please remove the old code and add this new code:

variant-selects::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    top: -7px;
    left: 0;
    background-color: #00000038;
}

variant-selects {
    position: relative;
}

Hope this can help you