How can I effectively change section colours on my homepage?

Store Design
1

Hi everyone,

I know this question has been answered before, but I have tried multiple solutions and they have not yet been successful for me.

I’m hoping to change the background of each section on my homepage to different colours (here is my website link: https://blum-organics.myshopify.com/)

  • I’d like to change the “Custom HTML” section (“discover our skin soothing…”) to HEX#F6C7A7
  • Under that, I’d like to change the “Collection list” section (“Shop our Ranges”) to HEX#E9D4C1
  • Under that, I’d like to change the “Featured Collection” section (“Our Aura Mists”) to HEX#B8834C
  • Under that, I’d like to change the “Featured Product” section (“Example product title”) to HEX#E9D4C1
  • Under that, I’d like to change the “Custom HTML” section (“5 images in a row…”) to HEX#F6C7A7
  • Under that, I’d like to change the "AllFetch Instagram Slider background (not sure if this is possible as it is in integrated app?) to HEX#E9D4C1

Is this all possible? If so, I would love a solution! Thank you so much :slightly_smiling_face:

2

@chloe27 unfortunately your store is password protected, so I wasn’t able to check each section.

But generally speaking, each section has its own ID. You can find it using your browser developer tool.

It should look something like the example beneath.

Therefore, you can use this to apply some styling via your CSS File (or .scss).

To apply the desired color, you’ll have to add the following styling to your css-file:
(Note that the used ID and HEX color is just an example)

/* place after the # the sections ID */

#shopify-section-1583888016417 {
 background-color:#F6C7A7!important;
}

You’ll have to repeat this for each section.

3

Ah! That worked perfect, thanks so much! :slightly_smiling_face: