Solved

Impulse Theme: How to change background color on featured collection of my home page

onlybeyu
Excursionist
15 1 2

Hello! i want to change the background color of my featured collection to white on my home page. The rest of the page i want to keep black. Can someone show me how to do this? thank you! my website is www.onlybeyu.com

Screen Shot 2023-12-06 at 12.12.35 PM.png

 I want the white background of each product to lay on top of a white background just in the featured collection area.

example.png

 this is what i want it to look like. I also need the words to be black in this area only.

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6035 1449 1787

This is an accepted solution.

Hi @onlybeyu 

Check this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

div#shopify-section-template--17050546241749__featured-collection, .grid__image-ratio {
    background: white !important;
} 
.index-section {
    padding: 75px 0;
    margin: 0px !important;
}
.custom__item {
    margin-bottom: 0px !important;
}
div#shopify-section-template--17050546241749__featured-collection .text-link, a {
    color: black !important;
}

 

  • And save. 
  • Result:
  • Made4uoRibe_0-1701888925952.png
  • Made4uoRibe_1-1701888947202.png

     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 19 (19)

onlybeyu
Excursionist
15 1 2

Screen Shot 2023-12-06 at 12.12.35 PM.png

 I want to change the background color of the area where the products are. I want a white background so you cant see the white boxes of each product featured.

RJK90
Shopify Partner
14 2 3

Hi @onlybeyu,

You can add custom CSS for the Featured Collection section, navigate to Theme -> Customize -> Home page -> select Featured Collection section -> Custom CSS.

Select the section class and add the following CSS to set the background color to white to section class:

background-color: #ffffff;

This will give you a white background for the selected section.

onlybeyu
Excursionist
15 1 2

hello, thank you for the reply. I have updated my first question with images. If you could check it out that would be great!

RJK90
Shopify Partner
14 2 3

Hi @onlybeyu,

You can add the below CSS for make background as your requirement.

#shopify-section-template--17050546241749__featured-collection{
	background-color: #ffffff;
}
#shopify-section-template--17050546241749__featured-collection .grid__image-ratio{
	background-color: #ffffff !important;
}

 

onlybeyu
Excursionist
15 1 2

Screen Shot 2023-12-06 at 12.39.33 PM.png

 Its telling me to correct the errors before i can publish

RJK90
Shopify Partner
14 2 3

Try this.

#CollectionSection-template--17050546241749__featured-collection {
  background-color: #ffffff;
}
#CollectionSection-template--17050546241749__featured-collection
  .grid__image-ratio {
  background-color: #ffffff !important;
}
onlybeyu
Excursionist
15 1 2

Screen Shot 2023-12-06 at 12.29.52 PM.png

 It wouldnt let me add it

RJK90
Shopify Partner
14 2 3

Hi @onlybeyu,

Please check like this. See the screenshot. Check my last previous post for css.

RJK90_0-1701887983095.png

 



onlybeyu
Excursionist
15 1 2

Screen Shot 2023-12-06 at 12.43.03 PM.png

I fixed it again and it is still saying that it cant be published

RJK90
Shopify Partner
14 2 3

Hi @onlybeyu ,

Did you try this?

 

#CollectionSection-template--17050546241749__featured-collection {
  background-color: #ffffff;
}
#CollectionSection-template--17050546241749__featured-collection
  .grid__image-ratio {
  background-color: #ffffff !important;
}

 

 

 

onlybeyu
Excursionist
15 1 2

Screen Shot 2023-12-06 at 12.50.16 PM.png

 so the background code worked thank you. How do i change the product title words to black?

onlybeyu
Excursionist
15 1 2

Also How do I moved my images back leveled. Now it seems one is higher than the other and the prices are not aligned.

onlybeyu
Excursionist
15 1 2

ok the first code finally worked. I dont know why its acting weird. How do i get the words to be black just the words not the prices? thank you !!

RJK90
Shopify Partner
14 2 3

Hi @onlybeyu ,

You're most welcome! If the solution works for you, kindly consider liking and accepting it. This will help others find quality solutions more easily.

Made4uo-Ribe
Shopify Partner
6035 1449 1787

This is an accepted solution.

Hi @onlybeyu 

Check this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

div#shopify-section-template--17050546241749__featured-collection, .grid__image-ratio {
    background: white !important;
} 
.index-section {
    padding: 75px 0;
    margin: 0px !important;
}
.custom__item {
    margin-bottom: 0px !important;
}
div#shopify-section-template--17050546241749__featured-collection .text-link, a {
    color: black !important;
}

 

  • And save. 
  • Result:
  • Made4uoRibe_0-1701888925952.png
  • Made4uoRibe_1-1701888947202.png

     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


onlybeyu
Excursionist
15 1 2

this worked perfectly and i can edit the padding! thank you !!! xoxo

Made4uo-Ribe
Shopify Partner
6035 1449 1787

Welcome. Oh, I just change the margin into padding. And its the actual size of it. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


onlybeyu
Excursionist
15 1 2

Ok new issue lmao when changing the text to black it changed my header text black and the words inside click buttons on my slide shows black. How do i turn those parts back white ?

Screen Shot 2023-12-06 at 1.11.31 PM.png

onlybeyu
Excursionist
15 1 2

Can someone help me alter the header, the words inside my click boxes inside my slide shows, the menu tab words, and the header in the collections area color back to white (everything circled in red) ? I have attached the original code i was given and it was added to the bottom of my theme.css file

Screen Shot 2023-12-06 at 1.28.20 PM.png

Screen Shot 2023-12-06 at 1.11.31 PM.png

Screen Shot 2023-12-06 at 1.36.54 PM.png

Screen Shot 2023-12-06 at 1.46.18 PM.png

Screen Shot 2023-12-06 at 1.51.46 PM.png