How can I use custom CSS to change Shopify page backgrounds?

[TheSalmon]

Hi, I’m wondering if anyone is able to weigh in with some info. I am trying to get page ID’s for Shopify home and shop page, so I can change the background image of each of these pages individualy like I have with other pages that I was able to use the handle (about, specific products etc)

I’ve found some info in different places trying to achieve similar ends. But I’m wondering if anyone can comprehensively outline in laid man’s terms, what code I should paste, where exactly I should paste it, in a step by step format.

i don’t unfortunately know anything about CSS unfortunately, but I’ve been lead to believe I can use it somehow get a unique ID for my if request to pick up and apply a background for…

Thankyou so much in advance!

[PrivateTimes]

To change the background image of specific pages on your Shopify store, you can use CSS code targeting the page IDs. Here's a step-by-step guide on how to achieve this:

1. Locate the Page IDs:

   • In your Shopify admin dashboard, go to Online Store > Pages.
   • Find the page for which you want to change the background image (e.g., Home page, Shop page).
   • Note down the URL of each page. The last part of the URL after "/pages/" is the page handle, which you can use to target the page in your CSS.

2. Add CSS Code:

   • Go to your Shopify admin dashboard and navigate to Online Store > Themes.
   • Click on "Actions" next to your active theme and select "Edit code."
   • In the code editor, locate the "theme.liquid" file under the "Layout" section.
   • Add the attached CSS code at the bottom of the "theme.liquid" file:
   

    

   Replace 'YOUR_IMAGE_URL' with the URL of the background image you want to use for each page. You can upload the image to Shopify and get its URL from the "Files" section in the theme editor.

3. Save Changes:

   • After adding the CSS code, click on the "Save" button to save your changes.

4. Preview and Test:

   • Preview your store to see if the background images are applied correctly to the Home and Shop pages.
   • If the background images are not displaying as expected, double-check the page IDs (or handles) and the CSS code for any typos or errors.

Hope it helps. 🙂