Different Hero Image for Mobile vs. PC in Brooklyn Theme

Tourist
7 0 2

Hello!

I am desperate for help. I can't get a hero image that works on PC, Tablet, and Mobile to work on my Brooklyn theme site. How can I make it so that a different image shows up for Mobile vs. PC or tablet? I am not very knowledgable in website coding.

Thank you so much! This is the last thing that is holding me back for my launch.

Jon

1 Like
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Jon,

Britton here with the Shopify support team.

This is actually a little bit of a complicated change and will require you to edit two separate theme files. Ready? Here we go:

First, you need to edit the hero.liquid snippet in several places. Locate this block of code: 

{% capture slide %}hero_slide_{{ i }}_enable{% endcapture %}
      {% capture slide_img %}hero_slide_{{ i }}.jpg{% endcapture %}
      {% capture slide_text_color %}hero_slide_{{ i }}_text_color{% endcapture %}
      {% capture slide_heading %}hero_slide_{{ i }}_heading{% endcapture %}
      {% capture slide_subheading %}hero_slide_{{ i }}_subheading{% endcapture %}
      {% capture slide_cta %}hero_slide_{{ i }}_cta{% endcapture %}
      {% capture slide_link %}hero_slide_{{ i }}_link{% endcapture %}

and add in a new line to capture your mobile specific hero image to the bottom, like so:

{% capture slide %}hero_slide_{{ i }}_enable{% endcapture %}
      {% capture slide_img %}hero_slide_{{ i }}.jpg{% endcapture %}
      {% capture slide_text_color %}hero_slide_{{ i }}_text_color{% endcapture %}
      {% capture slide_heading %}hero_slide_{{ i }}_heading{% endcapture %}
      {% capture slide_subheading %}hero_slide_{{ i }}_subheading{% endcapture %}
      {% capture slide_cta %}hero_slide_{{ i }}_cta{% endcapture %}
      {% capture slide_link %}hero_slide_{{ i }}_link{% endcapture %}
      {% capture slide_img_mobile %}hero_slide_mobile_{{ i }}.jpg{% endcapture %}

Next, we need to make use of that new variable. Locate this section of code: 

<style>
              @media screen and (max-width: 1024px) and (max-height: 768px)  {
                .hero__image--{{ i }} {
                  background-image: url('{{ slide_img | asset_img_url: '1024x1024' }}');
                }
              }
              @media screen and (min-width: 1025px), screen and (min-height: 769px) {
                .hero__image--{{ i }} {
                  background-image: url('{{ slide_img | asset_img_url: '2048x2048' }}');
                }
              }
            </style>

and replace it with this:

<style>
              @media screen and (max-width: 1024px) and (min-width: 590px) (max-height: 768px)  {
                .hero__image--{{ i }} {
                  background-image: url('{{ slide_img | asset_img_url: '1024x1024' }}');
                }
              }
              @media screen and (min-width: 1025px), screen and (min-height: 769px) {
                .hero__image--{{ i }} {
                  background-image: url('{{ slide_img | asset_img_url: '2048x2048' }}');
                }
              }
              @media screen and (max-width: 598px) {
                .hero__image--{{ i }} {
                  background-image: url('{{ slide_img_mobile | asset_img_url }}');
                }
              }
            </style>

Keep in mind here that I have intentionally removed the image resizing parameters from your mobile hero image, so make sure the one you upload is the right size! Next, we will change the bit that affects your hero slider when the hero is not at full height for good measure. Find this piece of code:

<div class="hero__image">
              <img src="{{ slide_img | asset_img_url: '2048x2048' }}" alt="{{ settings[slide_heading] }}">
            </div>

and replace it with this:

<div class="hero__image">
              <img class="small--hide" src="{{ slide_img | asset_img_url: '2048x2048' }}" alt="{{ settings[slide_heading] }}">
              <img class="medium--hide large--hide" src="{{ slide_img_mobile | asset_img_url: '2048x2048' }}" alt="{{ settings[slide_heading] }}">
            </div>

That's all the heavy lifting required for hero.liquid. Now, we need to head on over to settings_schema.json. Locate this entire block of code:

{
    "name": "Home page - hero slideshow",
    "settings": [
      {
        "type": "paragraph",
        "content": "Turn the hero slideshow on and off from the home page section."
      },
      {
        "type": "checkbox",
        "id": "hero_home_auto",
        "label": "Auto rotate between slides"
      },
      {
        "type": "select",
        "id": "home_hero_auto_speed",
        "label": "Rotation interval",
        "options": [
          {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          }
        ]
      },
      {
        "type": "header",
        "content": "Slide 1"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_1_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_1.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_1_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_1_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 2"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_2_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_2.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_2_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_2_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 3"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_3_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_3.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_3_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_3_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 4"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_4_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_4.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_4_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_4_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 5"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_5_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_5.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "select",
        "id": "hero_slide_5_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_5_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_link",
        "label": "Link URL"
      }
    ]
  },

and replace it completely with this:

{
    "name": "Home page - hero slideshow",
    "settings": [
      {
        "type": "paragraph",
        "content": "Turn the hero slideshow on and off from the home page section."
      },
      {
        "type": "checkbox",
        "id": "hero_home_auto",
        "label": "Auto rotate between slides"
      },
      {
        "type": "select",
        "id": "home_hero_auto_speed",
        "label": "Rotation interval",
        "options": [
          {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          }
        ]
      },
      {
        "type": "header",
        "content": "Slide 1"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_1_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_1.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_1.jpg",
        "label": "Mobile Image",
      },
      {
        "type": "select",
        "id": "hero_slide_1_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_1_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 2"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_2_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_2.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_2.jpg",
        "label": "Mobile Image",
      },
      {
        "type": "select",
        "id": "hero_slide_2_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_2_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 3"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_3_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_3.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_3.jpg",
        "label": "Mobile Image",
      },
      {
        "type": "select",
        "id": "hero_slide_3_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_3_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 4"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_4_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_4.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_4.jpg",
        "label": "Mobile Image",
      },
      {
        "type": "select",
        "id": "hero_slide_4_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_4_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 5"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_5_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_5.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_5.jpg",
        "label": "Mobile Image",
      },
      {
        "type": "select",
        "id": "hero_slide_5_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_5_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_link",
        "label": "Link URL"
      }
    ]
  },

That should add the options to your theme customizer to add in your mobile specific slider images. Be careful with this customization though. Editing your settings_schema.json is not something that allows for older versions to be saved right in the theme editor. Make sure that you are backing up your theme by duplicating it before attempting these changes.

I hope that helps!

-Britton

Britton Shopify Guru
1 Like
Tourist
7 0 2

Britton,

Thank you so much for the reply. I am encountering an issue. On the second step where state the below code -- this doesn't actually show up in my hero snippet code. Is it somewhere else or is there something wrong with my code? Should I just copy in your replacement into the hero snippet?

Next, we need to make use of that new variable. Locate this section of code: 

<style>
              @media screen and (max-width: 1024px) and (max-height: 768px)  {
                .hero__image--{{ i }} {
                  background-image: url('{{ slide_img | asset_img_url: '1024x1024' }}');
                }
              }
              @media screen and (min-width: 1025px), screen and (min-height: 769px) {
                .hero__image--{{ i }} {
                  background-image: url('{{ slide_img | asset_img_url: '2048x2048' }}');
                }
              }
            </style>
0 Likes
Tourist
7 0 2

HI Briton,

So I downloaded a new version of Brooklyn and I see that line of Code is now there. However, when I get to the settings_schema.json section of your instructions and replace the large section of code you stated, I am getting the following error (it's a big one). Also, if I have to restart on a new copy of Brooklyn, is there a way to transfer over most of my settings? it feels a bit like starting from scratch! Thank you again for your help!!

 

This file contains the following errors:

  • Error: 399: unexpected token at '{ "type": "image", "id": "hero_slide_mobile_1.jpg", "label": "Mobile Image", }, { "type": "select", "id": "hero_slide_1_text_color", "label": "Text color", "options": [ { "value": "is-light", "label": "Light" }, { "value": "is-dark", "label": "Dark" } ] }, { "type": "text", "id": "hero_slide_1_subheading", "label": "Subheading text" }, { "type": "text", "id": "hero_slide_1_heading", "label": "Heading text" }, { "type": "text", "id": "hero_slide_1_cta", "label": "Button text" }, { "type": "text", "id": "hero_slide_1_link", "label": "Link URL" }, { "type": "header", "content": "Slide 2" }, { "type": "checkbox", "id": "hero_slide_2_enable", "label": "Enable" }, { "type": "image", "id": "hero_slide_2.jpg", "label": "Image", "info": "1200px wide required" }, { "type": "image", "id": "hero_slide_mobile_2.jpg", "label": "Mobile Image", }, { "type": "select", "id": "hero_slide_2_text_color", "label": "Text color", "options": [ { "value": "is-light", "label": "Light" }, { "value": "is-dark", "label": "Dark" } ] }, { "type": "text", "id": "hero_slide_2_subheading", "label": "Subheading text" }, { "type": "text", "id": "hero_slide_2_heading", "label": "Heading text" }, { "type": "text", "id": "hero_slide_2_cta", "label": "Button text" }, { "type": "text", "id": "hero_slide_2_link", "label": "Link URL" }, { "type": "header", "content": "Slide 3" }, { "type": "checkbox", "id": "hero_slide_3_enable", "label": "Enable" }, { "type": "image", "id": "hero_slide_3.jpg", "label": "Image", "info": "1200px wide required" }, { "type": "image", "id": "hero_slide_mobile_3.jpg", "label": "Mobile Image", }, { "type": "select", "id": "hero_slide_3_text_color", "label": "Text color", "options": [ { "value": "is-light", "label": "Light" }, { "value": "is-dark", "label": "Dark" } ] }, { "type": "text", "id": "hero_slide_3_subheading", "label": "Subheading text" }, { "type": "text", "id": "hero_slide_3_heading", "label": "Heading text" }, { "type": "text", "id": "hero_slide_3_cta", "label": "Button text" }, { "type": "text", "id": "hero_slide_3_link", "label": "Link URL" }, { "type": "header", "content": "Slide 4" }, { "type": "checkbox", "id": "hero_slide_4_enable", "label": "Enable" }, { "type": "image", "id": "hero_slide_4.jpg", "label": "Image", "info": "1200px wide required" }, { "type": "image", "id": "hero_slide_mobile_4.jpg", "label": "Mobile Image", }, { "type": "select", "id": "hero_slide_4_text_color", "label": "Text color", "options": [ { "value": "is-light", "label": "Light" }, { "value": "is-dark", "label": "Dark" } ] }, { "type": "text", "id": "hero_slide_4_subheading", "label": "Subheading text" }, { "type": "text", "id": "hero_slide_4_heading", "label": "Heading text" }, { "type": "text", "id": "hero_slide_4_cta", "label": "Button text" }, { "type": "text", "id": "hero_slide_4_link", "label": "Link URL" }, { "type": "header", "content": "Slide 5" }, { "type": "checkbox", "id": "hero_slide_5_enable", "label": "Enable" }, { "type": "image", "id": "hero_slide_5.jpg", "label": "Image", "info": "1200px wide required" }, { "type": "image", "id": "hero_slide_mobile_5.jpg", "label": "Mobile Image", }, { "type": "select", "id": "hero_slide_5_text_color", "label": "Text color", "options": [ { "value": "is-light", "label": "Light" }, { "value": "is-dark", "label": "Dark" } ] }, { "type": "text", "id": "hero_slide_5_subheading", "label": "Subheading text" }, { "type": "text", "id": "hero_slide_5_heading", "label": "Heading text" }, { "type": "text", "id": "hero_slide_5_cta", "label": "Button text" }, { "type": "text", "id": "hero_slide_5_link", "label": "Link URL" } ] }, { "name": "Home page - featured collections", "settings": [ { "type": "radio", "id": "home_featured_collections_sort", "label": "Choose collections", "options": [ { "value": "auto", "label": "Automatically (up to 9)" }, { "value": "manual", "label": "Manually:" } ] }, { "type": "collection", "id": "collection_1" }, { "type": "collection", "id": "collection_2" }, { "type": "collection", "id": "collection_3" }, { "type": "collection", "id": "collection_4" }, { "type": "collection", "id": "collection_5" }, { "type": "collection", "id": "collection_6" }, { "type": "collection", "id": "collection_7" }, { "type": "collection", "id": "collection_8" }, { "type": "collection", "id": "collection_9" } ] }, { "name": "Home page - featured products", "settings": [ { "type": "collection", "id": "home_featured_products", "label": "Choose collection" } ] }, { "name": "Home page - featured content", "settings": [ { "type": "page", "id": "home_page_content", "label": "Choose page" } ] }, { "name": "Product page", "settings": [ { "type": "checkbox", "id": "product_zoom_enable", "label": "Enable image zoom" } ] }, { "name": "Collection page", "settings": [ { "type": "select", "id": "collection_products_grid", "label": "Grid style", "options": [ { "value": "collage", "label": "Collage" }, { "value": "grid", "label": "Grid" } ] }, { "type": "checkbox", "id": "collection_tags_enable", "label": "Show collection tags" }, { "type": "checkbox", "id": "product_vendor_enable", "label": "Show product vendor" } ] }, { "name": "Cart page", "settings": [ { "type": "select", "id": "cart_type", "options": [ { "value": "page", "label": "Page" }, { "value": "drawer", "label": "Drawer" } ], "label": "Cart type" }, { "type": "checkbox", "id": "cart_notes_enable", "label": "Enable order notes" } ] }, { "name": "Newsletter", "settings": [ { "type": "checkbox", "id": "footer_newsletter_enable", "label": "Show newsletter sign-up" }, { "type": "text", "id": "newsletter_form_action", "label": "MailChimp form action URL", "info": "[Find your MailChimp form action URL](https:\/\/docs.shopify.com\/manual\/configuration\/store-customization\/communicating-with-customers\/accounts-and-newsletters\/get-a-mailchimp-form-action-url)." } ] }, { "name": "Social media", "settings": [ { "type": "header", "content": "Accounts" }, { "type": "text", "id": "social_facebook_link", "label": "Facebook", "info": "https:\/\/www.facebook.com\/shopify" }, { "type": "text", "id": "social_twitter_link", "label": "Twitter", "info": "https:\/\/twitter.com\/shopify" }, { "type": "text", "id": "social_pinterest_link", "label": "Pinterest", "info": "https:\/\/www.pinterest.com\/shopify" }, { "type": "text", "id": "social_instagram_link", "label": "Instagram", "info": "https:\/\/instagram.com\/shopify" }, { "type": "text", "id": "social_google_plus_link", "label": "Google Plus", "info": "https:\/\/plus.google.com\/+shopify" }, { "type": "text", "id": "social_tumblr_link", "label": "Tumblr", "info": "http:\/\/shopify.tumblr.com" }, { "type": "text", "id": "social_youtube_link", "label": "Youtube", "info": "https:\/\/www.youtube.com\/user\/shopify" }, { "type": "text", "id": "social_vimeo_link", "label": "Vimeo", "info": "https:\/\/vimeo.com\/shopify" }, { "type": "text", "id": "social_fancy_link", "label": "Fancy", "info": "http:\/\/fancy.com\/Shopify" }, { "type": "header", "content": "Sharing" }, { "type": "checkbox", "id": "social_sharing_products", "label": "Enable product sharing" }, { "type": "checkbox", "id": "social_sharing_blog", "label": "Enable blog post sharing" }, { "type": "checkbox", "id": "share_facebook", "label": "Share on Facebook" }, { "type": "checkbox", "id": "share_twitter", "label": "Tweet on Twitter" }, { "type": "checkbox", "id": "share_pinterest", "label": "Pin on Pinterest" }, { "type": "checkbox", "id": "share_fancy", "label": "Add to Fancy" }, { "type": "checkbox", "id": "share_google", "label": "+1 on Google Plus" } ] } ]'

Jon

1 Like
New Member
1 0 0

I too am getting this error and would love a solution!

Thank you, Britton!

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi again,

Are you deleting the entire settings_schema file and replacing it with my code? If so, that would for sure cause lots of errors. You just need to replace the section of settings_schema that I indicated with the new code. Replacing more than that will result in lots of required fields not existing.

Let me know if that's not it!

-Britton

Britton Shopify Guru
0 Likes
New Member
16 0 0

I tried to do the steps Britton laid out (thanks, very helpful) and got an error on the schema file

  • Error: Invalid JSON: unexpected token

Editing your settings_schema.json is not something that allows for older versions to be saved right in the theme editor.

I made a duplicate of my current theme and then made the changes. What am I missing? The hero.liquid file saved fine

0 Likes

@All. Fixed the error.

Kabir Seth summoned me by offering a premium beer 

Updated code.
  {
    "name": "Home page - hero slideshow",
    "settings": [
      {
        "type": "paragraph",
        "content": "Turn the hero slideshow on and off from the home page section."
      },
      {
        "type": "checkbox",
        "id": "hero_home_auto",
        "label": "Auto rotate between slides"
      },
      {
        "type": "select",
        "id": "home_hero_auto_speed",
        "label": "Rotation interval",
        "options": [
          {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          }
        ]
      },
      {
        "type": "header",
        "content": "Slide 1"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_1_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_1.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_1.jpg",
        "label": "Mobile Image"
      },
      {
        "type": "select",
        "id": "hero_slide_1_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_1_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_1_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 2"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_2_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_2.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_2.jpg",
        "label": "Mobile Image"
      },
      {
        "type": "select",
        "id": "hero_slide_2_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_2_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_2_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 3"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_3_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_3.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_3.jpg",
        "label": "Mobile Image"
      },
      {
        "type": "select",
        "id": "hero_slide_3_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_3_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_3_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 4"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_4_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_4.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_4.jpg",
        "label": "Mobile Image"
      },
      {
        "type": "select",
        "id": "hero_slide_4_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_4_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_4_link",
        "label": "Link URL"
      },
      {
        "type": "header",
        "content": "Slide 5"
      },
      {
        "type": "checkbox",
        "id": "hero_slide_5_enable",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "hero_slide_5.jpg",
        "label": "Image",
        "info": "1200px wide required"
      },
      {
        "type": "image",
        "id": "hero_slide_mobile_5.jpg",
        "label": "Mobile Image"
      },
      {
        "type": "select",
        "id": "hero_slide_5_text_color",
        "label": "Text color",
        "options": [
          {
            "value": "is-light",
            "label": "Light"
          },
          {
            "value": "is-dark",
            "label": "Dark"
          }
        ]
      },
      {
        "type": "text",
        "id": "hero_slide_5_subheading",
        "label": "Subheading text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_heading",
        "label": "Heading text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_cta",
        "label": "Button text"
      },
      {
        "type": "text",
        "id": "hero_slide_5_link",
        "label": "Link URL"
      }
    ]
  },

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
0 Likes
New Member
2 0 0

Hey, Britton! 

Thank you for this thorough response. Does this work for all of Shopify's themes? I'm currently using Label - with RO.

 

Thank you again!

0 Likes
Tourist
7 0 2

Hi all! I got the mobile slider as an option but on a mobile it's still focusing on the middle of the image and stretching out and coming out all crazy looking. Please help!! I've loaded a screen shot of how it's turning out. I should also add that I tried resizing the image to all sorts of sizes and nothing worked.

0 Likes