Guides

How to add line breaks in Shopify custom sections and settings on a per viewport basis

Posted by Cameron Shaw on

How to add line breaks in Shopify custom sections and settings on a per viewport basis

When building custom theme sections, one of the main advantages is that you and your team can go in and modify site content directly, without the need for a developer or any code changes. (this has always been true for basic pages, using the rich text editor (“RTE” or “WYSIWYG editor”), but the sections feature expanded this capability to include custom content types in custom layouts. There are two types available for text fields: the plaintext, and aptly named, “text”, and a lightweight RTE field, called “richtext”.  The richtext field allows for italics, bold, and links. Additionally, the output is always wrapped...

Read more →

Bulk Image Optimization in Shopify

Posted by Cameron Shaw on

When considering the performance of Shopify sites, images are often one of the main contributors to poor load times. In this tutorial, I'll outline our process for optimizing all the images which are part of the theme assets. a note on images in Shopify: Images in Shopify can be stored in three locations. There are backend images, associated with admin-accessible "objects" like blog posts, collections, products, and variants. Next, there are images entered through the Theme Editor or "Customizer", which can also be uploaded and managed under Settings > Files. Lastly there are theme images, which are pulled from the theme's asset...

Read more →

Raising Pagespeed Insights score from 19 to 80 on a custom Shopify site

Posted by Cameron Shaw on

Recently we were contracted by an agency for a performance optimization project for a newly created site on Shopify. We had some great results, which we'd like to share.  Audit We began with a performance audit, analyzing how the page loads and renders for various devices and under various network conditions. The goal is to identify all the areas of the site which are contributing to poor performance, and then rank them by two factors: by the magnitude of the negative performance impact, and by the difficulty of correcting or changing them. This allows us to begin with the lowest hanging...

Read more →

A/B Testing Server Side using Shopify and Google Optimize

Posted by Cameron Shaw on

A tutorial to set up server-side google optimize A/B tests in Shopify. Overview: We want to manually put people in the experiment and serve two different experiences for a page, but still use google optimize to track the results. Server-side A/B tests in google optimize are possible. This guide assumes you're using the automatic implementation of Google Analytics, and adding the google optimize module through the additional javascript section in Online Store > Preferences. The only challenges here are we need to determine whether a visitor is in the control group or the variant group prior to the google analytics...

Read more →

How to combine SCSS & CSS Files

Posted by Cameron Shaw on

If you're looking in pagespeed insights or in a critical render path analysis, you may see that there are many scss and css files being called prior to your initial render. Sometimes it makes sense to combine these into a single or several files. In general, you want to have one fast first render that paints the above the fold content.  In the ideal world, we'd inline the critical css and dependency free (vanilla) javascript for a fast first render. However, when it comes to most modern websites that continue to blur the line between web pages and web apps,...

Read more →