Brooklyn theme: how do I add background image on homepage only

Solved
AndrewH94
Tourist
8 0 2

Hi all, would greatly appreciate some help on this:

1. How can I add a background image on homepage only?
2. How can I change the background colour (to white) for View Cart page only

For Brooklyn theme: https://the-ice-cream-bar-malaysia.myshopify.com
Password: andrew

Thanks so much

0 Likes
SWSolutions
Trailblazer
199 27 49

This is an accepted solution.

For home page background add bellow CSS code in your theme CSS file-

body#the-ice-cream-bar.template-index {
    background-repeat: no-repeat;
    background-size: 100% 100%;

 

If you changed to white background of cart page the all the white text will not showing of cart page see the image, so I think no need to change background color of cart page.

SWSolutions_0-1626152727642.png

 

 

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
AndrewH94
Tourist
8 0 2

Hi SWSolutions, thanks so much for the help with the background image. Works like a charm.

For no. 2 actually wanted to ask how I could change only for the Cart page: the background to white and text to black. I.e. inverted from the rest of of the store

Thanks a lot

0 Likes
LitExtension
Shopify Partner
1210 155 216

This is an accepted solution.

Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.template-cart .page-container{
background: #fff;
}

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
SWSolutions
Trailblazer
199 27 49

This is an accepted solution.

Hi,

For Cart Page-

Add bellow CSS in your theme CSS file-

/* CSS for cart page  */

body#your-shopping-cart {
background: #fff;
}

body#your-shopping-cart .grid__item.large--two-fifths.push--large--three-fifths, body#your-shopping-cart header.section-header.text-center h1, body#your-shopping-cart .cart__row, body#your-shopping-cart .cart__row a {
color: #000 !important;
}

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
AndrewH94
Tourist
8 0 2

@SWSolutions @LitExtension Many many many thanks!!

0 Likes