Skip to content

Instantly share code, notes, and snippets.

@bmodena
Last active October 19, 2022 02:29
Show Gist options
  • Save bmodena/a0dacd0492f3a2266283 to your computer and use it in GitHub Desktop.
Save bmodena/a0dacd0492f3a2266283 to your computer and use it in GitHub Desktop.
Shopify Flexslider Integration with theme settings
<!-- add to head of your theme.liquid after moving the files into the assets folder | https://www.woothemes.com/flexslider/ -->
<!-- add only if you theme is not already including Jquery-->
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' | script_tag }}
<!-- FLEX Slider css and .js -->
{{ 'flexslider.css' | asset_url | stylesheet_tag }}
{{ 'jquery.flexslider.js' | asset_url | script_tag }}
<!--
add to schema json
__________________________ -->
{
"name": "Homepage Slideshow",
"settings": [
{
"type": "image",
"id": "slide_1.jpg",
"label": "Slideshow Image 1",
"max-width": 1680,
"max-height": 100
},
{
"type": "image",
"id": "slide_2.jpg",
"label": "Slideshow Image 2",
"max-width": 1680,
"max-height": 100
},
{
"type": "image",
"id": "slide_3.jpg",
"label": "Slideshow Image 3",
"max-width": 1680,
"max-height": 100
}
]
}
<!--
Create a slider snippet | flexslider-snippet.liquid
__________________________ -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.home-slider').flexslider({
animation: "fade",
animationLoop: true,
pauseOnHover: false,
touch: false,
controlNav: false
});
});
</script>
<div class="home-slider flex-container">
<div class="flexslider">
<ul class="slides">
<li>
{{ 'slide_1.jpg' | asset_url | img_tag: 'slide 1' }}
</li>
<li>
{{ 'slide_2.jpg' | asset_url | img_tag: 'slide 2' }}
</li>
<li>
{{ 'slide_3.jpg' | asset_url | img_tag: 'slide 3' }}
</li>
</ul>
</div>
</div>
<!--
include snippet in template
__________________________ -->
{% include 'flexslider-snippet' %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment