Making background different for each page (3rd party theme)

Solved

Making background different for each page (3rd party theme)

StafMeister
Excursionist
41 1 9

Hi,

 

I am using a 3rd party theme that isn't on Shopify theme store. Basically, this theme allows me to add animated backgrounds to the website (please see the image down below)

StafMeister_0-1737045138379.png

However, it only allows me to change the enter page's and password pages background separately. The rest of the pages (e.g catalog, contact etc.) should only be the same because it's called "website background". 

Is there any chance I can chance the background of the "vault" page seperately than the other pages? I really appreciate your help. 

Accepted Solution (1)
CodingFifty
Shopify Partner
613 97 116

This is an accepted solution.

Hi @StafMeister,

 

To change the background of the Vault page separately:

  1. Open Theme Editor: Go to Shopify Admin → Online Store → Themes → Actions → Edit Code.
  2. Vault Page Template: If there's no unique template, create page.vault.liquid.
    liquid
     
    {% layout 'theme' %} <div class="vault-page-background"> {% section 'page-content' %} </div>
  3. Add Custom CSS:
    • Open the Assets folder and edit your CSS file.
    css
     
    .vault-page-background { background: url('your-image-url.jpg') no-repeat center center; background-size: cover; }
  4. Save and Test: Open the Vault page to check the background.

If you can't create a unique template:

 

 
{% if template == 'page.vault' %} <style> body { background: url('your-image-url.jpg') no-repeat center center; background-size: cover; } </style> {% endif %}
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com

View solution in original post

Replies 4 (4)

suyash1
Shopify Partner
10569 1306 1674

@StafMeister - you will need to add unique id to this page and then using this id you can set background image as per your choice, code and css settings are needed

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
StafMeister
Excursionist
41 1 9

Can you tell me more please?

CodingFifty
Shopify Partner
613 97 116

This is an accepted solution.

Hi @StafMeister,

 

To change the background of the Vault page separately:

  1. Open Theme Editor: Go to Shopify Admin → Online Store → Themes → Actions → Edit Code.
  2. Vault Page Template: If there's no unique template, create page.vault.liquid.
    liquid
     
    {% layout 'theme' %} <div class="vault-page-background"> {% section 'page-content' %} </div>
  3. Add Custom CSS:
    • Open the Assets folder and edit your CSS file.
    css
     
    .vault-page-background { background: url('your-image-url.jpg') no-repeat center center; background-size: cover; }
  4. Save and Test: Open the Vault page to check the background.

If you can't create a unique template:

 

 
{% if template == 'page.vault' %} <style> body { background: url('your-image-url.jpg') no-repeat center center; background-size: cover; } </style> {% endif %}
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
suyash1
Shopify Partner
10569 1306 1674

@StafMeister please try the solution given by @CodingFifty , if you find it difficult then I can it for you in the morning. You can send me Collab code at email below, I can send request 

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.