Changing Color of a Custom Section

[jayzor74]

Hello,

I'm new to Shopify. So I created a custom product tab page for the homepage using what I can find online.

I was successful, but need help changing the color or maybe make it inherit the theme's color schemes?

I tried setting background color in custom css of the section but the product images disappeared. Can someone help me pls?

[WizzCommerce_Co]

Hi @jayzor74, thank you for posting here!

Can you share me your store's URL, so I can fix your problem faster?

[jayzor74]

Thanks for the reply. Domain is vaultgoods.biz

[WizzCommerce_Co · Accepted solution]

Hi @jayzor74 , thank you for posting here!

You can do that by adding CSS code below to Custom CSS of that section in theme's customize:

.product-grid {
  background: lightblue !important;
}

You can see example here:

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

[jayzor74]

Thank you. That worked but doesn't look good.

Is there a way to color the products instead of the background? Maybe to make it looks something like this?

I'm actually trying to replicate this section from this site allbirds.com

[WizzCommerce_Co]

Hi @jayzor74, thank you for reply!

You can follow my another instruction below:

1. Go to Online Store->Theme->Edit code

2. Asset->/base.css->paste below code at the bottom of the file:

.card--card {
      background: "#f6f6f6"
}
.card__media .media img {
       padding-inline: 2rem !important;
       padding-top: 2rem !important;
}
.card__content {
       padding: 2rem !important;
}
.card__information {
      padding: unset !important;
}

This is the 2 results you can see for your store when adding the code:

Result 1: With no background section

Result 2: With background section

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

[jayzor74]

Thanks. Unfortunately adding the code in base.css didn't do anything. Appreciate the help though.