Enhancing the Ecommerce Experience: Recent Updates to Shopify’s Online Store and Liquid

Yesterday at Unite, we spoke on stage about several recently added updates to our online store channel that many partners and developers will find useful. Some of these features have already been released but haven’t been formally introduced, while others are entirely new and exciting updates to our platform. We hope that they will help you simplify the code in your themes, while also creating better overall experiences for your clients and their customers. In this article you’ll learn: How to create better browsing experiences with responsive images. How to get more out of your image assets with new Liquid updates. How to access more variant information with product.options_with_values.

We’re always working to improve Shopify in ways that enhance how merchants, and their customers, experience commerce online.

During the first day of Unite, we spoke about several recently added updates to our online store channel that many partners and developers will find useful. Some of these features have already been released but haven’t been formally introduced, while others are entirely new and exciting updates to our platform.

We hope that they will help you simplify the code in your themes, while also creating better overall experiences for your clients and their customers.

Create better browsing experiences with responsive images

With the majority of traffic seen on ecommerce stores now stemming from mobile, it’s more important than ever to optimize your theme’s code for a range of handheld devices.

In bandwidth-constrained environments, images often have the most drastic effect on page load times. Not only do images make up the majority of the page weight for today's websites, but the average transfer size of images is continuing to grow.

To provide theme developers with more tools to address loading images, we’ve given you access to the height, width, and aspect ratio properties of images from Liquid. Themes can combine these with browser features, such as the srcset attribute or libraries like lazysizes, to serve images sized appropriately for the device they’re being viewed on, greatly reducing page size and overall responsiveness.

This seemingly minor update can have dramatic effects for merchant business, including an increased ability to rank in Google’s search results and a smaller proportion of users bouncing or exiting too early. It can even lead to more customers actually making a purchase during their visit.

There is no need to re-upload images to take advantage of these new properties — we’ve already taken care of updating every image hosted by Shopify. Implementing your responsive image solution will require some code changes to your theme files. Read our updated documentation to learn more about the tools we’ve made available to support responsive images.

Here’s an example of how you can use these properties in implementing srcset for a list of products on a collection page:

Here’s a great resource for learning more about working with responsive images for those interested.

You might also like: The img_url Filter Just Got 10x Better.

Greater control over images with image_picker and crop parameters

When we announced Sections for Shopify themes, we also updated how image assets are stored in the context of your client’s shop through the new image_picker setting type.

Any image asset you upload will now be placed within an asset library in a merchant’s Shopify store itself, rather than in the theme files. This update allows you to easily use image assets across various pages, blog posts, and themes — meaning if your client decides to alter their theme, or switch to a new one entirely, their favicons, logos, slideshow photos, and other image assets will still be accessible via the global asset library.

We also recently updated the crop parameters for the img_url filter to include left and right, in addition to the existing top, center, and bottom parameters. Using these parameters will allow you to ensure the image displayed perfectly matches the requested placement and offers greater flexibility with the assets you use on your clients’ stores.

Read our updated documentation to learn more about using image_picker and our updated crop parameters.

You might also like: The Beginner’s Guide to Building Shopify Themes with Sections.

Access more variant information with product.options_with_values

We’ve also recently introduced a new Liquid object, product.options_with_values, that provides you with a more convenient way to access product options. This allows you to create the markup of your product option selectors with regular HTML and Liquid, instead of with a heavy JavaScript-based method that takes time to execute and may compete with other scripts in rendering the page.

This new object has the following attributes:

• product_option.name — Returns the option’s name.
• product_option.position — Returns the option's position in the product options array.
• product_option.values — Returns an array of possible values for the option.
• product_option.selected_value — Returns the currently selected value for the option.

You can learn about using the new product.options_with_values object by reviewing our documentation.

You might also like: The Essential List of Resources for Shopify Theme Development.

Enhancing the online store, one update at a time

These are just a handful of the latest updates we’ve introduced to our online store channel, themes, and Liquid. We hope that they will help ease your development workflow when building stores for clients, and enhance the shopping experiences you create for their customers.