Shopify themes, liquid, logos, and UX
Hi there
I have tried to change my background images for each page in the STORY Theme.
First I have added the following code on theme.css
body.background-region { background-image: url("https://cdn.shopify.com/s/files/1/0609/2813/1331/files/Vineyward_with_Alistair_close_cut_3.jpg?v=163...");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}
body.background-making { background-image: url("https://cdn.shopify.com/s/files/1/0609/2813/1331/files/back_winemaking.jpg?v=1637456470");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}
Then I made the following changes in theme.liquid:
<body id="{{ page_title | handle }}" class="template-{{ template.name | handle }}
{% if page.handle == 'the-region' %}background-region{% endif %}
{% if page.handle == 'the-winemaking' %}background-making{% endif %}
{{ settings.decoration_style }} {{ settings.default_background }}" data-animations="{{ settings.animations_enable }}">
Unfortunately this does not work in the Story-theme anymore, but it worked in the Debut-Theme before.
Your help would be very appreciated.
Thanks in advance
Solved! Go to the solution
This is an accepted solution.
Hello LitExtension
Thanks for your reply and thank you so much, it works!
You saved my day
Greetings from
betbuech
You can try this :
<body id="{{ page_title | handle }}" class="template-{{ template.name | handle }}
{{ settings.decoration_style }} {{ settings.default_background }}" data-animations="{{ settings.animations_enable }}
{% if page.handle == 'the-region' %}background-region{% endif %}
{% if page.handle == 'the-winemaking' %}background-making{% endif %}">
Hello ChoosiZon
Thanks for your reply, but this does'nt work either!
Hi @betbuech,
Please add this code, it will work fine:
body.background-region .main-content,
body.background-region .palette--dark,
body.background-region .palette--light,
body.background-making .main-content,
body.background-making .palette--dark,
body.background-making .palette--light{
background-color: transparent !important;
}
Hope it helps!
This is an accepted solution.
Hello LitExtension
Thanks for your reply and thank you so much, it works!
You saved my day
Greetings from
betbuech
Hi @betbuech,
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
User | RANK |
---|---|
163 | |
146 | |
71 | |
67 | |
55 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023