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

Store Design
1

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

2

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

body#the-ice-cream-bar.template-index {
background-image: url(https://cdn.shopify.com/s/files/1/0580/4346/5922/products/2324244339_1080x.jpg);
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
SWSolutions_0-1626152727642.png1537×562 49.7 KB

1 Like
3

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

4

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;
    }
1 Like
5

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;
}

1 Like
6

@KuldeepKumar20 @LitExtension Many many many thanks!!