How to Create a Wildly Successful Theme Company 
Shopify Development news and articles
 
Liquid Weekly

Karl Says


Just a heads up we'll be publishing one more issue next week and then taking a short break for the holiday season before resuming in early 2023.

News & Articles

Shopify Collection SEO
Learn how to optimize your Shopify collections for more SEO traffic from Google with this free resource from Kai Davis and Double Your Ecommerce. Full of tips, strategies, and ‘do this, not that’ advice, this guide will help you better understand the why, what, and how of collection SEO.
High Performance Headless Storefronts With Hydrogen
Hydrogen has been built to power headless storefronts that are both performant and dynamic, traditionally competing priorities. In this talk from Shopify Unite 2022, we'll dig into the recent advances in web technologies that allow Hydrogen to achieve incredible performance scores. Through the power of streaming, React Server Components and edge-rendering, Hydrogen enables custom storefront developers to build fast and dynamic ecommerce experiences.
Performance First on Shopify
Web performance takes patience, skill and the ability to think outside of the box. In this Shopify Unite 2022 talk we will explore small quick changes that you can implement on your Shopify themes that will have an immediate positive impact on performance, all the way to how to approach a total theme optimization. We’ll deep dive into code and review metrics for each type of change, as well as address common misconceptions around performance testing tools.
How to create a wildly successful Theme Company
Meet the CEO of Archetype Themes. Thomas went from Developer to CEO. Learn about The founding Story of Archetype Themes and what's next to come.
What We Learned from Open-Sourcing FlashList
FlashList is Shopify’s React Native List library. This library solved a long-standing problem in the React Native community: bad list performance, by introducing high performance rendering, and removing problems like blank spacing and low fps on some devices. In this article you will see how we came up from the initial idea, defined a launch strategy, and how we executed this strategy achieving 1,000 Github stars in less than 24 hours. I will explain how important it is to empathize with the end user, how to build authority, and end up with a successful open-source library.
💰 Looking to Sell Your Shopify App?
Relay Commerce acquires and operates a growing portfolio of e-commerce software tools, including several top-rated Shopify apps. Shopify app partners love Relay because we move fast and can offer all cash – from first contact to closing in as little as a month. Wondering if we are a good match? - visit our website or email us at acquisitions@relaycommerce.io.

Code & Tools

Our Solution for Measuring React Native Rendering Times
Performance is crucial for Shopify. After we started using React Native, we had to find a way to confirm our mobile apps are fast. The solution is an open-source @shopify/react-native-performance library by Shopify, which measures rendering times in React Native apps. In this article, you’ll learn more about how the library works, how to get started, and why measuring performance is so important. 
PX or REM in CSS? Just Use REM
CSS has a lot of different units that you can choose from. In many cases, there is one unit that’s clearly better than any others. However, one question that seems to come up throughout my career is whether you should use pixels or rems on certain properties where it doesn’t seem to make a clear difference. Today I’m going to answer that question.
Debugging Tactics
When you're debugging a system, the first step is to accept that what you believe about how it works might not be true. If everything were as you believe it to be, then your code would work—but obviously that's not always the case. If you can't accept this, you might find yourself living the old saying 3 hours of debugging can save you 5 minutes of reading the docs.
A Guide To Keyboard Accessibility: JavaScript (Part 2)
This article is the second of two parts about a guide to making websites accessible to keyboard users. Here Cristian Diaz covers a toolset on JavaScript that you can mix into different components to create a great experience for keyboard users.

Changelog


API

Add Due on fulfillment to payment terms type
As of the Admin API 2023-01 release candidate, Due on Fulfillment is now a Payment Terms type available to all 3rd party apps. With this change, apps can create and update orders and draft orders with payment terms whose due date will be set upon fulfillment of the order. The newly added FULFILLMENT type value can be found on the PaymentTermsType ENUM object.
Rename authorV2 and enable author as nullable
As of 2023-01, the authorV2 field is being removed from the Storefront API. It was previously used to reference nullable author scenarios. As a result, the following changes are being made: * authorV2 will now be deprecated. * author will be used instead, and will now be a nullable field. These changes will help improve consistency of the API and avoid confusion when using these fields.

Shopify App Store

The partner dashboard now includes clear steps to earn achievements that drive merchant installs
This spring, we added app highlights to app store listings to help merchants find high quality apps and make better informed decisions. These highlights show tested indicators of merchant success, including its impact to storefront performance, how it works with other Shopify features, and integration with Admin. Starting December 1, we’re providing visibility into how to achieve these highlights within the Distribution section of the Partner Dashboard. Initial data shows that app highlights are a major factor for merchant exploration and installation.

Themes

Updates to displaying accelerated checkout buttons
Accelerated checkout buttons will now always appear in checkout even if customers have previously seen them in cart. This change will gradually roll out to eligible shops over the next two weeks.

Tip of the Week


This week's tip comes from Gary Thompson at Verdant Spark

Let's say a merchant is using product metafields to populate collapsible sections on the product template, but they really want one of those to be rendered as bullet points. A multiline metafield doesn't support html, or any other metafield - at least not in a way the merchant could use.

While you can render list tags around the data in the template Unfortunately there's currently no-way to identify if the current block in the loop's dynamic source is the metafield you want (if it's attached to the template as a dynamic bit of content it's only accessible as block.settings.content).

Here's a workaround to that problem (where product.metafields.namespace.details.value is the multiline metafield with your desired content)

// block.settings.content is already wrapped in a paragraph and span with a class by Shopify
// so we make the metafield we know we want to look the same
{﹪ assign test = '<p><span class="metafield-multi_line_text_field">' 
 | append: product.metafields.namespace.details.value | newline_to_br 
 | append: '</span></p>' 
﹪}

// if they're the same, then we can make our bulleted list
{﹪ if block.settings.content == test ﹪}
  {﹪ assign bullets = product.metafields.namespace.details.value 
    | newline_to_br | split: '<br />' 
  ﹪}
  <ul>
    {﹪ for bullet in bullets ﹪}
      <li></li>
    {﹪ endfor ﹪}
  </ul>
{﹪ else ﹪}
  // just output the content as standard
  
  
{﹪ endif ﹪}