Skip to content

Instantly share code, notes, and snippets.

@thisislawatts
Created May 31, 2015 15:45
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save thisislawatts/8859e2fa18ed087a0acb to your computer and use it in GitHub Desktop.
Save thisislawatts/8859e2fa18ed087a0acb to your computer and use it in GitHub Desktop.
Shopify - Adding a slideshow to the homepage
{% if settings.homepage_slideshow %}
<section id="HomepageSlideshow" class="homepage--slideshow">
<ul class="slides">
{% if settings.homepage_slide_show_1 %}
<li data-id="1">
<img src="{{ 'homepage_slide_image_1.jpg' | asset_url }}" alt="{{ settings.homepage_slide_title_1 }}"/>
<a href="{{ settings.homepage_slide_title_1 }}" class="vac">
<h1>{{ settings.homepage_slide_title_1 }}</h1>
<h2>{{ settings.homepage_slide_text_1 }}</h2>
</a>
</li>
{% endif %}
{% if settings.homepage_slide_show_2 %}
<li data-id="2">
<img src="{{ 'homepage_slide_image_2.jpg' | asset_url }}" alt="{{ settings.homepage_slide_title_2 }}"/>
<a href="{{ settings.homepage_slide_title_2 }}" class="vac">
<h1>{{ settings.homepage_slide_title_2 }}</h1>
<h2>{{ settings.homepage_slide_text_2 }}</h2>
</a>
</li>
{% endif %}
{% if settings.homepage_slide_show_3 %}
<li data-id="3">
<img src="{{ 'homepage_slide_image_3.jpg' | asset_url }}" alt="{{ settings.homepage_slide_title_3 }}"/>
<a href="{{ settings.homepage_slide_title_3 }}" class="vac">
<h1>{{ settings.homepage_slide_title_3 }}</h1>
<h2>{{ settings.homepage_slide_text_3 }}</h2>
</a>
</li>
{% endif %}
{% if settings.homepage_slide_show_4 %}
<li data-id="4">
<img src="{{ 'homepage_slide_image_4.jpg' | asset_url }}" alt="{{ settings.homepage_slide_title_4 }}"/>
<a href="{{ settings.homepage_slide_title_4 }}" class="vac">
<h1>{{ settings.homepage_slide_title_4 }}</h1>
<h2>{{ settings.homepage_slide_text_4 }}</h2>
</a>
</li>
{% endif %}
{% if settings.homepage_slide_show_5 %}
<li data-id="5">
<img src="{{ 'homepage_slide_image_5.jpg' | asset_url }}" alt="{{ settings.homepage_slide_title_5 }}"/>
<a href="{{ settings.homepage_slide_title_5 }}" class="vac">
<h1>{{ settings.homepage_slide_title_5 }}</h1>
<h2>{{ settings.homepage_slide_text_5 }}</h2>
</a>
</li>
{% endif %}
</ul>
</section><!-- #HomepageSlideshow -->
{% endif %}
[
{
"name": "Slideshow",
"settings": [
{
"type": "checkbox",
"id": "homepage_slideshow",
"label": "Display slideshow"
},
{
"type": "header",
"content": "Slide 1"
},
{
"type": "checkbox",
"id": "homepage_slide_show_1",
"label": "Display?",
"default": true
},
{
"type": "image",
"id": "homepage_slide_image_1.jpg",
"label": "Slide image",
"max-width": 5000
},
{
"type": "color",
"id": "homepage_slide_1_border",
"label": "Menu tint",
"default": "#ccc"
},
{
"type": "text",
"id": "homepage_slide_title_1",
"label": "Title"
},
{
"type": "text",
"id": "homepage_slide_text_1",
"label": "Call to action text"
},
{
"type": "text",
"id": "homepage_slide_link_1",
"label": "Call to action URL"
},
{
"type": "header",
"content": "Slide 2"
},
{
"type": "checkbox",
"id": "homepage_slide_show_2",
"label": "Display?",
"default": true
},
{
"type": "image",
"id": "homepage_slide_image_2.jpg",
"label": "Slide image",
"max-width": 5000
},
{
"type": "color",
"id": "homepage_slide_2_border",
"label": "Menu tint",
"default": "#ccc"
},
{
"type": "text",
"id": "homepage_slide_title_2",
"label": "Title"
},
{
"type": "text",
"id": "homepage_slide_text_2",
"label": "Call to action text"
},
{
"type": "text",
"id": "homepage_slide_link_2",
"label": "Call to action URL"
},
{
"type": "header",
"content": "Slide 3"
},
{
"type": "checkbox",
"id": "homepage_slide_show_3",
"label": "Display?",
"default": true
},
{
"type": "image",
"id": "homepage_slide_image_3.jpg",
"label": "Slide image",
"max-width": 5000
},
{
"type": "color",
"id": "homepage_slide_3_border",
"label": "Menu tint",
"default": "#ccc"
},
{
"type": "text",
"id": "homepage_slide_title_3",
"label": "Title"
},
{
"type": "text",
"id": "homepage_slide_text_3",
"label": "Call to action text"
},
{
"type": "text",
"id": "homepage_slide_link_3",
"label": "Call to action URL"
},
{
"type": "header",
"content": "Slide 4"
},
{
"type": "checkbox",
"id": "homepage_slide_show_4",
"label": "Display?",
"default": true
},
{
"type": "image",
"id": "homepage_slide_image_4.jpg",
"label": "Slide image",
"max-width": 5000
},
{
"type": "color",
"id": "homepage_slide_4_border",
"label": "Menu tint",
"default": "#ccc"
},
{
"type": "text",
"id": "homepage_slide_title_4",
"label": "Title"
},
{
"type": "text",
"id": "homepage_slide_text_4",
"label": "Call to action text"
},
{
"type": "text",
"id": "homepage_slide_link_4",
"label": "Call to action URL"
},
{
"type": "header",
"content": "Slide 5"
},
{
"type": "checkbox",
"id": "homepage_slide_show_5",
"label": "Display?",
"default": true
},
{
"type": "image",
"id": "homepage_slide_image_5.jpg",
"label": "Slide image",
"max-width": 5000
},
{
"type": "color",
"id": "homepage_slide_5_border",
"label": "Menu tint",
"default": "#ccc"
},
{
"type": "text",
"id": "homepage_slide_title_5",
"label": "Title"
},
{
"type": "text",
"id": "homepage_slide_text_5",
"label": "Call to action text"
},
{
"type": "text",
"id": "homepage_slide_link_5",
"label": "Call to action URL"
}
]
}
]
@vanleuven
Copy link

I tried this but as a section file that I can include in the index.liquid file. but i'm getting...
Status: 422 Unprocessable Entity
Errors: Invalid JSON: unexpected token

Any ideas?

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment