Issue 111 - Liquid vs headless: A look at real user web performance

  • Quick error reporting with Val Town | Mike Fallows

    Recently I needed to quickly inspect a script running in the ‘Additional Checkout Scripts’ portion of the order thank you / status page for a Shopify client. These are copy-paste scripts and there’s no easy way to manage them, and it’s particularly difficult to test them properly without running real orders. The client was seeing some odd data in their reporting and suspected that there might be some occasional errors with one of the scripts, but it was hard to work out when or why this might be happening.

    Mike Fallows

  • A quick introduction to CSS @scope – Bram.us

    Have you heard about #CSS @scope? It’s an upcoming way to scope the reach of your CSS selectors, allowing you to move away from methodologies such as BEM because you no longer need to name those in-between elements.

    Bramus

  • Web Components Accessibility FAQ

    When I first learned about web components, I had a lot of questions, especially regarding accessibility. While I found answers to many of them, I didn’t know everything I would’ve wanted to know. I wish I had a catalog of all the essential questions and answers when I started.

    Manuel Matuzović

  • Create Upsell Offer using Checkout UI Extension in Shopify

    Create a product upsell offer using Checkout UI Extensions in Shopify. Follow along step by step process as Saad builds this checkout UI extension using React.

    Saad Saif

  • How to Create Custom Options on the Shopify Product Page Without Using an App

    In this quick tutorial, I'll walk you through the process of adding custom product options to your Shopify store. You'll learn how to enable custom file uploads, implement custom text fields, and offer fully customizable products.

    Amine Ammari

  • Prefill a Shopify discount with the Fetch API

    There are also some cases where traffic may already be inbound to a specific page and there’s no opportunity to use the /discount/ link directly. For that case (and the one above) I set up a simple section that a client can add to any page to make a ‘visit’ invisibly with a fetch request and have the discount prefilled.

    Mike Fallows

  • Liquid vs headless: A look at real user web performance

    Thinking about going headless? You’re not alone! It’s a hot topic in ecommerce these days, and there’s a ton to consider when making your decision. The reality is that the list of pros and cons looks different depending on the lens you’re using. Do you care most about features? Flexibility? What are your goals?

    Sia Karamalegos

  • How Avenue theme improved its real user performance

    The newest version of the Avenue theme achieves a 25% improvement in Largest Contentful Paint and a 24% in Cumulative Layout Shift at the 75th percentile. It is a great result of our collaboration with the theme author – Red Plug Design Co.

    Mateusz Krzeszowiak

  • How to customize Shopify with extension-only apps

    With extension-only apps, it’s easier and faster than ever to build powerful customizations for your Shopify store. Powered by a new extensibility platform that’s built on app extensions and metafields, extensions are deeply integrated with the rest of Shopify so they’re easy to manage, performant, secure, and upgrade-safe.

    ShopifyDevs