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 150×80 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.

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

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

  2. Now extract the files somewhere.
  3. Now login to your Shopify Store.
  4. Go to Online Store -> Themes -> Edit HTML/CSS
  5. Now you will want to scroll down to Assets.
  6. 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
  7. Modify slick-theme.css and change the font path (remove ./font/)
    src: url('./fonts/slick.eot');

    Now becomes

    src: url('./slick.eot');
  8. 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 %}
  9. 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.

  10. 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 %}
  11. 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;
    }
  12. Now for the final change. Go back to your shopify admin interface, then to online store -> themes -> customize theme
  13. Scroll down to the config section
  14. Open up your copy of ‘settings_schema.json’
  15. 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
     }
  16. Now save the file.
  17. Now open your customize theme (online store -> themes -> customize theme) and go to where you setup the vendor slider.
  18. Add your images to the slider and the title / etc.
  19. Click save
  20. 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.

 

16 Comments

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

  2. 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!

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

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

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

  6. 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!!

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

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

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

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

  11. 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”
    }
    ]
    }
    ]

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

  13. Thanks for keeping me slick <3

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


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *

Name *
Email *
Website