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
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
right, in addition to the existing
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
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.
Learning Liquid: Getting Started with Shopify Theming
Get this free guide and learn practical tips, tricks, and techniques to start modifying, developing, and building Shopify themes.
By entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.