I need to add a divider line here where the blue line is on the product page, if anyone can show me the location of where to add this as I can’t (seem to) find it on the element inspector .
Live page - https://pongy.co.uk/products/alien
Thanks!
Topic summary
A user seeks to add a horizontal divider line on their Dawn theme product page at a specific location (indicated by a blue line in their screenshot).
Proposed Solutions:
-
CSS approach: Add custom CSS to
base.csstargeting the product description element withborder-toporborder-bottomproperties. Adjust padding/margin to control spacing from surrounding content. -
No-code approach: Use Shopify’s theme customizer to add a Custom Liquid block in the Default product template, then insert an
<hr>tag for the divider.
Key considerations:
- Multiple responders provided CSS snippets with properties like
border-bottom: 1px solid blueand padding adjustments - Users may need to fine-tune margin/padding values to prevent the divider from appearing too flush with content
- The discussion remains open with offers for further assistance if needed
@Shay751 add a custom-setting for those templates with css similar to the following tailored to need:
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
border-bottom: 1px solid blue;
padding-bottom: 10px;
To offset the border from being too flush to the content you may need to adjust the padding, or margin-bottom, or the next element’s margin-top
If you need this customization put in place for you then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
1 Like
Hey @Shay751 ,
Add the following to your base.css. Adjust the line thickness and padding as you prefer.
.product__description.rte.quick-add-hidden {
border-top: 2px solid rgb(var(--color-button)) !important;
padding-top:16px;
}
Result
1 Like
1 Like
Hi @Shay751 ,
If you have any questions, you can contact me directly.
Happy to help you 