How do I change background of a specific collection and product?

Solved
Highlighted
Tourist
8 0 0

Hello,

 

How do I change the background color of a specific collection and product page? It is white by default with minimal fashion design. So I want for just one specific collection (e.g: ..collections/toys/products/cars) and all its products in it, a black background. 

0 Likes
Highlighted

Hello ,

Please share your site url so that I will give you exact solution

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
Tourist
8 0 0

empty link

0 Likes
Highlighted

Hello,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.template-collection,.template-product {
	background: #000;
}

If you want it in specific collection then inspect that page then Check "id" in body tag and put css by using that id..As shown in below screenshots

2019-12-04_20-37.jpg

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
1 Like
Highlighted
Shopify Expert
3449 541 813

This is an accepted solution.

Hi @IsaacSterkling 

Add following code in Layout->theme.liquid file just before </body>

 

 <style>
    {% if collection %}
    	{% if collection.handle =='premium-real-dolls' %}
    		body{background: red;}
    	{%endif%}
    {%endif%}
  </style>

Note: here it will work for "premium-real-dolls" collection so if you want to change then change this handle of collection.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
New Member
2 0 0

Hi I managed to change the background to black following this method above, but now wondering how to change the font for this particular collection to white.

0 Likes
Highlighted
New Member
2 0 0

also now its affected the product page. how can i make the product back not have a black background. 

0 Likes
Highlighted
Shopify Expert
3449 541 813

If you add this code then it only affect on collection page not product page

 

add this css for font and background color  

 <style>
    {% if collection %}
    	{% if collection.handle =='collection_handle' %}                        		
body
{background: red;font-family: cursive;} {%endif%} {%endif%} </style>

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes