How to leverage Shopify's "Index" feature

What I’ve been thinking about:

On the 18th September I saw an update on Shopify’s developer changelogs that I have been looking forward to for a very long time. As part of a performance update, Shopify have created the new index property which can be used to return the position of a section within it’s location.

If you are using the image_tag filter, lazyloading will now automatically be applied for any section after the first three. This means that you won’t have to update any of the code and your clients will be benefiting from this update already.

However, if you need more control, Shopify also have you covered. You can now use section.index and the 0-based index version section.index0 to return the position within the location.

This position number can then be used within your code to add conditions which will help benefit performance. For example, if you wanted an image to either be loaded lazily or eagerly.

Another solution that I’ve recently used in a project and really works well with the concept of sections everywhere, is using the section.index to determine whether the section heading should be a h1 tag or an alternative HTML tag. Previously, I would have to create a section setting that allows the client to choose, but often clients may not be aware of which type of tag they need to actually choose or this can simply get missed.

Shopify have released a full blog post about this update and you read more about it here.

3 links you can’t miss:

• World’s shortest UI/UX design course: I’m a huge fan of the Juxtopposed YouTube channel and really enjoyed their recent video that breaks down UI/UX in a very quick and informative video
• Jhey Tompkins: I’m always amazed when I see the awesomes things that developers are able to achieve with CSS. Jhey’s Twitter account is a goldmine of amazing CSS tips and demos, he is definitely someone worth following and learning from.
• Shopify Theme File Search: We all hate it when we have to edit code within Shopify’s built-in code editor, but this is definitely a game changing Chrome Extension that makes the process a lot easier. It injects a search bar into the code editor that allows you to search for specific pieces of code and even Regex

One app I like:

Locksmith

If you read my previous post about enrichiching your navigation, you’ll know that I love the Shopify app Mechanic and the features it provides. I recently found another great app made by the same team and it allows you to lock parts of your site unless the customer meets the specific requirements.

For example you can hide a range of different parts of your site, such as products, collections, prices or even variants. These can then be shown for customers based on their tags, location or even specific passcodes.

I have built similar features many times for clients using custom JavaScript but this app is definitely a nice alternative and provides more features out of the box. It also developer friendly with its Liquid and API.

The app also has the new Built for Shopify tag so you know that it is built very well and meets Shopify’s highest quality standards.