Shopify themes, liquid, logos, and UX
I'd like to use the schema settings of a section to set a background image in CSS. I've created an image_picker in the schema, and am using an inline style to set the background image. How do If format the liquid code to add the image from the image_picker to the background-image style?
schema settings:
{
"type": "image_picker",
"id": "bg-image",
"label": "Custom Background Image"
},
inline css:
background-image:url('{{ section.settings.bg-image }}');
Above is what I was hoping would work (it didn't work). How can I get the background-image to populate with the image from the schema settings?
Would love to know this as well!
https://help.shopify.com/en/themes/development/sections#javascript-and-stylesheet-tags
You'll get answer here.. Just set background image in {% stylesheet %}
{% endstylesheet %} inside the schema
This code works in a css.liquid file, where 'settingID' is the unique ID of your setting type attribute.
background: url('{{ settings.settingID | img_url: 'master' }}');
#bg-image {
background-image:url('{{ section.settings.bg-image.src | img_url: 'master' }}');
background-size: cover;
}
if it doesn't work. Then Add inline-css..
background-image: url("//www.le-chanel.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244...");
i have added all of your code and try it one by one but background image is not being changed
Great Help!
Can you please point me out the structure of how this looks?
I gave my
<div class="page-width">
an id of bg-image
then, I did this in the schema:
{
"type": "image_picker",
"id": "bg-image",
"label": "Custom Background Image"
},
and, in the style area:
{% stylesheet %}
#bg-image {
background-image:url('{{ section.settings.bg-image.src | img_url: 'master' }}');
background-size: cover;
}
{% endstylesheet %}
This doesn't quite display the background image, though. It gives me in the css, looking at it with Chrome dev tools:
background-image: url("{{ section.settings.bg-image.src | img_url: "master" }}")
And this is crossed off with a strikethrough, as being invalid.
So where do you add the style? What am I doing wrong?
Thanks!
Answering my own issue, figured it out!
Instead of putting the style in the {% stylesheet %} tag, I put it into <style> tags. This worked.
I would've liked for it to go straight on my css style sheet, but that just didn't work. Don't know why.
you can use inline style like so :
Solved my problem! thank you
hello @Raghav2
You can add code by following these steps to change ATC background color
1. Go to Online Store -> Theme -> Edit code.
2. Open your liquid file
3. Your schema setting is right but for inline CSS you have to change code to below code
style="background-image:url('{{ section.settings.bg-image | img_url: ''}}')"
4. Add CSS
#bg-image{
background-repeat: no-repeat;
height: 500px;
background-position: center;
background-size: cover;
width: 100%;
}
Note: Adjust height according to you.
5. By default the empty div show display none, if your image not showing, so you have to add one more css that is below
#bg-image{
display:block !important;
}
background-image: url("//www.le-chanel.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244...");
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024