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

Topic summary

Goal: add a horizontal separator line on Shopify product pages. It should show above the variant selector when variants exist, or above the price when there are no variants. Local HTML shows it, but it wasn’t appearing on the live theme.

Proposed solutions:

  • Add a pseudo-element line above the sale price via CSS targeting .price__sale::before (absolute 2px line).
  • Alternatively, add a border-bottom to .product__info-container > div:nth-child(3) to place a line after a specific block.

Refinement of requirements (in PT): the line must always precede the variant selector if present, otherwise precede the price; reviews may or may not exist. An image mockup was provided to illustrate placement.

Latest update: new CSS provided to target the variant selector element (variant-selects) with a ::before pseudo-element and position: relative on variant-selects, placing a thin line just above the selector.

Status: partial solution for products with variants. It’s not yet confirmed how the line is handled on products without variants (above the price). No final resolution confirmed; discussion remains open.

Summarized with AI on December 25. AI used: gpt-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