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

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 themajority 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 doimages make up the majority of the page weightfor today's websites, but the average transfer size of images iscontinuing to grow.

To provide theme developers with more tools to address loading images, we’ve given you access to theheight,width, andaspect ratioproperties of images from Liquid. Themes can combine these withbrowser features, such as thesrcsetattribute or libraries likelazysizes, 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, includingan increased ability to rank in Google’s search resultsanda smaller proportion of users bouncing or exiting too early. It can even lead to morecustomers 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. Readour updated documentationto learn more about the tools we’ve made available to support responsive images.

这里有一个例子如何使用这些改过的ies in implementingsrcsetfor a list of products on a collection page:

Here’s a great resource for learning more aboutworking with responsive imagesfor 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 newimage_pickersetting type.

你上传的图像资产将被放置in 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 thecropparameters for theimg_urlfilter to includeleftandright, in addition to the existingtop,center, andbottomparameters. 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 usingimage_pickerandour 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 newproduct.options_with_valuesobject by reviewingour 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.