Changing Color of a Custom Section

Solved

Changing Color of a Custom Section

jayzor74
Tourist
8 0 1

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?

 

asdasdqerg.png

Accepted Solution (1)
WizzCommerce_Co
Excursionist
50 8 11

This is an 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:

Ảnh chụp Màn hình 2024-07-01 lúc 11.22.26.png

 

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

Check here Wizzcommerce App to optimize your store: SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts | Wizz Flash Sale & Price Edit | BOGO+ | Buy X Get Y Free Gift
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!

View solution in original post

Replies 6 (6)

WizzCommerce_Co
Excursionist
50 8 11

Hi @jayzor74, thank you for posting here!

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

Check here Wizzcommerce App to optimize your store: SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts | Wizz Flash Sale & Price Edit | BOGO+ | Buy X Get Y Free Gift
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!
jayzor74
Tourist
8 0 1

Thanks for the reply. Domain is vaultgoods.biz

WizzCommerce_Co
Excursionist
50 8 11

This is an 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:

Ảnh chụp Màn hình 2024-07-01 lúc 11.22.26.png

 

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

Check here Wizzcommerce App to optimize your store: SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts | Wizz Flash Sale & Price Edit | BOGO+ | Buy X Get Y Free Gift
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!
jayzor74
Tourist
8 0 1

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?

image.png

 

 

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

image.png

WizzCommerce_Co
Excursionist
50 8 11

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

WizzCommerce_Co_0-1719815002923.jpeg

 

Result 2: With background section

WizzCommerce_Co_1-1719815089508.jpeg

 

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

Check here Wizzcommerce App to optimize your store: SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts | Wizz Flash Sale & Price Edit | BOGO+ | Buy X Get Y Free Gift
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!
jayzor74
Tourist
8 0 1

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