#Shopify add custom font to font picker code#
All the other logic for the product page, such as for example the one to display the correct image for each variant, is in the global.js file which is loaded in the theme.liquid file and therefore available throughout the whole theme.Īs in Debut, JavaScript code can also be loaded from within the liquid section file when appropriate, and this is the case for example for the product-recommendations section. With regards to JavaScript, we see that there is a single file product-form.js loaded and then, lower down in the page, a javascript file to render 3D modules that is conditionally loaded if a 3D model is available. The code also sets the width and the height of the image to improve accivibily and the srcset and size which will allow the user agent to select the appropriate image according to the user preferences or bandwidth conditions. As you can see from this code snippet taken from the image-width-text section, the loading=lazy attribute is set for each image directly in the HTML. In Dawn the loading attribute is added directly to the image tags, instead of using an external JavaScript library like lazysites, which adds extra loading time to the page.
One example is the implementation of lazy loading, which tells the browser to load only the images immediately visible to the user and then load the other ones when they are scrolled into view. Since it represents the reference theme for new and existing theme developers, Dawn is a great example of an ultra light theme, and one of the ways it uses to optimise the performance speed is by using JavaScript only when absolutely necessary.Īccording to the theme documentation, Dawn "leverages the latest web browsers to their fullest, while maintaining support for the older ones through progressive enhancement-not polyfills". Now that the Official Theme Store is open again, Shopify has also introduced very high standards for the themes submitted, which in order to be approved need to achieve a Lighthouse score of above 60 across the home page, product page, and collection page.
#Shopify add custom font to font picker how to#
In the past few years, Shopify placed a strong focus on online stores' speed optimisation, by developing its own Online Speed reporting tool (visible below the published theme in every store), and by putting together a lot of documentation and resources on how to optimise existing themes. Theme performanceis key for merchants: it directly influences conversion rates, it generates repeat business and it affects the store's ranking in the search engines.
0 kommentar(er)
