Individual Page Background Image in Narrative Theme

Solved
Highlighted
New Member
9 0 0

I am trying to add background images to individual pages using the Narrative theme and I haven't been able to figure it out from reading other forums. Can someone help with this? Thanks!

0 Likes
Highlighted
Shopify Partner
1435 194 488

Your pages should have a unique body class which is the handle of the page. So you can specifically target that body class for your background images.

 

So if you wanted to add a unique background image to a page called "Contact Us", you could put in the page.liquid:

 

{% if page.handle == "contact-us" %}
<style>
body.contact-us{
background-image: url('link-to-your-image.jpg");
}
</style>
{% endif %}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
9 0 0

Does the image need to be stored at a URL?

0 Likes
Highlighted
Shopify Partner
1435 194 488

Yes you can upload it to the CDN or as an asset and use an asset_url in liquid. I prefer using the CDN. In your Shopify Admin go to the bottom left where it says "Settings" with the gear symbol, click that and it will bring you to a new page. You'll want to click on "Files" with a paperclip symbol. You can upload your images there.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
9 0 0

I uploaded the photo and added the following to page.liquid and it didn't seem to work. Am I missing something?

 

{% if page.handle == "Facility" %}
<style>
body.Facility{
background-image: url('https://cdn.shopify.com/s/files/1/0045/4921/4298/files/Facility_Background.png?176");
}
</style>
{% endif %}
0 Likes
Highlighted
Shopify Partner
1435 194 488

All handles in shopify are lowercase, that could be the issue. To check the handle, above your if statement you can echo out the page handle by putting this:

 

{{ page.handle }}

Then check your page and look and see what is written on the page.  Also, you can put something inside your if statement to make sure if it is evaluating as true, something you'll be able to find easy. I usually just type a string of like 10 letters "aaaaaaaaaa" or something to be sure it's entering into the if statement first before I try to figure out what else might not be working. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
9 0 0

When I echo out the page handle, it shows up on that page, but still no background image - could it be something in the URL?

Screen Shot 2019-03-20 at 12.10.31 PM.png

 

This is my code in page.liquid now:

 

{{page.handle}}
{% if page.handle == "facility" %}
<style>
body.facility{
background-image: url('https://cdn.shopify.com/s/files/1/0045/4921/4298/files/Facility_Background.png");
}
</style>
{% endif %}
0 Likes
Highlighted
Shopify Partner
1435 194 488

It could be how you're targeting the body class. From what I can tell you're just going based off of the code I provided you, which may not be exactly right for your case. Right click and inspect your page and find the body tag and see what it's class name is, if it has one, or if it has an id. Or if you post a link to your page and a password if it's password protected I can check it out.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
9 0 0

Here's the the body tag:

 

Screen Shot 2019-03-20 at 12.25.21 PM.png

 

How would I target that?

0 Likes
Highlighted
Shopify Partner
1435 194 488
{% if page.handle == "facility" %}
<style>
body#strength-amp-conditioning-and-powerlifting-facility{
background-image: url('https://cdn.shopify.com/s/files/1/0045/4921/4298/files/Facility_Background.png");
}
</style>
{% endif %}

With id's you use a hash instead of a period.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes