Re: Set up background image for specific collection page

pavelzhidkov · ‎06-07-2025

Hi community,

Could you please advice what code (and where) should I place?

I want this picture (https://cdn.shopify.com/s/files/1/0710/6301/1497/files/artistic_fashion_silhouette_of_a_woman_wrappe...)

to be a background image (instead of black default backgroung which comes from theme Horizon) of this collection page https://vibe-and-feeling.com/collections/for-her

Thank you in advance!

Betterave-Nina · ‎06-07-2025

Hi @pavelzhidkov. Welcome to the Shopify Community!

You'd need to add the conditional logic to the theme.liquid that adds the background in case the collection name matches.

It should be similar to this:

<body
  class="page-width-{{ settings.page_width }} card-hover-effect-{{ settings.card_hover_effect }}"
  {% if collection and collection.handle == 'for-her' %}
    style="background-image: url('https://cdn.shopify.com/s/files/1/0710/6301/1497/files/artistic_fashion_silhouette_of_a_woman_wrapped_in_sheer_flowing_fabric_lit_by_soft_red_and_violet_n_e9izjylg8wteym4hwg14_3.png?v=1748884583'); background-size: cover; background-position: center; background-repeat: no-repeat;"
  {% endif %}
>

I hope this helps!

➡➡ Easy Embed Code ⬅⬅ insert CSS/JS/HTML/Liquid code into any store page

Speed Booster App - Improve your store speed in 3 clicks
Need professional help with your Shopify store? DM me, let's talk!
Geeky notes

pavelzhidkov · ‎06-08-2025

Hi @Betterave-Nina !

could you please clarify in what part of theme.liquid file should I put it?

In the beginning or in the end? Before or after what code part?

thank you in advance!

Betterave-Nina · ‎06-08-2025

@pavelzhidkov, you'd need to find the opening <body> tag and replace it. Make sure you save the previous version before editing/saving as there's a chance something breaks.

➡➡ Easy Embed Code ⬅⬅ insert CSS/JS/HTML/Liquid code into any store page

Speed Booster App - Improve your store speed in 3 clicks
Need professional help with your Shopify store? DM me, let's talk!
Geeky notes

Bundler-Manuel · ‎06-07-2025

Hey there @pavelzhidkov Just follow all the steps in this article here including the code and where to paste it like you requested https://ezfycode.com/blogs/shopify-tutorials/how-to-add-a-custom-background-image-to-any-shopify-the...

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.

Dan-From-Ryviu · ‎06-10-2025

Hi @pavelzhidkov

Please go to your store admin > Sales channels > Online Store > Themes > click "..." in Current theme > Edit code > open theme.liquid file, add this code after <head>

{% if collection.id == 317492527273 %}
<style>
#MainContent {
    background-image: url(https://cdn.shopify.com/s/files/1/0710/6301/1497/files/artistic_fashion_silhouette_of_a_woman_wrapped_in_sheer_flowing_fabric_lit_by_soft_red_and_violet_n_e9izjylg8wteym4hwg14_3.png?v=1748884583);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
</style>
{% endif %}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.