FROM CACHE - en_header

Different Background for Different Product page

Solved
torgar
Tourist
4 0 0
‎08-11-2023 05:47 PM

As of now, I have two products, and I want each to have each own unique background. How do I proceed?

Page: notedot.no

Pass: lit

 

help2.PNG1

Help1.PNG2

 

 

Labels:
110 Views
0 Likes
Report
Accepted Solution (1)
PaulNewton
Shopify Partner
5931 537 1241
‎08-11-2023 06:49 PM

This is an accepted solution.

Use alternate templates and custom css settings

https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-t...

 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

 

Then in each products specific template find out the CSS selectors for either the entire pages background (the <body> tag) or the content area for the product.

body {
 background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");
}

or

 

#MainContent {
 background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");
}

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org


View solution in original post

87 Views
0 Likes
Report
Reply 1 (1)
PaulNewton
Shopify Partner
5931 537 1241
‎08-11-2023 06:49 PM

This is an accepted solution.

Use alternate templates and custom css settings

https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-t...

 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

 

Then in each products specific template find out the CSS selectors for either the entire pages background (the <body> tag) or the content area for the product.

body {
 background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");
}

or

 

#MainContent {
 background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");
}

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org


88 Views
0 Likes
Report
Community Browser

Community Blog Articles

cropped-SYSO-okt23-GROW.png
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...

On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...

By Arno Nov 27, 2023
cropped-shutterstock_offset_2207989361.jpg
Organize Your Products Like a Rainbow: Metafields and Color Sorting

You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...

By Skye Nov 8, 2023
Jasonh_0-1698862247798.png
Community Connect: October Recap

The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...

By Jasonh Nov 6, 2023
Terms of Service Privacy Policy