Solved

How to put a horizontal line under add to cart button?

WWJDWR
Excursionist
24 0 3

Hi everyone! I have been trying to figure out how to put a light horizontal line under my add to cart button on my product page like the image attached. The image was taken from this site: https://subpod.com/products/subpod-mini-essentials-bundle

If anyone knows how to add this line please let me know, thank you <3.

add to cart line.jpg

Accepted Solution (1)

ZenoPageBuilder
Shopify Partner
1052 203 217

This is an accepted solution.

Hello @WWJDWR 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.product-form form {
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 20px;
}

The result

Screenshot 2023-10-03 at 10.54.22.png

Hope it helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

Replies 4 (4)

ZenoPageBuilder
Shopify Partner
1052 203 217

This is an accepted solution.

Hello @WWJDWR 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.product-form form {
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 20px;
}

The result

Screenshot 2023-10-03 at 10.54.22.png

Hope it helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
WWJDWR
Excursionist
24 0 3

Hi how can I put the same line where I'm pointing at in the screenshot so it's under all the selling points? So that there is one above and one below. Hope that's not confusing. Thanks.


line 2.jpg

zaboo
Visitor
3 0 0

Hi, did you figure out how to add it to where the red arrow is pointing? having the same issue. 

websensepro
Shopify Partner
1014 139 147

Hi, @WWJDWR.

 

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

 

.product-form__buttons {
    border-bottom: 0.1px solid gray;
    padding-bottom: 25px;
}

 

Result:

websensepro_0-1696333821220.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here