A user seeks to add a custom background image to a specific Shopify collection page (“for-her”) using the Horizon theme, replacing the default black background.
Solutions Provided:
Conditional CSS in theme.liquid: Multiple responses suggest adding CSS code with conditional logic that checks if the current page matches the target collection. The code should target the collection by handle (“for-her”) or ID (317492527273).
Placement options:
<body> tag in theme.liquid<head> tagImplementation details: The CSS uses background-image, background-size: cover, and background-position: center to display the specified image URL.
Status: The discussion remains open with the original poster requesting clarification on exact code placement within the theme.liquid file. Contributors recommend backing up the theme before making edits due to potential breaking changes.
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_wrapped_in_sheer_flowing_fabric_lit_by_soft_red_and_violet_n_e9izjylg8wteym4hwg14_3.png?v=1748884583)
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!
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:
I hope this helps!
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-theme?srsltid=AfmBOopEntcw_ZUokNl3_FuEryMLnbaNmUkYtuhDsTMGgbq8mRF_8Q1x
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!
@pavelzhidkov , you’d need to find the opening tag and replace it. Make sure you save the previous version before editing/saving as there’s a chance something breaks.
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
{% if collection.id == 317492527273 %}
{% endif %}
