Shopify themes, liquid, logos, and UX
Hello everyone, I've been having trouble setting an image as my default Shopify background. I've read quite a few other similar posts and tried their methods, but have seen no changes on my site. From my understanding the change should be pretty instantaneous upon saving. I'm using the Venture Theme, Outdoors subcategory. I'm also curious if some of the similar, previous posts I've read have become outdated due to platform updates. Or maybe this problem is specific to my situation. Does anyone have advice?
Starting out I'm happy to set the default background across the entire site, however any recommendations on applying it to a specific page is welcome too. Thanks!
Solved! Go to the solution
This is an accepted solution.
Hi @ecoAV
First edit settings_schema.json under config and press enter after , as shown in the image
then paste the below code
{
"name": "Background Image",
"settings": [
{
"type": "header",
"content": "Background Image"
},
{
"type": "paragraph",
"content": "To set a background image to your whole website, tick the box below and upload the image"
},
{
"type": "checkbox",
"id": "enable-bg-image",
"label": "Enable to use image as background",
"default": false
},
{
"type": "image_picker",
"id": "add-bg-image",
"label": "Upload Background Image"
}
]
},
Then, save the file.
Now, under Layout edit theme.liquid
Find the line with class page-container on line 102( it may be different on your end, I'm using fresh theme)
and replace the whole line with below
<div class="page-container page-element is-moved-by-drawer" style="{% if settings.enable-bg-image %} background-image: url({{ settings.add-bg-image | img_url: '' }});background-size: cover; {% endif %} ">
Now, save this and customize your theme. You'll find the add background image option under Theme Settings.
Any questions click the email link below my every answer to reach me directly.
Hi @ecoAV
Are you talking about a background image instead of white background like I changed the background color to red?
@Sheesh_b wrote:Hi @ecoAV
Are you talking about a background image instead of white background like I changed the background color to red?
Hi @Sheesh_bv
Yes! I am hoping to turn my background into an image instead of a color, for example the entire area on your screenshot that is red. I understand some themes have this option as a default, but unfortunately the Venture Theme does not.
Hi @ecoAV
I got this by editing some code on different files.
Check here:
Now, if you're not familiar with changing code on theme files, I request you to allow me to edit the code on your theme.
Hi @Sheesh_b
Interesting, I don't have that option by default. I can easily copy & paste changes in specific areas of the code itself, but I do not how to troubleshoot these kinds of issues on my own.
I'm happy to follow any instructions you share on this thread, or talk further in direct messaging if you feel that would be more appropriate. Appreciate your responses!
This is an accepted solution.
Hi @ecoAV
First edit settings_schema.json under config and press enter after , as shown in the image
then paste the below code
{
"name": "Background Image",
"settings": [
{
"type": "header",
"content": "Background Image"
},
{
"type": "paragraph",
"content": "To set a background image to your whole website, tick the box below and upload the image"
},
{
"type": "checkbox",
"id": "enable-bg-image",
"label": "Enable to use image as background",
"default": false
},
{
"type": "image_picker",
"id": "add-bg-image",
"label": "Upload Background Image"
}
]
},
Then, save the file.
Now, under Layout edit theme.liquid
Find the line with class page-container on line 102( it may be different on your end, I'm using fresh theme)
and replace the whole line with below
<div class="page-container page-element is-moved-by-drawer" style="{% if settings.enable-bg-image %} background-image: url({{ settings.add-bg-image | img_url: '' }});background-size: cover; {% endif %} ">
Now, save this and customize your theme. You'll find the add background image option under Theme Settings.
Any questions click the email link below my every answer to reach me directly.
Thank you so much, that worked perfectly!
Almost equal problem for me: The shopify returned-stop would not load in part, but it does in chrome (mysite.Myshopify.Com/admin) . My subject matter is "Impusle" for my blog.
We 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, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024