Guides

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...

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...

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,...

In this post, I'll give a fairly detailed tutorial and explanation for how to modify a Shopify theme section to modify a link to open in the same or a new tab. This is useful when you're linking offsite and the user will likely want to return. A standard use case for this would be a press page where you're linking to publications which have mentioned your ecommerce brand, and you're using a section (optionally with blocks) to link to the articles in question.  First things first, go into the Online Store menu from the Shopify Admin Dashboard, and the themes...

Google Optimize Implementation After much experimentation and testing, here is the full setup we use to deploy Google Optimize with Shopify: Performance considerations: the flicker-prevention script works by hiding the full page content until the optimize module has injected its css or otherwise completed any modifications to the page based on a matching experiment variation. Without this script (technically, two scripts, a css style rule and a javascript to listen for an event and toggle it), the page will load and render, and then the changes from the experiment quickly applied, resulting in the "flicker" which gives the name. Now, this...