Change product/collection background colour (VENTURE THEME)

Highlighted
New Member
9 0 0

Hi,

 

I'm trying to change my product collection/grid background to white in Venture theme. I changed the product pages background to white by adding:

 

.template-collection .page-container {
    background-color: #fff;
}

into theme.scss.css

 

What code do I need to add/change to change the background colour of my product grids? The overall content background for my theme is Black. 

 

Screen Shot 2020-11-17 at 21.45.24.png

0 Likes
Highlighted

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
9 0 0

Hi,

 

it is not live yet, I can share a preview link?

0 Likes
Highlighted
Highlighted

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.product-card {
    background-color: white;
    border-color: white;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
9 0 0

Thank you! that worked. 

 

Do you have the code that will also change the product description and price font black? and the page heading font? So they can be seen on the white background. 

Screen Shot 2020-11-19 at 08.49.52.png

0 Likes
Highlighted

Add this css

.product-card__name {
    color: black;
}
.product-card__availability {
    color: black;
}
.product-card__info {
    background-color: white;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
9 0 0

Thank you!

 

Lastly, the page title font is white so it can't be seen now that the page background is also white.

 

How can I change the page title font on the product pages only, to be black? 

0 Likes
Highlighted

Add this css

.template-collection h1.section-header__title {
    color: black;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
9 0 0

What CSS would I need to add to centrally align the header on the product pages? I added some CSS which centrally aligned all the headers, but after adding the last CSS you suggested, the product headers have moved to the left. 

 

This it the current CSS:

Screen Shot 2020-11-20 at 10.29.57.png

 

Screen Shot 2020-11-20 at 10.30.16.png

 

 

0 Likes