How do i add a divider line between the “Get more, save more” offer and “Get an additional 10% off with this bundle offer”
Topic summary
A user seeks to add divider lines between different sections on their Shopify product page, specifically between promotional offers and product descriptions.
Initial Solution Provided:
- Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
- Locate the CSS file in the Assets folder (base.css, style.css, or theme.css depending on the theme)
- Add custom CSS code targeting the specific element ID to create a border:
#div.shopify-block-vitals_ub_product_bundles_D8UM48 {
border-top: 1px solid black;
}
Follow-up Request:
The original poster then asks how to apply the same divider technique between the product description and another offer section (“neon car interior rgb led ambient light strip kit”).
Status: The discussion remains open, awaiting guidance on implementing the second divider. Screenshots were shared to illustrate the desired placement, though the specific CSS solution for the second divider has not yet been provided.
1 Like
Hi @ZephyrShop
Do you mean like this?
If it is check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#shopify-block-vitals_ub_product_bundles_bDMU84 {
border-top: 1px solid black;
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
