How to Get the Most Out of Shopify’s

Following the release of Narrative, Shopify theme developers.  Now use these tools to update our own themes, like Debut, Brooklyn, and others. For example, Debut previously displayed images on a blog.  Page with a fixed size of 345 pixels wide. However, now we can configure a range of different sizes.  That the browser will choose, according to the size of the image’s container. Here again, you can see that the lazysizes plugin is preloading.  A smaller image before the correct image.  Based on the screen size. Image Audit. When you’re building responsiveness into your custom themes.  You should first audit your themes to see where responsive images.  Make sense and avoid excessive complexity. On pages where very large images.  You can keep the dimensions of an image fixed.

An example of this could be a cart page where the images are not very large. Responsive images would only be necessary when viewing large images, such as in slideshows. Making informed decisions about where and when images should Morocco B2B List be responsive will help you develop the most optimized themes possible. You may also be interested in: Improving the Ecommerce Experience: Recent Updates to Shopify’s Liquid and Online Store. more learning Here’s a great list of resources for those interested in learning more about working with responsive images: For those interested. Our own blog details some of the other recent Liquid updates. W3 Schools provides more information on the use of srcset.

New Types of Pricing Rules

The Kissmetrics blogs describe some issues related to loading time. Another revealing article outlining the challenges of responsive imaging. stay responsive The examples we looked at earlier show how responsive images can be achieved with Shopify themes. Implementing similar approaches in your own custom themes will improve the user experience for the end customer, regardless of the type of device they are using. New additions to Liquid will allow you to provide customers with better stores, however it is not a “one size fits all” solution. By carefully approaching each page and considering how images should appear on smaller screens, you can develop your own responsive image strategy. How do you use image responsiveness to improve website design? Tell us in the comments section below.


They may want to consider making sure their images are as square as possible. This will ensure that images are not cropped when displayed on Facebook. You can also set the image dimensions, and by default Slate will display images at 1024 x 1024 pixels. Also included are Twitter-specific tags to define the site. Twitter card type, title, and description the page section theme. So that it applies to all pages on the website: Open Graph tags: includes social meta tags You can view the full Slate snippet social-meta-tags.liquidfrom our GitHub repository and use it as an example of how you can set up your own Open Graph tags. You may also be interested in: Getting Started with Slate in 4 Simple Steps.

Some Ways the Pricing Rules

Limitations of Open Graph and Shopify tags.  Since sections were introduced in Shopify themes, this new structure means that snippets can no longer access a store logo. There is no variable og_imagein the Open Graph base tags at the top of the social-meta-tagsSlate snippet, as there is no data to extract for a store’s default image. This means that when a normal page, such as an About Us page, is shared on Facebook, an image may not display. One solution to this is to encode a tag og_imagein the social meta tag snippet that references an image. This image could be your client’s logo that you manually uploaded in the Files section of the manager. By adding a tag that links to a specific image, you can ensure that your client’s logo appears on pages that normally can’t access an image.

Leave a comment

Your email address will not be published.