Using a Photo as a Background Venture (Outdoors) Theme

[ecoAV]

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!

https://ecoav.shop/

[Sheesh_b]

Hi @ecoAV 

Are you talking about a background image instead of white background like I changed the background color to red?

[ecoAV]

---

@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. 

[Sheesh_b]

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.

[ecoAV]

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!

[Sheesh_b · 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.

[ecoAV]

Thank you so much, that worked perfectly!

[merjorls3]

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.