Re: Using a Photo as a Background Venture (Outdoors) Theme

Solved

Using a Photo as a Background Venture (Outdoors) Theme

ecoAV
Tourist
8 1 6

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/

Accepted Solution (1)
Sheesh_b
Shopify Partner
522 116 120

This is an accepted solution.

Hi @ecoAV 

First edit settings_schema.json under config and press enter after , as shown in the image

Sheesh_b_0-1639525513396.png

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.

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

View solution in original post

Replies 7 (7)

Sheesh_b
Shopify Partner
522 116 120

Hi @ecoAV 

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

Sheesh_b_0-1639519001715.png

 

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
ecoAV
Tourist
8 1 6

@Sheesh_b wrote:

Hi @ecoAV 

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

Sheesh_b_0-1639519001715.png

 


Hi @Sheesh_b

 

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
Shopify Partner
522 116 120

Hi @ecoAV 

I got this by editing some code on different files.

Check here:

Sheesh_b_0-1639520799610.png

 

Sheesh_b_1-1639520857005.png

 

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.

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
ecoAV
Tourist
8 1 6

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
Shopify Partner
522 116 120

This is an accepted solution.

Hi @ecoAV 

First edit settings_schema.json under config and press enter after , as shown in the image

Sheesh_b_0-1639525513396.png

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.

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
ecoAV
Tourist
8 1 6

Thank you so much, that worked perfectly!

merjorls3
Visitor
1 0 0

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.