How do I add a border to my store page

Solved
tamiak
Explorer
66 0 28

Hello, 

Can someone please help me. I am designing my store page and it does not seem to have a border in the page and around the products. My store is animelightsca.myshopify.com. Store Password is rujeir. I would like the border to be the same color logo as my logo and also kind of thick. Any help is appreciated !

Accepted Solutions (2)

Accepted Solutions
Muhammad_Ali_S
Shopify Partner
534 98 148

This is an accepted solution.

Add this in your asset/theme.scss file.

.product-card {
    padding: 25px;
    margin: 5px;
    border: #cb23d8 solid 5px;
    border-left-width: 5px !important;
}

 If you want any other assistance, please do let me know.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing

View solution in original post

Muhammad_Ali_S
Shopify Partner
534 98 148

This is an accepted solution.

Hi,

I added the code in chunks so you can understand its effect and keep those that you like and discard the other.

Add these one by one at the end of Theme.scss file

Note: (2px,3px) the numbers 2, 3, 5  represent the thickness of the border, you can change as you want. 

No.1

 

.site-header {
    border-top: 3px solid #cb23d8 !important;
}

 

 

No.2

 

.nav-bar {
    border-top: 2px solid #cb23d8 !important;
    border-bottom: 2px solid #cb23d8 !important;
}

 

 

No.3

 

.site-footer {
    border-top: 2px solid #cb23d8 !important;
}

 

 

No.4

 

.site-footer__copyright {
    border-top: 2px solid #cb23d8 !important;
    border-bottom: 2px solid #cb23d8 !important;
}

 

 

Good Luck!

 

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing

View solution in original post

Replies 24 (24)
khilan
Shopify Partner
271 15 26

hey , @tamiak 

i can solve this your problem .

please share your web site url and password .

thank you so much .

khilan

Shopify Expert | Skype: khilan.mendapara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on khilan.mendapara1995@gmail.com regarding any help
Muhammad_Ali_S
Shopify Partner
534 98 148

Like this??

Screenshot 2021-04-04 133630.png

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing
Muhammad_Ali_S
Shopify Partner
534 98 148

This is an accepted solution.

Add this in your asset/theme.scss file.

.product-card {
    padding: 25px;
    margin: 5px;
    border: #cb23d8 solid 5px;
    border-left-width: 5px !important;
}

 If you want any other assistance, please do let me know.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing
tamiak
Explorer
66 0 28

Hi khilan,

My website URL is animelightsca.myshopify.com and my password is rujeir

Thanks

tamiak
Explorer
66 0 28

yes exactly, how do I do it?

I also want a border that separates my header and footer from the body of the site.

Thanks so much. 

tamiak
Explorer
66 0 28

I tried it and it worked for the product page. Thanks so much.

Please, I also need a border that separates the header and footer from the body of the site 

tamiak
Explorer
66 0 28

And maybe a border that separates all sections on my homepage 

Muhammad_Ali_S
Shopify Partner
534 98 148

This is an accepted solution.

Hi,

I added the code in chunks so you can understand its effect and keep those that you like and discard the other.

Add these one by one at the end of Theme.scss file

Note: (2px,3px) the numbers 2, 3, 5  represent the thickness of the border, you can change as you want. 

No.1

 

.site-header {
    border-top: 3px solid #cb23d8 !important;
}

 

 

No.2

 

.nav-bar {
    border-top: 2px solid #cb23d8 !important;
    border-bottom: 2px solid #cb23d8 !important;
}

 

 

No.3

 

.site-footer {
    border-top: 2px solid #cb23d8 !important;
}

 

 

No.4

 

.site-footer__copyright {
    border-top: 2px solid #cb23d8 !important;
    border-bottom: 2px solid #cb23d8 !important;
}

 

 

Good Luck!

 

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing
Muhammad_Ali_S
Shopify Partner
534 98 148

Like and accept the solution, if it works for you!
Thank you!

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing
tamiak
Explorer
66 0 28

You're a live saver! Thanks so much for your help. It is really appreciated

tamiak
Explorer
66 0 28

I also need to add a border before and after the product details on the checkout page.

Thanks once again .

Muhammad_Ali_S
Shopify Partner
534 98 148

You're always welcome.
Please share the screenshot where you wanted so I can send you the exact code.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing
tamiak
Explorer
66 0 28

IMG_3814.jpg

I want a border after shopping cart and another one after the price.

dmwwebartisan
Shopify Partner
10710 2339 3325

@tamiak 

Please provide your website URL. I will check and provide you code accordingly.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
tamiak
Explorer
66 0 28

Hi,

My website URL is animelights.myshooify.com and the password is rujeir

dmwwebartisan
Shopify Partner
10710 2339 3325

Shop URL not working.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
tamiak
Explorer
66 0 28

oh sorry. its animelightsca.myshopify.com

AlexEffron
Shopify Partner
2682 387 1047

@tamiak Please place this code at the end of theme.scss

@media only screen and (max-width: 749px) {
tr.cart__row td:nth-child(2) {
botder-top: 1px solid #cb23d8;
}
tr.cart__row td.cart__cell--quantity {
botder-bottom: 1px solid #cb23d8;
}
}
dmwwebartisan
Shopify Partner
10710 2339 3325

@tamiak 

Please add the following code at the bottom of your assets/theme.scss.liquid.

@media only screen and (max-width: 749px) {
.cart-table .cart__cell--total { border-bottom: 2px solid #cb23d8 !important;}
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →