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
Highlighted
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
Highlighted
Shopify Expert
3899 559 935

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.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
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
3899 559 935

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.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
10 0 0

I love the above code - it changes the background color and font type to a specific collection template. 

However, PLEASE PLEASE can you help tell me how to include font color in that code?!?!

Thank you!

0 Likes
Highlighted
Shopify Expert
3899 559 935

add bellow css for font color:

body{color:red;}

But it will not work on all element, you have to give color to each selector on page.  

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