How to change the background color of a collection on Dawn theme

Store Design
, , ,
1

Hello!

I would like to know how to change the background color of the featured collection ‘’ Flore Bella x Tite pousse’’ on the homepage so it stands out more. I keep trying different codes based on replies i’ve seen here, but it’s not working for me. Anyone could help?

https://boutiqueflorebella.com

Thank you so much!

Abelle

2

Hi @abellet ,

I’m so glad to support you today :grin: .

To can change the collection ‘‘Flore Bella x Tite pousse’’ background, you can check out my suggestion below to make it:

  1. Go to Edit code on Online Store

GemPages_1-1669398501228.png
GemPages_1-1669398501228.png400×200 24.5 KB

  1. Add this code above the tag on the file Theme.liquid:

GemPages_2-1669398544210.png
GemPages_2-1669398544210.png1540×864 80.3 KB

*Note: you can replace #f9ebe1 color to another color you want.

Kind & Best regards,

GemPages Support Team.

3

I hope you find the answer helpful. If you need further support, do not hesitate to reach out to us.

4

Yeah! Thank you so much, it’s working for the color, but it makes the padding between the other sections a bit off, like the background color stops too close from the bottom and the top of the section. Can we add something to the code to make it work better?

Thanks again!

5

Here’s a code snippet that’ll work:

{% style %}
section#shopify-section-template--15172215079066__602c2d1f-24b7-4fed-811f-6d2f957cb6cb {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #1f6dbb;
}
{% endstyle %}

Insert that into your theme.liquid file (online store > themes > click ‘…’ on the theme you want, then ‘edit code’). Insert it at the bottom of the file, right before the ‘’ tag.

You can adjust ‘padding-top’ and ‘padding-bottom’ in the code to increase and decrease the spacing. Insert the color code you would like to use after the ‘#’ .

Alternatively, you can also use the app Easy Edits to make the edit yourself without touching any code, changing the background color and padding. You can make the edit and delete the app without paying for anything, and keep the edits.

6

Hello @abellet ,

I can see the section of your website has displayed very well.

Do you need any more help from me?

Best regards,
GemPages Support Team