The average Shopify merchant spends hours a week revising, editing, updating, and improving their store, its features, their offers, and discounts. That’s a lot of time that could be spent running the business.
Today we’re announcing 7 improvements to Shopify’s Online Store that make it easier to create fast, high-converting, content-rich storefront experiences.
Explore improvements to Shopify’s online store:
Custom data in the Online Store
Tailoring content across your online store is hard. Creating a unique banner for each of your collections or highlighting different features across your products can’t be done easily. You need to manually recreate your content across your store and at times need to directly edit code. This not only takes time, but is complicated to manage and introduces the possibility of mistakes and bugs, impacting your site’s performance – and your conversions and revenue.
Using Shopify’s new metaobjects feature (part of the Custom Data offering), you can now create and manage reusable custom content for your store. Metaobjects can be used to introduce entirely new content models (like raw materials, designer profiles, store events) or to further extend existing Shopify components with richer content (e.g. product highlights, collection lookbooks, size guides). Available within the Online Store, metaobjects enable you to create a unique storefront experience for each of your products, collections, and pages, while using the same online store template.
If you sell internationally, metaobjects work like all other content within your storefront and can be translated for each of your markets in the Shopify Translate and Adapt app.
For more complex content management needs, you can also use a third party content management system and easily integrate it with Shopify using our fast, secure, and robust APIs. We’ve also worked with Sanity to make it really simple to connect your custom content models into Shopify with the Sanity Connect App. Sanity users can now sync their product and collection data to and from Sanity, and use it to power their Liquid storefront.
Learn about Sanity Connect for Shopify
Sell in more markets in less time
Selling globally means you need to translate and adapt your online store to a new market, which can also take a lot of time, effort and energy.
Shopify now offers the Translate & Adapt app to easily engage more customers with regional, seasonal, and cultural relevance by localizing your store content across markets. Use a side-by-side editor to add, edit, and review translated content, and adapt content to reflect spelling and messaging variations between markets. You can automatically translate up to two of your languages completely free.
Discover the Translate & Adapt App
Easily add and preview CSS in your theme
Customizing your store to showcase your brand means you might need unique styling that is not configurable through the Theme Editor. You can now easily add custom CSS to your online store theme without editing any theme files.
Adding CSS to your theme directly in the Theme Editor unlocks an additional layer of customization, like changing specific elements of your theme’s appearance, layout, and more. You’ll have more control and be able to instantly preview your changes. Bonus, your theme will be eligible for seamless theme version updates and it will transfer your custom CSS automatically.
Liquid intelligent code completion
Programming in Liquid is a skill many Shopify store owners and specialized developers have built over time. In December 2022, we launched new code completion technology that helps developers autocomplete code, saving valuable development time.
As you type your code, in Shopify’s CLI or your local code editor, we suggest context-aware code autocompletion and in-line documentation. Our suggestions use type-inference and smart filters to save you trial-and-error, and back-and-forths between code and documentation.
We’ve also improved the Prettier plugin that automatically adds style consistency to your Liquid. It’s now available across code editors and in the admin code editor. So you can spend less time discussing styles in code review and more time building themes. All you have to do is press save and have your code instantly formatted.
Header and footer customizations without code
Customizing sections across all parts of your theme is key to making your store fully represent your brand. Until now, your store’s header and footer were heavily restricted within the Online Store Editor. Editing your theme’s code was the only way to add, remove, or reorder these sections, and it wasn’t possible to add app blocks or new sections to these areas.
By introducing section groups, we’re unlocking the ability to add, remove, hide, and reorder sections and app blocks within the header and footer area via the theme editor.
Improving how images display across devices
Your shop is full of high-quality, carefully crafted images that buyers see differently, depending on what screen they’re using (their phone, tablets, computer). The last thing you want is for your images to be cut off or cropped in the wrong way.
The new focal points feature allows you to select the most important point on an image for viewers. Themes can then use this data to position the image based on the focal point, ensuring the most important part is always visible in all contexts.
Speeding up load times with Automatic Image Optimization
Page load speeds and image quality directly impact the buyer experience, merchant conversion rates, lifetime customer value, and cost of acquisition. Shopify serves billions of images per month. Image quality settings and optimized format selection are key factors in helping your Shopify store perform better.
We know that high quality images that favorably and accurately represent your products, lead to greater conversion. We also know that the faster a merchant's storefront loads the more likely buyers will stick around and complete their purchases, also leading to higher conversion.
In December 2022, we introduced technology that automatically—without any action on your part – replicates and renders your images in our cache. It then automatically delivers the buyer the highest quality and lowest file size image in real time on your site. This improves your store’s speed and increases your conversion rates. File types currently supported include AVIF, JPEG-XL, SVG, JPEG, and WebP.
At Shopify we make it our business to make online business owners successful. We’ll never stop trying to make it as easy as possible for you to build and run your business.
