If you’re a Shopify theme developer, you might already be well acquainted with Shopify snippets. Snippets are liquid files containing reusable code that we can include anywhere in our theme. When it comes to code organization, snippets are a theme developer’s best friend – but the benefits don’t stop there!
5 Reasons to Love Shopify Snippets
- Keeps our code DRY
- Makes it easier to work in teams
- Increases efficiency and reduces development time
- Improves readability of template files
- Makes it easy to conditionally load code only where its needed
Snippets also give us the ability to pass along variables, which prove to be remarkably advantageous when building our themes. Here are a few quick tips that illustrate the effectiveness of using variables with snippets.
Tip #1: Style Snippets Dynamically with Variables
For this example, imagine that the position and style of our search bar is different on mobile and desktop. Let’s say that on desktop it’s inside the header and on mobile it’s inside the mobile nav. We can handle this by writing the search snippet code once and including it with a variable for styling.
Include the snippet in the header with the “layout” variable defined as desktop:
{% include 'search', layout: 'desktop' %}
Include the snippet in the mobile nav with the “layout” variable defined as mobile:
{% include 'search', layout: 'mobile' %}
Create one snippet (search.liquid) and reference the layout variable in our classes:
Style it dynamically with CSS:
.search {
// common styles go here
}
.search--mobile {
// mobile styles go here
}
.search--desktop {
// desktop styles go here
}
Tip #2: Use a Variable to Determine Which Content is Shown
For this example, imagine we have a snippet that includes a linklist. This snippet is included in both the header and the footer snippets, but with one small difference. In the footer we’d like to show the linklist title, but in the header we want to hide it.
Include the snippet in the header with the “view” variable defined as header:
{% include 'collection-list', view: 'header' %}
Include the snippet in the footer with the “view” variable defined as footer:
{% include 'collection-list', view: 'footer' %}
Check the “view” variable and only show the list title if its footer:
{% if view == 'footer' %}
{{ linklists.collection-nav.title }}
{% endif %}
Tip #3: Use Variables as Data Attributes
Let’s say we have multiple slider galleries on our site and we’re using a jQuery plugin to handle the functionality. When the slider is initialized, it takes a number of options to determine how it looks and functions. With snippet variables, we can use one snippet for every slider by including it with variables that get turned into data attributes, which we then use in our slider initialization.
Include the snippet with a variable for each data attribute. In this example, we are using the product images and passing along variables for slider dots, arrows, and infinite – which may or may not be shown depending on the gallery:
{% include 'gallery',
gallery: 'main',
images: product.images,
dots: false,
arrows: true,
infinite: true %}
Create one gallery snippet (gallery.liquid), grabbing the variables and turning them into data attributes:
{% for image in images %}
{% endfor %}
Use these data attributes in our JavaScript when we initialize the sliders. In this example, we’re using Slick Slider to handle the slider functionality:
var $gallery = $('.js-slick-gallery');
if ($gallery.length) {
$gallery.each(function() {
var $this = $(this),
slider_dots = $this.data("dots"),
slider_arrows = $this.data("arrows");
slider_infinite = $this.data("infinite");
$this.slick({
arrows: slider_arrows,
dots: slider_dots,
infinite: slider_infinite
});
});
}
As you can see, we can get super creative with how we use snippets in our themes. These are just a few ideas to get the creative juices flowing. Give them a try and see how you can build on them in your own themes!
The post Shopify Snippets Quick Tips for Your eCommerce Store! appeared first on Demac Media.