Howto add the Slick Slider to Shopify on the Home Page.

So, you’re probably here because you want to implement the slick slider on your Shopify site without using an expensive app, or, enabling it sitewide.

This quick tutorial will get you started with enabling the slick slider on your theme, on just one page (in this case, the home page). We’re only going to load the libraries required, if required, which will keep the other pages nice and fast.

First I would create a backup of your Shopify theme, and then work on it. This way you have a backup should you fuck things up.

**** Note** – this slider is setup for 150x80 size images. You’re pretty much for sure going to have to edit the CSS anyway, but at the bare minimum you’ll have to change those dimensions if you want different image sizes. We’re using this as a vendor/brand slider so this size is perfect.

First you’re going to want to go here, and download the latest copy of the Slick library.

http://kenwheeler.github.io/slick/

Now extract the files somewhere.
Now login to your Shopify Store.
Go to Online Store -> Themes -> Edit HTML/CSS
Now you will want to scroll down to Assets.

Click Upload Asset and find your extract files, and upload these one at a time.

 slick.min.js
 slick.css
 slick-theme.css 
 fonts/slick.woff
 fonts/slick.ttf
 fonts/slick.svg
 fonts/slick.eot

Modify slick-theme.css and change the font path (remove ./font/)

 src: url('./fonts/slick.eot');

 Now becomes

 src: url('./slick.eot');

Open up theme.liquid and in the header section (between <head> and </head>) paste the following code

 {% if template == 'index' %}
 {% if settings.home_vendor_carousel_enable %} 
 {{ 'slick.css' | asset_url | stylesheet_tag }}
 {{ 'slick-theme.css' | asset_url | stylesheet_tag }}
 {% endif %}
 {% endif %}

Now scroll down to the bottom, and right before the closing body (</body>) paste the following code

 {% if template == 'index' %}
 {% if settings.home_vendor_carousel_enable %} 
 <!-- <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
 {{ 'slick.min.js' | asset_url | script_tag }}
  <script type="text/javascript">
  $(document).ready(function() {
  $('.autoplay').slick({
  dots: false,
  infinite: true,
  speed: 500,
  slidesToShow: 5,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  arrows: false,
  variableWidth: true
  });
  });
  </script>
 {% endif %}
 {% endif %}

** NOTE – we have the jquery, and jquery migrate library commented out because our theme already has it. If yours does not, you will need to uncomment the two two lines.

Now, scroll up to where you want your slider and paste this code

{% if settings.home_vendor_carousel_enable %}
<center><h2>{{ settings.home_vendor_carousel_title }}</h2></center>
<div class="slider-container">
 <div class="slider autoplay slider-custom">
 {% for i in (1..12) %}
 {% capture vendor %}home_vendor_enable_{{i}}{% endcapture %}
 {% capture vendor_name %}home_vendor_name_{{i}}{% endcapture %}
 {% capture vendor_logo %}vendor_logo_{{i}}.png{% endcapture %}
 {% if settings[vendor] %}
 <div>
 <a href="{{ settings[vendor_name] }}" title="{{ settings[vendor_name] }}">
 {{ vendor_logo | asset_url | img_tag: settings[vendor_name], "replace-2x img-responsive" }}
 </a>
 </div>
 {% endif %}
 {% endfor %}
 </div>
</div> 
 <hr>
{% endif %}

Then paste this to the bottom of slick-theme.css, and edit anything you need to.

.slider-container {
position: relative;
margin-top: 10px;
left: 0;
height: 100%;
width:100%;
}

.slider-custom {
 width: 850px;
 margin-left: auto;
 margin-right: auto;
 display: block;
 height: 80px;
}

.slick-slide {
 width: 170px;
 padding-left: 10px;
 padding-right: 10px;
}

Now for the final change. Go back to your shopify admin interface, then to online store -> themes -> customize theme
Scroll down to the config section
Open up your copy of settings_schema.json

Look for somewhere that makes sense (for us, we chose on the ‘home page’ section) and paste in the following keys / values

      {
       "type": "header",
       "content": "Vendor Logo Carousel"
       },
       {
       "type": "text",
       "id": "home_vendor_carousel_title",
       "label": "Vendor Carousel Title"
       },
       {
       "type": "checkbox",
       "id": "home_vendor_carousel_enable",
       "label": "Enable Vendor Carousel"
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_1",
       "label": "Enable Vendor 1"
       },
       {
       "type": "text",
       "id": "home_vendor_name_1",
       "label": "Vendor link 1"
       },
       {
       "type": "image",
       "id": "vendor_logo_1.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_2",
       "label": "Enable Vendor 2"
       },
       {
       "type": "text",
       "id": "home_vendor_name_2",
       "label": "Vendor link 2"
       },
       {
       "type": "image",
       "id": "vendor_logo_2.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_3",
       "label": "Enable Vendor 3"
       },
       {
       "type": "text",
       "id": "home_vendor_name_3",
       "label": "Vendor link 3"
       },
       {
       "type": "image",
       "id": "vendor_logo_3.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_4",
       "label": "Enable Vendor 4"
       },
       {
       "type": "text",
       "id": "home_vendor_name_4",
       "label": "Vendor link 4"
       },
       {
       "type": "image",
       "id": "vendor_logo_4.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_5",
       "label": "Enable Vendor 5"
       },
       {
       "type": "text",
       "id": "home_vendor_name_5",
       "label": "Vendor link 5"
       },
       {
       "type": "image",
       "id": "vendor_logo_5.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_6",
       "label": "Enable Vendor 6"
       },
       {
       "type": "text",
       "id": "home_vendor_name_6",
       "label": "Vendor link 6"
       },
       {
       "type": "image",
       "id": "vendor_logo_6.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_7",
       "label": "Enable Vendor 7"
       },
       {
       "type": "text",
       "id": "home_vendor_name_7",
       "label": "Vendor link 7"
       },
       {
       "type": "image",
       "id": "vendor_logo_7.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_8",
       "label": "Enable Vendor 8"
       },
       {
       "type": "text",
       "id": "home_vendor_name_8",
       "label": "Vendor link 8"
       },
       {
       "type": "image",
       "id": "vendor_logo_8.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_9",
       "label": "Enable Vendor 9"
       },
       {
       "type": "text",
       "id": "home_vendor_name_9",
       "label": "Vendor link 9"
       },
       {
       "type": "image",
       "id": "vendor_logo_9.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_10",
       "label": "Enable Vendor 10"
       },
       {
       "type": "text",
       "id": "home_vendor_name_10",
       "label": "Vendor link 10"
       },
       {
       "type": "image",
       "id": "vendor_logo_10.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_11",
       "label": "Enable Vendor 11"
       },
       {
       "type": "text",
       "id": "home_vendor_name_11",
       "label": "Vendor link 11"
       },
       {
       "type": "image",
       "id": "vendor_logo_11.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       },
       {
       "type": "checkbox",
       "id": "home_vendor_enable_12",
       "label": "Enable Vendor 12"
       },
       {
       "type": "text",
       "id": "home_vendor_name_12",
       "label": "Vendor link 12"
       },
       {
       "type": "image",
       "id": "vendor_logo_12.png",
       "label": "Icon",
       "max-width": 1000,
       "max-height": 563
       }

Now save the file.
Now open your customize theme (online store -> themes -> customize theme) and go to where you setup the vendor slider.
Add your images to the slider and the title / etc.
Click save
If you did everything right, you should see the slider now, probably needing some CSS work to position it properly.

Hope this helps someone else looking to add a custom slider to their shopify theme, while not adding it sitewide.

Comments

Comment by Shawn Williams on 2017-03-11 11:04:51 -0500

Excellent, thanks a lot for this.

Comment by Shawn Williams on 2017-03-15 12:45:42 -0500

How can I make this work on every page and not the home page? I’m trying to make the slider work in the header section exactly like the slider here, http://wholesalesupplementwarehouse.com.au/

Comment by ty on 2017-03-15 18:10:23 -0500

Hi Matt

Great Article, thank you for posting. I followed all your steps directly but once i got too adding the code to settings_schema in the config, I keep on getting invalid JSON unexpected token and not sure what is the issues as I have tried many things. hoping you can help out!

Thanks
Ty

Comment by Matt G on 2017-03-15 19:37:26 -0500

hey ty, i would download something with syntax highlighting like notepad++ or sublimetext or atom, and copy the WHOLE settings file over, and make your additions and make sure nothing changes, then paste it back. should work fine!

Comment by Matt G on 2017-03-15 19:45:05 -0500

you should be able to, but you will have to include the js across all pages, then it should work.

Comment by ty on 2017-03-17 15:19:39 -0500

Thank you for the speedy reply Matt, I did exactly what you said and still somehow cannot get it going. Is there anything else that you think could be the problem?

Thanks,

Tyler

Comment by Matt G on 2017-03-17 21:13:22 -0500

hmmmm. would it be possible to post your entire .json file and i can take a look?

Comment by ty on 2017-03-18 18:43:42 -0500

Hey Matt, I got it up and running perfectly now just needed to indent JSON!! Thank you very much for your help and again on a great article that was definitely needed especially with the many restrictions on shopify, would have gone with WordPress had I known before hand. Sure lots are in the same boat, keep the great articles coming!!

Comment by ty on 2017-03-18 18:45:08 -0500

To change image size is that done from the JSON or CSS?

Comment by ty on 2017-03-19 16:44:14 -0500

Figured it out but, how do I know get the images to scroll horizonally intead of vertically?

Comment by Matt G on 2017-03-20 13:33:14 -0500

Hey Ty,

Should do that automagically with the CSS — open up the developer console in chrome/firefox and make sure your css is loading. You may need to tweak your CSS for spacing etc as our example is specific to the site we enabled this on.

Thanks,
Matt

Comment by Leizuu on 2017-04-28 04:04:06 -0500

Hi everybody,
I’m also having issue at the very last step: insert the last code into settings_schema.json. I have an error every time. Here is my actual code without it:

[
{
“name”: “theme_info”,
“theme_name”: “Debut”,
“theme_author”: “Shopify”,
“theme_version”: “1.1.2”,
“theme_documentation_url”: “https://help.shopify.com/manual/using-themes/sections”,
“theme_support_url”: “https://support.shopify.com/”
},
{
“name”: “Colors”,
“settings”: [
{
“type”: “header”,
“content”: “Text and buttons”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “Headings and links”,
“default”: “#3d4246”
},
{
“type”: “color”,
“id”: “color_body_text”,
“label”: “Body text”,
“default”: “#788188”
},
{
“type”: “color”,
“id”: “color_sale_text”,
“label”: “Sale text”,
“default”: “#7796A8”
},
{
“type”: “color”,
“id”: “color_borders”,
“label”: “Borders and lines”,
“default”: “#e8e9eb”
},
{
“type”: “color”,
“id”: “color_button”,
“label”: “Buttons”,
“default”: “#7796A8”
},
{
“type”: “color”,
“id”: “color_button_text”,
“label”: “Button text”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_small_button”,
“label”: “Small buttons”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_small_button_text”,
“label”: “Small button text”,
“default”: “#3d4246”
},
{
“type”: “color”,
“id”: “color_text_field”,
“label”: “Text fields”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_text_field_text”,
“label”: “Text field text”,
“default”: “#000”
},
{
“type”: “header”,
“content”: “Image overlays”
},
{
“type”: “color”,
“id”: “color_image_overlay_text”,
“label”: “Text”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_image_overlay”,
“label”: “Background”,
“default”: “#3d4246”
},
{
“type”: “select”,
“id”: “image_overlay_opacity”,
“label”: “Opacity”,
“default”: “0.25”,
“options”: [
{
“label”: “90%”,
“value”: “0.9”
},
{
“label”: “85%”,
“value”: “0.85”
},
{
“label”: “80%”,
“value”: “0.8”
},
{
“label”: “75%”,
“value”: “0.75”
},
{
“label”: “70%”,
“value”: “0.7”
},
{
“label”: “65%”,
“value”: “0.65”
},
{
“label”: “60%”,
“value”: “0.6”
},
{
“label”: “55%”,
“value”: “0.55”
},
{
“label”: “50%”,
“value”: “0.5”
},
{
“label”: “45%”,
“value”: “0.45”
},
{
“label”: “40%”,
“value”: “0.4”
},
{
“label”: “35%”,
“value”: “0.35”
},
{
“label”: “30%”,
“value”: “0.3”
},
{
“label”: “25%”,
“value”: “0.25”
},
{
“label”: “20%”,
“value”: “0.2”
},
{
“label”: “0%”,
“value”: “0”
}
]
},
{
“type”: “header”,
“content”: “Background”
},
{
“type”: “color”,
“id”: “color_body_bg”,
“label”: “Background color”,
“default”: “#fff”
}
]
},
{
“name”: “Typography”,
“settings”: [
{
“type”: “header”,
“content”: “Headings and buttons”
},
{
“type”: “select”,
“id”: “type_header_family”,
“label”: “Font”,
“default”: “Google_Work+Sans_600_sans”,
“options”: [
{
“value”: “‘Avant Garde’, Avantgarde, ‘Century Gothic’, CenturyGothic, ‘AppleGothic’, sans-serif”,
“label”: “Avant Garde”,
“group”: “Sans-serif”
},
{
“value”: “‘Gill Sans’, ‘Gill Sans MT’, Calibri, sans-serif”,
“label”: “Gill Sans”,
“group”: “Sans-serif”
},
{
“value”: “‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”,
“label”: “Helvetica Neue”,
“group”: “Sans-serif”
},
{
“value”: “Arial, ‘Helvetica Neue’, Helvetica, sans-serif”,
“label”: “Arial”,
“group”: “Sans-serif”
},
{
“value”: “Candara, Calibri, Segoe, ‘Segoe UI’, Optima, Arial, sans-serif”,
“label”: “Candara”,
“group”: “Sans-serif”
},
{
“value”: “Geneva, Tahoma, Verdana, sans-serif”,
“label”: “Geneva”,
“group”: “Sans-serif”
},
{
“value”: “Google_Droid+Sans_400_sans”,
“label”: “Droid Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Sans_700_sans”,
“label”: “Droid Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_400_sans”,
“label”: “Lato”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_700_sans”,
“label”: “Lato Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_400_sans”,
“label”: “Montserrat”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_700_sans”,
“label”: “Montserrat Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_400_sans”,
“label”: “Open Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_700_sans”,
“label”: “Open Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_400_sans”,
“label”: “PT Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_700_sans”,
“label”: “PT Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_400_sans”,
“label”: “Roboto”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_700_sans”,
“label”: “Roboto Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_400_sans”,
“label”: “Source Sans Pro”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_700_sans”,
“label”: “Source Sans Pro Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_400_sans”,
“label”: “Ubuntu”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_700_sans”,
“label”: “Ubuntu Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_400_sans”,
“label”: “Work Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_600_sans”,
“label”: “Work Sans Semi-Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “‘Big Caslon’, ‘Book Antiqua’, ‘Palatino Linotype’, Georgia, serif”,
“label”: “Big Caslon”,
“group”: “Serif”
},
{
“value”: “‘Calisto MT’, ‘Bookman Old Style’, Bookman, ‘Goudy Old Style’, Garamond, ‘Hoefler Text’, ‘Bitstream Charter’, Georgia, serif”,
“label”: “Calisto MT”,
“group”: “Serif”
},
{
“value”: “Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, Garamond, ‘Times New Roman’, serif”,
“label”: “Baskerville”,
“group”: “Serif”
},
{
“value”: “Garamond, Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Garamond”,
“group”: “Serif”
},
{
“value”: “TimesNewRoman, ‘Times New Roman’, Times, Baskerville, Georgia, serif”,
“label”: “Times New Roman”,
“group”: “Serif”
},
{
“value”: “Google_Arvo_400_serif”,
“label”: “Arvo”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_700_serif”,
“label”: “Arvo Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_400_serif”,
“label”: “Crimson Text”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_700_serif”,
“label”: “Crimson Text Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_400_serif”,
“label”: “Droid Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_700_serif”,
“label”: “Droid Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_400_serif”,
“label”: “Lora”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_700_serif”,
“label”: “Lora Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Old+Standard+TT_400_serif”,
“label”: “Old Standard”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Old+Standard+TT_700_serif”,
“label”: “Old Standard Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_400_serif”,
“label”: “PT Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_700_serif”,
“label”: “PT Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_400_serif”,
“label”: “Vollkorn”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_700_serif”,
“label”: “Vollkorn Bold”,
“group”: “Serif | Google Web Fonts”
}
]
},
{
“type”: “select”,
“id”: “type_header_base_size”,
“label”: “Heading base size”,
“default”: “26px”,
“options”: [
{
“value”: “20px”,
“label”: “20px”
},
{
“value”: “22px”,
“label”: “22px”
},
{
“value”: “24px”,
“label”: “24px”
},
{
“value”: “26px”,
“label”: “26px”
},
{
“value”: “28px”,
“label”: “28px”
},
{
“value”: “30px”,
“label”: “30px”
},
{
“value”: “32px”,
“label”: “32px”
},
{
“value”: “34px”,
“label”: “34px”
},
{
“value”: “36px”,
“label”: “36px”
}
]
},
{
“type”: “header”,
“content”: “Body text”
},
{
“type”: “select”,
“id”: “type_base_family”,
“label”: “Font”,
“default”: “Google_Work+Sans_400_sans”,
“options”: [
{
“value”: “‘Avant Garde’, Avantgarde, ‘Century Gothic’, CenturyGothic, ‘AppleGothic’, sans-serif”,
“label”: “Avant Garde”,
“group”: “Sans-serif”
},
{
“value”: “‘Gill Sans’, ‘Gill Sans MT’, Calibri, sans-serif”,
“label”: “Gill Sans”,
“group”: “Sans-serif”
},
{
“value”: “‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”,
“label”: “Helvetica Neue”,
“group”: “Sans-serif”
},
{
“value”: “Arial, ‘Helvetica Neue’, Helvetica, sans-serif”,
“label”: “Arial”,
“group”: “Sans-serif”
},
{
“value”: “Candara, Calibri, Segoe, ‘Segoe UI’, Optima, Arial, sans-serif”,
“label”: “Candara”,
“group”: “Sans-serif”
},
{
“value”: “Geneva, Tahoma, Verdana, sans-serif”,
“label”: “Geneva”,
“group”: “Sans-serif”
},
{
“value”: “Google_Droid+Sans_400_sans”,
“label”: “Droid Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Sans_700_sans”,
“label”: “Droid Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_400_sans”,
“label”: “Lato”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_700_sans”,
“label”: “Lato Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_400_sans”,
“label”: “Montserrat”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_700_sans”,
“label”: “Montserrat Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_400_sans”,
“label”: “Open Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_700_sans”,
“label”: “Open Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_400_sans”,
“label”: “PT Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_700_sans”,
“label”: “PT Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_400_sans”,
“label”: “Roboto”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_700_sans”,
“label”: “Roboto Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_400_sans”,
“label”: “Source Sans Pro”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_700_sans”,
“label”: “Source Sans Pro Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_400_sans”,
“label”: “Ubuntu”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_700_sans”,
“label”: “Ubuntu Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_400_sans”,
“label”: “Work Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_500_sans”,
“label”: “Work Sans Semi-Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “‘Big Caslon’, ‘Book Antiqua’, ‘Palatino Linotype’, Georgia, serif”,
“label”: “Big Caslon”,
“group”: “Serif”
},
{
“value”: “‘Calisto MT’, ‘Bookman Old Style’, Bookman, ‘Goudy Old Style’, Garamond, ‘Hoefler Text’, ‘Bitstream Charter’, Georgia, serif”,
“label”: “Calisto MT”,
“group”: “Serif”
},
{
“value”: “Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, Garamond, ‘Times New Roman’, serif”,
“label”: “Baskerville”,
“group”: “Serif”
},
{
“value”: “Garamond, Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Garamond”,
“group”: “Serif”
},
{
“value”: “Georgia, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Georgia”,
“group”: “Serif”
},
{
“value”: “TimesNewRoman, ‘Times New Roman’, Times, Baskerville, Georgia, serif”,
“label”: “Times New Roman”,
“group”: “Serif”
},
{
“value”: “Google_Arapey_400_serif”,
“label”: “Arapey”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_400_serif”,
“label”: “Arvo”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_700_serif”,
“label”: “Arvo Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_400_serif”,
“label”: “Crimson Text”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_700_serif”,
“label”: “Crimson Text Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_400_serif”,
“label”: “Droid Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_700_serif”,
“label”: “Droid Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_400_serif”,
“label”: “Lora”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_700_serif”,
“label”: “Lora Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_400_serif”,
“label”: “PT Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_700_serif”,
“label”: “PT Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_400_serif”,
“label”: “Vollkorn”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_700_serif”,
“label”: “Vollkorn Bold”,
“group”: “Serif | Google Web Fonts”
}
]
},
{
“type”: “select”,
“id”: “type_base_size”,
“label”: “Base size”,
“default”: “16px”,
“options”: [
{
“value”: “13px”,
“label”: “13px”
},
{
“value”: “14px”,
“label”: “14px”
},
{
“value”: “15px”,
“label”: “15px”
},
{
“value”: “16px”,
“label”: “16px”
},
{
“value”: “17px”,
“label”: “17px”
},
{
“value”: “18px”,
“label”: “18px”
},
{
“value”: “19px”,
“label”: “19px”
},
{
“value”: “20px”,
“label”: “20px”
}
]
},
{
“type”: “checkbox”,
“id”: “type_bold_product_titles”,
“label”: “Bold product titles”
}
]
},
{
“name”: “Social media”,
“settings”: [
{
“type”: “header”,
“content”: “Social sharing options”
},
{
“type”: “checkbox”,
“id”: “share_facebook”,
“label”: “Share on Facebook”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “share_twitter”,
“label”: “Tweet on Twitter”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “share_pinterest”,
“label”: “Pin on Pinterest”,
“default”: true
},
{
“type”: “header”,
“content”: “Social accounts”
},
{
“type”: “text”,
“id”: “social_twitter_link”,
“label”: “Twitter”,
“info”: “https://twitter.com/shopify”
},
{
“type”: “text”,
“id”: “social_facebook_link”,
“label”: “Facebook”,
“info”: “https://facebook.com/shopify”
},
{
“type”: “text”,
“id”: “social_pinterest_link”,
“label”: “Pinterest”,
“info”: “https://pinterest.com/shopify”
},
{
“type”: “text”,
“id”: “social_instagram_link”,
“label”: “Instagram”,
“info”: “http://instagram.com/shopify”
},
{
“type”: “text”,
“id”: “social_tumblr_link”,
“label”: “Tumblr”,
“info”: “http://shopify.tumblr.com”
},
{
“type”: “text”,
“id”: “social_snapchat_link”,
“label”: “Snapchat”,
“info”: “https://www.snapchat.com/add/shopify”
},
{
“type”: “text”,
“id”: “social_youtube_link”,
“label”: “YouTube”,
“info”: “https://www.youtube.com/shopify”
},
{
“type”: “text”,
“id”: “social_vimeo_link”,
“label”: “Vimeo”,
“info”: “https://vimeo.com/shopify”
}
]
},
{
“name”: “Favicon”,
“settings”: [
{
“type”: “image_picker”,
“id”: “favicon”,
“label”: “Favicon image”,
“info”: “Will be scaled down to 32 x 32px”
}
]
},
{
“name”: “Wishlist King”,
“settings”: [
{
“type”: “header”,
“content”: “Styling & Customisations”,
“info”: “Please note: Wishlist King is 100% customisable to integrate seamlessly with any theme. If you need customisations beyond what you can change below, please get in touch: support@appmate.io”
},
{
“type”: “checkbox”,
“id”: “app_wk_enabled”,
“label”: “Enable Wishlist King”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “app_wk_login_required”,
“label”: “Customer Login Required”,
“default”: false
},
{
“type”: “select”,
“id”: “app_wk_icon”,
“label”: “Wishlist Icon”,
“info”: “Choose between Heart or Star icon. For your own custom icon, please contact support@appmate.io”,
“options”: [
{
“value”: “heart”,
“label”: “Heart”
},
{
“value”: “star”,
“label”: “Star”
}
],
“default”: “heart”
},
{
“type”: “header”,
“content”: “Button – Collection”
},
{
“type”: “select”,
“id”: “app_wk_col_bg_shape”,
“label”: “Button Shape”,
“options”: [
{
“value”: “square”,
“label”: “Square”
},
{
“value”: “circle”,
“label”: “Circle”
},
{
“value”: “none”,
“label”: “No Background”
}
],
“default”: “square”
},
{
“type”: “header”,
“content”: “Wishlist Page”
},
{
“type”: “select”,
“id”: “app_wk_share_position”,
“label”: “Share Wishlist Position”,
“options”: [
{
“value”: “top”,
“label”: “Top”
},
{
“value”: “bottom”,
“label”: “Bottom”
},
{
“value”: “hidden”,
“label”: “Hidden”
}
],
“default”: “top”
},
{
“type”: “select”,
“id”: “app_wk_products_per_row”,
“label”: “Products per Row”,
“options”: [
{
“value”: “3”,
“label”: “3”
},
{
“value”: “4”,
“label”: “4”
},
{
“value”: “5”,
“label”: “5”
},
{
“value”: “6”,
“label”: “6”
}
],
“default”: “4”
}
]
}
]

Any clue where to paste it? Thanks for your help.

Comment by Leizuu on 2017-04-29 03:23:29 -0500

Hi all,
I have issue with the last step, where to insert the code in the settings_schema.json file?
thanks for your help!!

Here is my actual code without the slick code :
[
{
“name”: “theme_info”,
“theme_name”: “Debut”,
“theme_author”: “Shopify”,
“theme_version”: “1.1.2”,
“theme_documentation_url”: “https://help.shopify.com/manual/using-themes/sections”,
“theme_support_url”: “https://support.shopify.com/”
},
{
“name”: “Colors”,
“settings”: [
{
“type”: “header”,
“content”: “Text and buttons”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “Headings and links”,
“default”: “#3d4246”
},
{
“type”: “color”,
“id”: “color_body_text”,
“label”: “Body text”,
“default”: “#788188”
},
{
“type”: “color”,
“id”: “color_sale_text”,
“label”: “Sale text”,
“default”: “#7796A8”
},
{
“type”: “color”,
“id”: “color_borders”,
“label”: “Borders and lines”,
“default”: “#e8e9eb”
},
{
“type”: “color”,
“id”: “color_button”,
“label”: “Buttons”,
“default”: “#7796A8”
},
{
“type”: “color”,
“id”: “color_button_text”,
“label”: “Button text”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_small_button”,
“label”: “Small buttons”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_small_button_text”,
“label”: “Small button text”,
“default”: “#3d4246”
},
{
“type”: “color”,
“id”: “color_text_field”,
“label”: “Text fields”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_text_field_text”,
“label”: “Text field text”,
“default”: “#000”
},
{
“type”: “header”,
“content”: “Image overlays”
},
{
“type”: “color”,
“id”: “color_image_overlay_text”,
“label”: “Text”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_image_overlay”,
“label”: “Background”,
“default”: “#3d4246”
},
{
“type”: “select”,
“id”: “image_overlay_opacity”,
“label”: “Opacity”,
“default”: “0.25”,
“options”: [
{
“label”: “90%”,
“value”: “0.9”
},
{
“label”: “85%”,
“value”: “0.85”
},
{
“label”: “80%”,
“value”: “0.8”
},
{
“label”: “75%”,
“value”: “0.75”
},
{
“label”: “70%”,
“value”: “0.7”
},
{
“label”: “65%”,
“value”: “0.65”
},
{
“label”: “60%”,
“value”: “0.6”
},
{
“label”: “55%”,
“value”: “0.55”
},
{
“label”: “50%”,
“value”: “0.5”
},
{
“label”: “45%”,
“value”: “0.45”
},
{
“label”: “40%”,
“value”: “0.4”
},
{
“label”: “35%”,
“value”: “0.35”
},
{
“label”: “30%”,
“value”: “0.3”
},
{
“label”: “25%”,
“value”: “0.25”
},
{
“label”: “20%”,
“value”: “0.2”
},
{
“label”: “0%”,
“value”: “0”
}
]
},
{
“type”: “header”,
“content”: “Background”
},
{
“type”: “color”,
“id”: “color_body_bg”,
“label”: “Background color”,
“default”: “#fff”
}
]
},
{
“name”: “Typography”,
“settings”: [
{
“type”: “header”,
“content”: “Headings and buttons”
},
{
“type”: “select”,
“id”: “type_header_family”,
“label”: “Font”,
“default”: “Google_Work+Sans_600_sans”,
“options”: [
{
“value”: “‘Avant Garde’, Avantgarde, ‘Century Gothic’, CenturyGothic, ‘AppleGothic’, sans-serif”,
“label”: “Avant Garde”,
“group”: “Sans-serif”
},
{
“value”: “‘Gill Sans’, ‘Gill Sans MT’, Calibri, sans-serif”,
“label”: “Gill Sans”,
“group”: “Sans-serif”
},
{
“value”: “‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”,
“label”: “Helvetica Neue”,
“group”: “Sans-serif”
},
{
“value”: “Arial, ‘Helvetica Neue’, Helvetica, sans-serif”,
“label”: “Arial”,
“group”: “Sans-serif”
},
{
“value”: “Candara, Calibri, Segoe, ‘Segoe UI’, Optima, Arial, sans-serif”,
“label”: “Candara”,
“group”: “Sans-serif”
},
{
“value”: “Geneva, Tahoma, Verdana, sans-serif”,
“label”: “Geneva”,
“group”: “Sans-serif”
},
{
“value”: “Google_Droid+Sans_400_sans”,
“label”: “Droid Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Sans_700_sans”,
“label”: “Droid Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_400_sans”,
“label”: “Lato”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_700_sans”,
“label”: “Lato Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_400_sans”,
“label”: “Montserrat”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_700_sans”,
“label”: “Montserrat Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_400_sans”,
“label”: “Open Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_700_sans”,
“label”: “Open Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_400_sans”,
“label”: “PT Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_700_sans”,
“label”: “PT Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_400_sans”,
“label”: “Roboto”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_700_sans”,
“label”: “Roboto Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_400_sans”,
“label”: “Source Sans Pro”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_700_sans”,
“label”: “Source Sans Pro Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_400_sans”,
“label”: “Ubuntu”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_700_sans”,
“label”: “Ubuntu Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_400_sans”,
“label”: “Work Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_600_sans”,
“label”: “Work Sans Semi-Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “‘Big Caslon’, ‘Book Antiqua’, ‘Palatino Linotype’, Georgia, serif”,
“label”: “Big Caslon”,
“group”: “Serif”
},
{
“value”: “‘Calisto MT’, ‘Bookman Old Style’, Bookman, ‘Goudy Old Style’, Garamond, ‘Hoefler Text’, ‘Bitstream Charter’, Georgia, serif”,
“label”: “Calisto MT”,
“group”: “Serif”
},
{
“value”: “Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, Garamond, ‘Times New Roman’, serif”,
“label”: “Baskerville”,
“group”: “Serif”
},
{
“value”: “Garamond, Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Garamond”,
“group”: “Serif”
},
{
“value”: “TimesNewRoman, ‘Times New Roman’, Times, Baskerville, Georgia, serif”,
“label”: “Times New Roman”,
“group”: “Serif”
},
{
“value”: “Google_Arvo_400_serif”,
“label”: “Arvo”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_700_serif”,
“label”: “Arvo Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_400_serif”,
“label”: “Crimson Text”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_700_serif”,
“label”: “Crimson Text Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_400_serif”,
“label”: “Droid Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_700_serif”,
“label”: “Droid Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_400_serif”,
“label”: “Lora”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_700_serif”,
“label”: “Lora Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Old+Standard+TT_400_serif”,
“label”: “Old Standard”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Old+Standard+TT_700_serif”,
“label”: “Old Standard Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_400_serif”,
“label”: “PT Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_700_serif”,
“label”: “PT Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_400_serif”,
“label”: “Vollkorn”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_700_serif”,
“label”: “Vollkorn Bold”,
“group”: “Serif | Google Web Fonts”
}
]
},
{
“type”: “select”,
“id”: “type_header_base_size”,
“label”: “Heading base size”,
“default”: “26px”,
“options”: [
{
“value”: “20px”,
“label”: “20px”
},
{
“value”: “22px”,
“label”: “22px”
},
{
“value”: “24px”,
“label”: “24px”
},
{
“value”: “26px”,
“label”: “26px”
},
{
“value”: “28px”,
“label”: “28px”
},
{
“value”: “30px”,
“label”: “30px”
},
{
“value”: “32px”,
“label”: “32px”
},
{
“value”: “34px”,
“label”: “34px”
},
{
“value”: “36px”,
“label”: “36px”
}
]
},
{
“type”: “header”,
“content”: “Body text”
},
{
“type”: “select”,
“id”: “type_base_family”,
“label”: “Font”,
“default”: “Google_Work+Sans_400_sans”,
“options”: [
{
“value”: “‘Avant Garde’, Avantgarde, ‘Century Gothic’, CenturyGothic, ‘AppleGothic’, sans-serif”,
“label”: “Avant Garde”,
“group”: “Sans-serif”
},
{
“value”: “‘Gill Sans’, ‘Gill Sans MT’, Calibri, sans-serif”,
“label”: “Gill Sans”,
“group”: “Sans-serif”
},
{
“value”: “‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”,
“label”: “Helvetica Neue”,
“group”: “Sans-serif”
},
{
“value”: “Arial, ‘Helvetica Neue’, Helvetica, sans-serif”,
“label”: “Arial”,
“group”: “Sans-serif”
},
{
“value”: “Candara, Calibri, Segoe, ‘Segoe UI’, Optima, Arial, sans-serif”,
“label”: “Candara”,
“group”: “Sans-serif”
},
{
“value”: “Geneva, Tahoma, Verdana, sans-serif”,
“label”: “Geneva”,
“group”: “Sans-serif”
},
{
“value”: “Google_Droid+Sans_400_sans”,
“label”: “Droid Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Sans_700_sans”,
“label”: “Droid Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_400_sans”,
“label”: “Lato”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_700_sans”,
“label”: “Lato Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_400_sans”,
“label”: “Montserrat”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_700_sans”,
“label”: “Montserrat Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_400_sans”,
“label”: “Open Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_700_sans”,
“label”: “Open Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_400_sans”,
“label”: “PT Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_700_sans”,
“label”: “PT Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_400_sans”,
“label”: “Roboto”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_700_sans”,
“label”: “Roboto Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_400_sans”,
“label”: “Source Sans Pro”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_700_sans”,
“label”: “Source Sans Pro Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_400_sans”,
“label”: “Ubuntu”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_700_sans”,
“label”: “Ubuntu Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_400_sans”,
“label”: “Work Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_500_sans”,
“label”: “Work Sans Semi-Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “‘Big Caslon’, ‘Book Antiqua’, ‘Palatino Linotype’, Georgia, serif”,
“label”: “Big Caslon”,
“group”: “Serif”
},
{
“value”: “‘Calisto MT’, ‘Bookman Old Style’, Bookman, ‘Goudy Old Style’, Garamond, ‘Hoefler Text’, ‘Bitstream Charter’, Georgia, serif”,
“label”: “Calisto MT”,
“group”: “Serif”
},
{
“value”: “Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, Garamond, ‘Times New Roman’, serif”,
“label”: “Baskerville”,
“group”: “Serif”
},
{
“value”: “Garamond, Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Garamond”,
“group”: “Serif”
},
{
“value”: “Georgia, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Georgia”,
“group”: “Serif”
},
{
“value”: “TimesNewRoman, ‘Times New Roman’, Times, Baskerville, Georgia, serif”,
“label”: “Times New Roman”,
“group”: “Serif”
},
{
“value”: “Google_Arapey_400_serif”,
“label”: “Arapey”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_400_serif”,
“label”: “Arvo”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_700_serif”,
“label”: “Arvo Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_400_serif”,
“label”: “Crimson Text”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_700_serif”,
“label”: “Crimson Text Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_400_serif”,
“label”: “Droid Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_700_serif”,
“label”: “Droid Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_400_serif”,
“label”: “Lora”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_700_serif”,
“label”: “Lora Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_400_serif”,
“label”: “PT Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_700_serif”,
“label”: “PT Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_400_serif”,
“label”: “Vollkorn”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_700_serif”,
“label”: “Vollkorn Bold”,
“group”: “Serif | Google Web Fonts”
}
]
},
{
“type”: “select”,
“id”: “type_base_size”,
“label”: “Base size”,
“default”: “16px”,
“options”: [
{
“value”: “13px”,
“label”: “13px”
},
{
“value”: “14px”,
“label”: “14px”
},
{
“value”: “15px”,
“label”: “15px”
},
{
“value”: “16px”,
“label”: “16px”
},
{
“value”: “17px”,
“label”: “17px”
},
{
“value”: “18px”,
“label”: “18px”
},
{
“value”: “19px”,
“label”: “19px”
},
{
“value”: “20px”,
“label”: “20px”
}
]
},
{
“type”: “checkbox”,
“id”: “type_bold_product_titles”,
“label”: “Bold product titles”
}
]
},
{
“name”: “Social media”,
“settings”: [
{
“type”: “header”,
“content”: “Social sharing options”
},
{
“type”: “checkbox”,
“id”: “share_facebook”,
“label”: “Share on Facebook”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “share_twitter”,
“label”: “Tweet on Twitter”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “share_pinterest”,
“label”: “Pin on Pinterest”,
“default”: true
},
{
“type”: “header”,
“content”: “Social accounts”
},
{
“type”: “text”,
“id”: “social_twitter_link”,
“label”: “Twitter”,
“info”: “https://twitter.com/shopify”
},
{
“type”: “text”,
“id”: “social_facebook_link”,
“label”: “Facebook”,
“info”: “https://facebook.com/shopify”
},
{
“type”: “text”,
“id”: “social_pinterest_link”,
“label”: “Pinterest”,
“info”: “https://pinterest.com/shopify”
},
{
“type”: “text”,
“id”: “social_instagram_link”,
“label”: “Instagram”,
“info”: “http://instagram.com/shopify”
},
{
“type”: “text”,
“id”: “social_tumblr_link”,
“label”: “Tumblr”,
“info”: “http://shopify.tumblr.com”
},
{
“type”: “text”,
“id”: “social_snapchat_link”,
“label”: “Snapchat”,
“info”: “https://www.snapchat.com/add/shopify”
},
{
“type”: “text”,
“id”: “social_youtube_link”,
“label”: “YouTube”,
“info”: “https://www.youtube.com/shopify”
},
{
“type”: “text”,
“id”: “social_vimeo_link”,
“label”: “Vimeo”,
“info”: “https://vimeo.com/shopify”
}
]
},
{
“name”: “Favicon”,
“settings”: [
{
“type”: “image_picker”,
“id”: “favicon”,
“label”: “Favicon image”,
“info”: “Will be scaled down to 32 x 32px”
}
]
},
{
“name”: “Wishlist King”,
“settings”: [
{
“type”: “header”,
“content”: “Styling & Customisations”,
“info”: “Please note: Wishlist King is 100% customisable to integrate seamlessly with any theme. If you need customisations beyond what you can change below, please get in touch: support@appmate.io”
},
{
“type”: “checkbox”,
“id”: “app_wk_enabled”,
“label”: “Enable Wishlist King”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “app_wk_login_required”,
“label”: “Customer Login Required”,
“default”: false
},
{
“type”: “select”,
“id”: “app_wk_icon”,
“label”: “Wishlist Icon”,
“info”: “Choose between Heart or Star icon. For your own custom icon, please contact support@appmate.io”,
“options”: [
{
“value”: “heart”,
“label”: “Heart”
},
{
“value”: “star”,
“label”: “Star”
}
],
“default”: “heart”
},
{
“type”: “header”,
“content”: “Button – Collection”
},
{
“type”: “select”,
“id”: “app_wk_col_bg_shape”,
“label”: “Button Shape”,
“options”: [
{
“value”: “square”,
“label”: “Square”
},
{
“value”: “circle”,
“label”: “Circle”
},
{
“value”: “none”,
“label”: “No Background”
}
],
“default”: “square”
},
{
“type”: “header”,
“content”: “Wishlist Page”
},
{
“type”: “select”,
“id”: “app_wk_share_position”,
“label”: “Share Wishlist Position”,
“options”: [
{
“value”: “top”,
“label”: “Top”
},
{
“value”: “bottom”,
“label”: “Bottom”
},
{
“value”: “hidden”,
“label”: “Hidden”
}
],
“default”: “top”
},
{
“type”: “select”,
“id”: “app_wk_products_per_row”,
“label”: “Products per Row”,
“options”: [
{
“value”: “3”,
“label”: “3”
},
{
“value”: “4”,
“label”: “4”
},
{
“value”: “5”,
“label”: “5”
},
{
“value”: “6”,
“label”: “6”
}
],
“default”: “4”
}
]
}
]

Comment by ALadin on 2017-05-04 04:19:17 -0500

Hi,

I’m trying to add this slider to my product page (under the picture section where there is an blank area and I’m using the Debut theme. I added the code to product.liquid instead, and also removed the comment symbol in order to include the jQuery. However, after no errors or such, I cannot see the slider anywhere.

Could you please help me out?

Best,
Aladin

Comment by Ostrich on 2017-06-03 14:40:01 -0500

Thanks for keeping me slick <3

Comment by Steff on 2017-06-18 17:53:29 -0500

Hello I have a store in Shopify, I followed all the steps but doesn’t work, can somebody help me please?

Comment by Meghana h v on 2017-12-08 00:58:25 -0500

Hi everybody,
I’m also having issue at the very last step: insert the last code into settings_schema.json. I have an error every time. Here is my actual code without it:

[
{
“name”: “theme_info”,
“theme_name”: “Debut”,
“theme_author”: “Shopify”,
“theme_version”: “1.9.0”,
“theme_documentation_url”: “https://help.shopify.com/manual/using-themes/themes-by-shopify/debut”,
“theme_support_url”: “https://support.shopify.com/”
},
{
“name”: “Colors”,
“settings”: [
{
“type”: “header”,
“content”: “Text and buttons”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “Headings and links”,
“default”: “#3d4246”
},
{
“type”: “color”,
“id”: “color_body_text”,
“label”: “Body text”,
“default”: “#788188”
},
{
“type”: “color”,
“id”: “color_sale_text”,
“label”: “Sale text”,
“default”: “#7796A8”
},
{
“type”: “color”,
“id”: “color_borders”,
“label”: “Borders and lines”,
“default”: “#e8e9eb”
},
{
“type”: “color”,
“id”: “color_button”,
“label”: “Buttons”,
“default”: “#7796A8”
},
{
“type”: “color”,
“id”: “color_button_text”,
“label”: “Button text”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_small_button”,
“label”: “Small buttons”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_small_button_text”,
“label”: “Small button text”,
“default”: “#3d4246”
},
{
“type”: “color”,
“id”: “color_text_field”,
“label”: “Text fields”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_text_field_text”,
“label”: “Text field text”,
“default”: “#000”
},
{
“type”: “header”,
“content”: “Image overlays”
},
{
“type”: “color”,
“id”: “color_image_overlay_text”,
“label”: “Text”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_image_overlay”,
“label”: “Background”,
“default”: “#3d4246”
},
{
“type”: “range”,
“id”: “image_overlay_opacity”,
“label”: “Opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“default”: 25
},
{
“type”: “header”,
“content”: “Background”
},
{
“type”: “color”,
“id”: “color_body_bg”,
“label”: “Background”,
“default”: “#fff”
}
]
},
{
“name”: “Typography”,
“settings”: [
{
“type”: “header”,
“content”: “Headings and buttons”
},
{
“type”: “select”,
“id”: “type_header_family”,
“label”: “Font”,
“default”: “Google_Work+Sans_600_sans”,
“options”: [
{
“value”: “‘Avant Garde’, Avantgarde, ‘Century Gothic’, CenturyGothic, ‘AppleGothic’, sans-serif”,
“label”: “Avant Garde”,
“group”: “Sans-serif”
},
{
“value”: “‘Gill Sans’, ‘Gill Sans MT’, Calibri, sans-serif”,
“label”: “Gill Sans”,
“group”: “Sans-serif”
},
{
“value”: “‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”,
“label”: “Helvetica Neue”,
“group”: “Sans-serif”
},
{
“value”: “Arial, ‘Helvetica Neue’, Helvetica, sans-serif”,
“label”: “Arial”,
“group”: “Sans-serif”
},
{
“value”: “Candara, Calibri, Segoe, ‘Segoe UI’, Optima, Arial, sans-serif”,
“label”: “Candara”,
“group”: “Sans-serif”
},
{
“value”: “Geneva, Tahoma, Verdana, sans-serif”,
“label”: “Geneva”,
“group”: “Sans-serif”
},
{
“value”: “Google_Droid+Sans_400_sans”,
“label”: “Droid Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Sans_700_sans”,
“label”: “Droid Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_400_sans”,
“label”: “Lato”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_700_sans”,
“label”: “Lato Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_400_sans”,
“label”: “Montserrat”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_700_sans”,
“label”: “Montserrat Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Muli_600_sans”,
“label”: “Muli”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_400_sans”,
“label”: “Open Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_700_sans”,
“label”: “Open Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Oswald_400_sans”,
“label”: “Oswald”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_400_sans”,
“label”: “PT Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_700_sans”,
“label”: “PT Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_400_sans”,
“label”: “Roboto”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_700_sans”,
“label”: “Roboto Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_400_sans”,
“label”: “Source Sans Pro”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_700_sans”,
“label”: “Source Sans Pro Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_400_sans”,
“label”: “Ubuntu”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_700_sans”,
“label”: “Ubuntu Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_400_sans”,
“label”: “Work Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_600_sans”,
“label”: “Work Sans Semi-Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “‘Big Caslon’, ‘Book Antiqua’, ‘Palatino Linotype’, Georgia, serif”,
“label”: “Big Caslon”,
“group”: “Serif”
},
{
“value”: “‘Calisto MT’, ‘Bookman Old Style’, Bookman, ‘Goudy Old Style’, Garamond, ‘Hoefler Text’, ‘Bitstream Charter’, Georgia, serif”,
“label”: “Calisto MT”,
“group”: “Serif”
},
{
“value”: “Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, Garamond, ‘Times New Roman’, serif”,
“label”: “Baskerville”,
“group”: “Serif”
},
{
“value”: “Garamond, Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Garamond”,
“group”: “Serif”
},
{
“value”: “TimesNewRoman, ‘Times New Roman’, Times, Baskerville, Georgia, serif”,
“label”: “Times New Roman”,
“group”: “Serif”
},
{
“value”: “Google_Arvo_400_serif”,
“label”: “Arvo”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_700_serif”,
“label”: “Arvo Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_400_serif”,
“label”: “Crimson Text”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_700_serif”,
“label”: “Crimson Text Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_400_serif”,
“label”: “Droid Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_700_serif”,
“label”: “Droid Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_400_serif”,
“label”: “Lora”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_700_serif”,
“label”: “Lora Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Old+Standard+TT_400_serif”,
“label”: “Old Standard”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Old+Standard+TT_700_serif”,
“label”: “Old Standard Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_400_serif”,
“label”: “PT Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_700_serif”,
“label”: “PT Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_400_serif”,
“label”: “Vollkorn”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_700_serif”,
“label”: “Vollkorn Bold”,
“group”: “Serif | Google Web Fonts”
}
]
},
{
“type”: “select”,
“id”: “type_header_base_size”,
“label”: “Heading base size”,
“default”: “26px”,
“options”: [
{
“value”: “20px”,
“label”: “20px”
},
{
“value”: “22px”,
“label”: “22px”
},
{
“value”: “24px”,
“label”: “24px”
},
{
“value”: “26px”,
“label”: “26px”
},
{
“value”: “28px”,
“label”: “28px”
},
{
“value”: “30px”,
“label”: “30px”
},
{
“value”: “32px”,
“label”: “32px”
},
{
“value”: “34px”,
“label”: “34px”
},
{
“value”: “36px”,
“label”: “36px”
}
]
},
{
“type”: “header”,
“content”: “Body text”
},
{
“type”: “select”,
“id”: “type_base_family”,
“label”: “Font”,
“default”: “Google_Work+Sans_400_sans”,
“options”: [
{
“value”: “‘Avant Garde’, Avantgarde, ‘Century Gothic’, CenturyGothic, ‘AppleGothic’, sans-serif”,
“label”: “Avant Garde”,
“group”: “Sans-serif”
},
{
“value”: “‘Gill Sans’, ‘Gill Sans MT’, Calibri, sans-serif”,
“label”: “Gill Sans”,
“group”: “Sans-serif”
},
{
“value”: “‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”,
“label”: “Helvetica Neue”,
“group”: “Sans-serif”
},
{
“value”: “Arial, ‘Helvetica Neue’, Helvetica, sans-serif”,
“label”: “Arial”,
“group”: “Sans-serif”
},
{
“value”: “Candara, Calibri, Segoe, ‘Segoe UI’, Optima, Arial, sans-serif”,
“label”: “Candara”,
“group”: “Sans-serif”
},
{
“value”: “Geneva, Tahoma, Verdana, sans-serif”,
“label”: “Geneva”,
“group”: “Sans-serif”
},
{
“value”: “Google_Droid+Sans_400_sans”,
“label”: “Droid Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Sans_700_sans”,
“label”: “Droid Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_400_sans”,
“label”: “Lato”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Lato_700_sans”,
“label”: “Lato Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_400_sans”,
“label”: “Montserrat”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Montserrat_700_sans”,
“label”: “Montserrat Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Muli_600_sans”,
“label”: “Muli”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_400_sans”,
“label”: “Open Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Open+Sans_700_sans”,
“label”: “Open Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_400_sans”,
“label”: “PT Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_PT+Sans_700_sans”,
“label”: “PT Sans Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_400_sans”,
“label”: “Roboto”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Roboto_700_sans”,
“label”: “Roboto Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_400_sans”,
“label”: “Source Sans Pro”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Source+Sans+Pro_700_sans”,
“label”: “Source Sans Pro Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_400_sans”,
“label”: “Ubuntu”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Ubuntu_700_sans”,
“label”: “Ubuntu Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_400_sans”,
“label”: “Work Sans”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “Google_Work+Sans_500_sans”,
“label”: “Work Sans Semi-Bold”,
“group”: “Sans-serif | Google Web Fonts”
},
{
“value”: “‘Big Caslon’, ‘Book Antiqua’, ‘Palatino Linotype’, Georgia, serif”,
“label”: “Big Caslon”,
“group”: “Serif”
},
{
“value”: “‘Calisto MT’, ‘Bookman Old Style’, Bookman, ‘Goudy Old Style’, Garamond, ‘Hoefler Text’, ‘Bitstream Charter’, Georgia, serif”,
“label”: “Calisto MT”,
“group”: “Serif”
},
{
“value”: “Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, Garamond, ‘Times New Roman’, serif”,
“label”: “Baskerville”,
“group”: “Serif”
},
{
“value”: “Garamond, Baskerville, ‘Baskerville Old Face’, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Garamond”,
“group”: “Serif”
},
{
“value”: “Georgia, ‘Hoefler Text’, ‘Times New Roman’, serif”,
“label”: “Georgia”,
“group”: “Serif”
},
{
“value”: “TimesNewRoman, ‘Times New Roman’, Times, Baskerville, Georgia, serif”,
“label”: “Times New Roman”,
“group”: “Serif”
},
{
“value”: “Google_Arapey_400_serif”,
“label”: “Arapey”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_400_serif”,
“label”: “Arvo”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Arvo_700_serif”,
“label”: “Arvo Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_400_serif”,
“label”: “Crimson Text”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Crimson+Text_700_serif”,
“label”: “Crimson Text Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_400_serif”,
“label”: “Droid Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Droid+Serif_700_serif”,
“label”: “Droid Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_400_serif”,
“label”: “Lora”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Lora_700_serif”,
“label”: “Lora Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_400_serif”,
“label”: “PT Serif”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_PT+Serif_700_serif”,
“label”: “PT Serif Bold”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_400_serif”,
“label”: “Vollkorn”,
“group”: “Serif | Google Web Fonts”
},
{
“value”: “Google_Vollkorn_700_serif”,
“label”: “Vollkorn Bold”,
“group”: “Serif | Google Web Fonts”
}
]
},
{
“type”: “select”,
“id”: “type_base_size”,
“label”: “Base size”,
“default”: “16px”,
“options”: [
{
“value”: “13px”,
“label”: “13px”
},
{
“value”: “14px”,
“label”: “14px”
},
{
“value”: “15px”,
“label”: “15px”
},
{
“value”: “16px”,
“label”: “16px”
},
{
“value”: “17px”,
“label”: “17px”
},
{
“value”: “18px”,
“label”: “18px”
},
{
“value”: “19px”,
“label”: “19px”
},
{
“value”: “20px”,
“label”: “20px”
}
]
},
{
“type”: “checkbox”,
“id”: “type_bold_product_titles”,
“label”: “Bold product titles”
}
]
},
{
“name”: “Social media”,
“settings”: [
{
“type”: “header”,
“content”: “Social sharing image”
},
{
“type”: “image_picker”,
“id”: “share_image”,
“label”: “Image”,
“info”: “Shown when sharing a link on social media. [Learn more](https://help.shopify.com/manual/using-themes/troubleshooting/showing-social-media-thumbnail-images/) about image thumbnails.”
},
{
“type”: “header”,
“content”: “Social sharing options”
},
{
“type”: “checkbox”,
“id”: “share_facebook”,
“label”: “Share on Facebook”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “share_twitter”,
“label”: “Tweet on Twitter”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “share_pinterest”,
“label”: “Pin on Pinterest”,
“default”: true
},
{
“type”: “header”,
“content”: “Social accounts”
},
{
“type”: “text”,
“id”: “social_twitter_link”,
“label”: “Twitter”,
“info”: “https://twitter.com/shopify”
},
{
“type”: “text”,
“id”: “social_facebook_link”,
“label”: “Facebook”,
“info”: “https://facebook.com/shopify”
},
{
“type”: “text”,
“id”: “social_pinterest_link”,
“label”: “Pinterest”,
“info”: “https://pinterest.com/shopify”
},
{
“type”: “text”,
“id”: “social_instagram_link”,
“label”: “Instagram”,
“info”: “http://instagram.com/shopify”
},
{
“type”: “text”,
“id”: “social_tumblr_link”,
“label”: “Tumblr”,
“info”: “http://shopify.tumblr.com”
},
{
“type”: “text”,
“id”: “social_snapchat_link”,
“label”: “Snapchat”,
“info”: “https://www.snapchat.com/add/shopify”
},
{
“type”: “text”,
“id”: “social_youtube_link”,
“label”: “YouTube”,
“info”: “https://www.youtube.com/shopify”
},
{
“type”: “text”,
“id”: “social_vimeo_link”,
“label”: “Vimeo”,
“info”: “https://vimeo.com/shopify”
}
]
},
{
“name”: “Favicon”,
“settings”: [
{
“type”: “image_picker”,
“id”: “favicon”,
“label”: “Favicon image”,
“info”: “Will be scaled down to 32 x 32px”
}
]
}
]

Comment by Meghana h v on 2017-12-08 00:59:34 -0500

Can anyone help me in this issue ?

Comment by marouane on 2018-01-27 19:18:05 -0500

Excellent, thanks a lot for this 🙂

Comment by Daniel on 2018-03-21 17:24:17 -0500

Hey Matt,
thanks for ur tutorial. I did everything like u described but i get a error in chrome which says $(…)slick. is not a function, can u help me ?!

Thanks

Daniel

Comment by Sergio on 2018-04-05 22:18:12 -0500

Hi there,

for me when enable the caroussel, it enables to all pages, how can i fix this?

Tks!

Comment by Sergio on 2018-04-06 09:52:44 -0500

Hi there,

for me the slider is appearing on every page, once enabled, can you help me?

Thanks!

Comment by Kyle on 2018-05-31 12:12:43 -0500

I’m not sure where to edit my images to get them to show as larger. Would this be done within slick.css or the json file?

Comment by SPP on 2018-10-23 21:47:08 -0500

Hi Matt,
Is there a way to make my product page’s thumbnail grid into slider using slick slider? I have been trying to follow your steps but got error at the final step.

Comment by Nick on 2018-11-19 02:54:23 -0500

Hi all,

I will pay anyone $50USD to implement this into my shopify store.

I need this completed urgently.

Many thanks
Nick

Comment by Salva on 2019-02-23 21:08:03 -0500

Oh Mr. Ive done everything on this tutorial but The Slider does not appears anywhere. Give me a hand please.

Comment by Mamiluz on 2019-04-11 12:29:13 -0500

Hi, I have implemented correctly the slick carousel on my homepage of shopify but in the rest of the pages the images are still visible without the carousel. How do I fix this?Am I doing something wrong? Can someone please help me?

Comment by andrew on 2019-05-29 10:00:51 -0500

I am still having trouble with the last step! please help us out! so good up until now! fingers crossed 🙂

Comment by Anna on 2019-06-10 22:36:52 -0500

Hi there, firstly thank you for your hardwork in helping others out. Super appreciate it. I am also trying to add Slick into my shopify store which is what brought me here. However, I want to add it to my product pages and not the homepage. I know this tutorial has been around for a while but would it be too much trouble to write one for the product page too? I assume the first few steps are the same up to about step 14 or 15?

Comment by Diego Fentanes on 2019-09-25 13:55:27 -0500

Hello Matt,
This has been really usefull, the only thing is that when i add to the schema settings i get the unexpected token error, i was hoping you could help me out.

Thanks in advance

Comment by Anna A on 2019-12-05 06:04:57 -0500

You need to add include a comma after a } in your code and Then paste the code that Matt has given.

},
/*Matt’s code comes after */

Comment by Tony Phipps on 2020-02-12 07:48:54 -0500

Works perfectly 🙂 Thanks you from http://www.anvilcoffee.co.uk

Comment by Aqib Rehman on 2020-02-20 05:49:21 -0500

Hi all,
who faced issue in the last step, all of my fellows please put their upper given code in this code which writes below and after that it’s would run smoothly:
,{
“name”: “your tab name here”,
“settings”: [

]
},
lastly,
Matt, I request to you please can you write more posts about Shopify development, it’s a pleasure for us. It’s really helpful for the Shopify user because we faced that kind of situations every-day and even there is no platform to give a proper solution, I really like your website the way you explain the solution and I’m really looking for the more posts from your end about Shopify issue. What I’m looking, for now, “Shopify Collections” convert into “Shopify Collections Carousel Slider” which means Collections of Shopify shows in a website in the carousel formation, I really hard to find any solution yet. If you provide, it’s a pleasure to me.
Thank you soo much

Comment by darshan on 2020-04-24 00:30:05 -0500

thanks aqib rehman, but do we need to paste same code in settings_schema.json only or somewhere else?
token erros is gone, but still there is an unknown error stopping me saving my json file.
please help

Comment by darshan on 2020-04-24 00:50:54 -0500

Can you please elaborate point 10.
where exactly to put this code.

in theme.liquid
section file
template file?

Comment by Miriam on 2020-05-18 17:59:30 -0500

Hi! I’m having issues with the last step, I’m not sure if the theme developer block the settings_schema.json
Once I added the code and saved, I get .json errror.
Can you help me?

Comment by Emrer on 2020-06-29 04:47:28 -0500

Hey Fellas,

For me, it works at all. But I got a question. When finishing all coding things above “vendor slider” appears in the “theme settings” block. How we can make it appear in the “section” block?

Comment by Emre Arslan on 2020-06-29 11:20:08 -0500

Hey Matt,

Thanks for all codes that you shared, it worked well totally on my site. But I have got a question. When I do all steps that you showed, “Vendor Slider” appears in the Theme Settings block. How can I make it appear in the Sections block?

Thanks in advance.
Cheers

Comment by Acha on 2020-09-18 13:45:35 -0500

i need help please, i added the codes without any errors but the “vendor slider” is not appearing anywhere in my theme customization setting, i will very much appreciate any help please.

Comment by pankaj on 2021-07-24 00:12:37 -0500

Hello everyone,

I have follow all the steps but last is make an error. can anyone help me

Comment by Violeta on 2021-08-25 22:12:39 -0500

Hi 🙂
Once enabled the slider it’s appearing on every page, all across the site.
Someone knows how to solve this issue?

Thanks!

Comment by abdullah saleem on 2021-10-26 06:20:50 -0500

i need help because i am newb i dont know how which file is slick library file. i am too confused please help me

Comment by Jason on 2022-01-15 00:17:54 -0500

I have this working perfectly on my product pages. However, how can I have each product have its own set images? I assume I would need to add a section to the Products module in Shopify so when adding a new product, I can select images that would be relevant to the product.

Any ideas?

Comments#

Comment by Shawn Williams on 2017-03-11 11:04:51 -0500#

Comment by Shawn Williams on 2017-03-15 12:45:42 -0500#

Comment by ty on 2017-03-15 18:10:23 -0500#

Comment by Matt G on 2017-03-15 19:37:26 -0500#

Comment by Matt G on 2017-03-15 19:45:05 -0500#

Comment by ty on 2017-03-17 15:19:39 -0500#

Comment by Matt G on 2017-03-17 21:13:22 -0500#

Comment by ty on 2017-03-18 18:43:42 -0500#

Comment by ty on 2017-03-18 18:45:08 -0500#

Comment by ty on 2017-03-19 16:44:14 -0500#

Comment by Matt G on 2017-03-20 13:33:14 -0500#

Comment by Leizuu on 2017-04-28 04:04:06 -0500#

Comment by Leizuu on 2017-04-29 03:23:29 -0500#

Comment by ALadin on 2017-05-04 04:19:17 -0500#

Comment by Ostrich on 2017-06-03 14:40:01 -0500#

Comment by Steff on 2017-06-18 17:53:29 -0500#

Comment by Meghana h v on 2017-12-08 00:58:25 -0500#

Comment by Meghana h v on 2017-12-08 00:59:34 -0500#

Comment by marouane on 2018-01-27 19:18:05 -0500#

Comment by Daniel on 2018-03-21 17:24:17 -0500#

Comment by Sergio on 2018-04-05 22:18:12 -0500#

Comment by Sergio on 2018-04-06 09:52:44 -0500#

Comment by Kyle on 2018-05-31 12:12:43 -0500#

Comment by SPP on 2018-10-23 21:47:08 -0500#

Comment by Nick on 2018-11-19 02:54:23 -0500#

Comment by Salva on 2019-02-23 21:08:03 -0500#

Comment by Mamiluz on 2019-04-11 12:29:13 -0500#

Comment by andrew on 2019-05-29 10:00:51 -0500#

Comment by Anna on 2019-06-10 22:36:52 -0500#

Comment by Diego Fentanes on 2019-09-25 13:55:27 -0500#

Comment by Anna A on 2019-12-05 06:04:57 -0500#

Comment by Tony Phipps on 2020-02-12 07:48:54 -0500#

Comment by Aqib Rehman on 2020-02-20 05:49:21 -0500#

Comment by darshan on 2020-04-24 00:30:05 -0500#

Comment by darshan on 2020-04-24 00:50:54 -0500#

Comment by Miriam on 2020-05-18 17:59:30 -0500#

Comment by Emrer on 2020-06-29 04:47:28 -0500#

Comment by Emre Arslan on 2020-06-29 11:20:08 -0500#

Comment by Acha on 2020-09-18 13:45:35 -0500#

Comment by pankaj on 2021-07-24 00:12:37 -0500#

Comment by Violeta on 2021-08-25 22:12:39 -0500#

Comment by abdullah saleem on 2021-10-26 06:20:50 -0500#

Comment by Jason on 2022-01-15 00:17:54 -0500#