Help with changing the background color of only one page. Debut theme.

Solved
Taniachz
Excursionist
13 0 6

Hi! I want to change the background of a page on the debut theme but can´t find where! I know where to change the whole site background but not for only one page. Thank you in advance!!

 

https://market.thewishlist.com.mx/pages/seller-profile password TWLcs

Accepted Solution (1)
ui-gab
Shopify Partner
211 13 47

This is an accepted solution.

Heya

.template-page.seller-profile

no space in between template-page and seller-profile

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.

View solution in original post

Replies 16 (16)
ui-gab
Shopify Partner
211 13 47

Heya,

 

Your link doesn't work.

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
Taniachz
Excursionist
13 0 6

It works when I click on it... maybe try this one? https://market.thewishlist.com.mx/ password TWLcs

 

Thanks!

ui-gab
Shopify Partner
211 13 47

Haha, it still doesn't work for me.

 

This site can’t be reached

market.thewishlist.com.mx’s server IP address could not be found.

 

Maybe give me your .myshopify url.

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
Taniachz
Excursionist
13 0 6

Ohhh... I have no idea why that is!!

 

Here is the Shopify URL. https://twl-market.myshopify.com/ hopefully it does work! I'm getting worried haha

Taniachz
Excursionist
13 0 6

What is going on! It doesn't seem to work now! I have NO idea what happened, would you be able to help me with that?

ui-gab
Shopify Partner
211 13 47

I just checked, and it looks like you fixed it.

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
ui-gab
Shopify Partner
211 13 47

Although it looks like I can't log in.

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
Taniachz
Excursionist
13 0 6

I was freaking out! It had something to do with the nameservers, but don't know much about it. Also had to change the password to TWLonline.

 

Thank you so much for your help and patience!

ui-gab
Shopify Partner
211 13 47

Hi,

 

I haven't done this before, but it shouldn't be too difficult. If you know a little bit of html and css.

 

  1. Go to your admin and customize your theme -> Edit Code
  2. Open up theme.liquid
  3. We want to add a class to identify the page based on the page handle or page reference.
    Look for: 
    <body class="template-{{ template | split: '.' | first }}
    Add {{ page.handle }} so it becomes
    <body class="template-{{ template | split: '.' | first }} {{ page.handle }}">
    Do not touch anything else and hit save.
  4. If you go back to your seller-profile page and inspect element you will see see that it has a new class attached to the body class. Like my screenshot will show 
    Annotation 2020-05-02 122924.png
  5. You can then use this to add css to change the background color for the entire page, or add a new background image.

 

Let me know if this is too complex, I can help you do this for free. Though, if you could help me out by installing my free app and just giving me some feedback, that would be wonderful too.

 

Cheers,

Gab

 

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
Taniachz
Excursionist
13 0 6

I couldn´t find the first line, just found this.

 

<body class="template-{{ request.page_type | handle }}"><div style="display:none;" id="af_hidepp_btn"><div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div></div>

ui-gab
Shopify Partner
211 13 47

Yup that's close enough so just add

 {{ page.handle }}

so that your code looks like:

<body class="template-{{ request.page_type | handle }} {{ page.handle }}">
ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
Taniachz
Excursionist
13 0 6

So... I added this at the end of the css but didn´t work...

 

.template-page .seller-profile {
background-color: #ffffff;
}

ui-gab
Shopify Partner
211 13 47

This is an accepted solution.

Heya

.template-page.seller-profile

no space in between template-page and seller-profile

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
Taniachz
Excursionist
13 0 6

Yes!! It worked! Thank you so much!

AnalyticCity
Tourist
8 0 1

Hey y'all. I am on the last step of this process but not sure where to implement this final line of code. In this theme.liquid file? New to the CSS stuff.

VioL
Visitor
1 0 0

Does anybody know how to change the background color on a single page for Parallax Theme?