How do I add a border to my store page

[tamiak]

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 !

[khilan]

hey , @tamiak 

i can solve this your problem .

please share your web site url and password .

thank you so much .

khilan

[Muhammad_Ali_S]

Like this??

[Muhammad_Ali_S · 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.

[tamiak]

Hi khilan,

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

Thanks

[tamiak]

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]

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]

And maybe a border that separates all sections on my homepage 

[Muhammad_Ali_S · 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!

[Muhammad_Ali_S]

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

[tamiak]

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

[tamiak]

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

Thanks once again .

[Muhammad_Ali_S]

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

[tamiak]

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

[dmwwebartisan]

@tamiak 

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

Thanks!

[tamiak]

Hi,

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

[dmwwebartisan]

Shop URL not working.

[tamiak]

oh sorry. its animelightsca.myshopify.com

[AlexEffron]

@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]

@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!