It’s no secret that we love using Shopify for e-commerce websites of all sizes. In the years since since we became Shopify Experts, we’ve found their affordable, yet feature-rich platform to be the perfect place for so many of our clients looking to sell online. As a developer, the Liquid templating language Shopify uses has become a powerful ally, allowing us to build custom, complex Shopify themes that deliver results.
At ICS, the user experience of the websites we produce always comes first, but your own experience with your site as a client comes in a close second, especially with e-commerce sites. We realize you have a lot on your plate and want the tools we build to be as easy for you to manage as possible. With Shopify, that meant taking advantage of the Customizer to allow our clients quick and easy access to make all manner of changes across their sites.
Unfortunately, the Customizer has its limits. For starters, everything within the customizer is fixed. You can’t, for example, easily add a new panel of content to the homepage. You’re limited to what has been set up in the Customizer. Or, you were. In late 2016, Shopify introduced Sections – a new addition to the Customizer allowing a much more flexible presentation for your Shopify homepage.
This fall, we took advantage of the new Shopify Sections features with an update to ’47’s homepage.
The page is broken up into a series of content panels. In the past, the order of these was relatively fixed and the number of elements within each section was also limited to what had been set up using the Customizer’s JSON syntax.
With the new Sections features, the team at ’47 is now able to create slideshows with an unlimited number of slides, unlimited rows of multi-column content, unlimited panels of Shopify Collection previews to quickly route customers to the products they’re most interested in.
In addition, once a Section has been added, you can quickly drag and drop to change its placement on the page and click to “hide” a section from view–great for quick customizations where you’d like to focus a user on a particular area without having to lose a section you’ve created and will be using again soon.
The Code Behind Shopify Sections
Shopify Sections rely on the same syntax as the Customizer’s settings_schema.json file, but expand to include the Liquid display code and any required CSS (including SCSS) and JavaScript. Always start your file with your markup as the Liquid HTML doesn’t require special block handlers. Be sure your opening element includes {{ block.shopify_attributes }}. For example:
<div class="slides" {{ block.shopify_attributes }}>
Your schema, css and javascript code Here’s a peek under the hood at making a simple slideshow like we’re using for ’47.
JSON Schema
{% schema %}
{
"name": "Slideshow",
"class": "slideshow",
"settings": [],
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [ - individual fields go here - ]
}
],
"presets": [
{
"category": "Homepage Content",
"name": "Slideshow"
}
]
}
{% endschema %}
Be sure to include the presets block in your JSON schema markup. Without this, your block won’t be exposed to the customizer for use.
CSS / SCSS
CSS is pretty straightforward. Use the stylesheet to house your CSS. If you’d like to use SCSS, just add 'scss' parameter as shown below:
{% stylesheet 'scss' %}
JavaScript
The JavaScript block is where you’ll add scripting for both the front end display of your section and any code you’ll need on the backend.
For the front end, we’re using Modal Video to display embedded YouTube videos, so we’ll add the following inside of the {% javascript %} ... {% endjavascript %} block tags.
$(".slide-video-btn").modalVideo({rel:'0', modestbranding:'1', autoplay:'1', showinfo:'0'});
We’re also using the jQuery Cycle2 library for our slideshows, which is included elsewhere in our theme. Since Shopify Sections are dynamic, we need to add an event listener to make sure that any slideshows display properly in the Customizer’s preview pane. The following would go inside the same {% javascript %} ... {% endjavascript %} block tags as above.
document.addEventListener('shopify:section:load', event => {
$('.slick-home').cycle({fx: 'fadeout'});
}, true);
Wrapping Up
Shopify Sections are a great way to create dynamic, client-editable blocks of content on your Shopify site’s homepage. Looking to build out your new Shopify site? We love Shopify and would love to help you get started! Contact us to see what a great fit we might be.