I want to change the background color, text color, and logo image of just one specific page. The product is white so on that page I want everything to be the inverse of the rest of the store so the product is more visible (white on black instead of black on white). Is there a way to make these changes to the page without affecting the other pages? I’m using the color block theme btw… thanks!
1 Like
@lorem - can you please share this particular page link and password to view the page, if any?
hopefully this works link should be… https://loremclothing.com/collections/tees
and “Chester69” for the password thanks
1 Like
can you please share store url and page url
@lorem - this page do not have unique id or code to make changes for this specific page, so by coding need to add unique id to the page and then it can be done
i’m brand new to all this… how would I make a unique code for just that page?
@lorem - I can send collab request, if you accept it then I can do that
Hi @lorem ,
If you want to change the background and color of the product page. Just follow the instructions below.
- Go to Admin > Online store > Themes > Actions > Edit code
- Go to Layout folder, and open the theme.liquid file
- Find the code , then paste the code below.
{% if template == "product" %}
{% endif %}
yes like that but the white body should also be black
1 Like
yes thats right! and the rest of the pages would be white
1 Like
its possible but make sure this page full black and white combination is this fine?
@lorem - need little code tweak to add unique class or id to the page and then all this css can be applied
thanks for answering how do you do that?
@lorem - yes, actually I did that answer above
I can send collab request, if you accept it then I can do that
@lorem , do this to fix it in 20 seconds:
- In your Shopify Admin go to online store > themes > actions > edit code
- In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
- paste this code right above the tag:
window.ezfyCodeDotCom = window.ezfyCodeDotCom || {};
ezfyCodeDotCom = (function () {
function _addStyle(styleString) {
const style = document.createElement("style");
style.textContent = styleString;
document.head.append(style);
}
function changeColor() {
if (!/collections\/tees$/.test(window.location.href)){
return;
}
const backgroundColor = `#000000`
const textColor = `#ffffff`
_addStyle(`
body,
main,
main > *,
body > * > * > *,
.header-wrapper,
.announcement-bar,
footer,
footer *{
background: ${backgroundColor} !important;
border-color: ${backgroundColor} !important;
}
body *{
color: ${textColor} !important;
}
`)
}
return {
init: function () {
document.addEventListener("DOMContentLoaded", function () {
changeColor();
});
window.addEventListener("resize", function () {});
window.addEventListener("load", function () {});
window.addEventListener("scroll", function () {});
},
};
})();
ezfyCodeDotCom.init();
You can change the colors to your wish:
#000000 = background
#ffffff = text
If it helps you please click on the “like” button and mark this answer as a solution!
Thank you.
Kind regards,
Diego
Surprisingly, you can achieve this with just a little bit of code, using filter. I think I did a wrong page in my previous solution. This code will only works in the collection page.
- Go to Admin > Online store > Themes > Actions > Edit code
- Go to Layout folder, and open the theme.liquid file
- Find the code , then paste the code below.
{% if template == "collection" %}
{% endif %}
See the image here
this looks perfect but the code didn’t work I must be missing something