Getting started with Liquid and Theme Sections

Workshops

45 minutes remaining

1Before you begin2Test your development environment3Adding a new section file4Creating a section setting5Adding a Custom Liquid block to our section6Creating a custom text block7Testing the custom Liquid block on different pages8Displaying product tags via the custom Liquid block9Displaying metafields via the custom Liquid block10Pushing changes up to a live Shopify store11Conclusion

Before you begin

This codelab is for developers looking to learn how to work with Liquid and make customizations to existing themes. In this workshop, we'll show you how to create a theme section, work with blocks, and enhance themes by implementing new features. We'll also explore how our new interactive Liquid documentation makes it easier for you to learn how to leverage Liquid.

By the end of the this codelab you'll build a section which will look like this:

finished-section

What you’ll learn

  • How to use Liquid to customize and enhance sections of a Shopify theme.
  • How to test and preview changes to themes in a local development environment.
  • How to create new input settings for a theme section.
  • How to push changes up to a live Shopify store.

What you'll need

  • A Shopify Partners account. If you don’t have one, you can create a free Shopify partner account here.
  • A development store with demo products. If you don’t have a development store, create a new development store with pre-populated data.
  • The Shopify CLI installed and configured to be connected to their development store. If you don't have the Shopify CLI installed and configured you can learn how to set up the Shopify CLI in our developer docs.
  • The Dawn theme downloaded onto your computer. You can use the shopify theme init Shopify CLI commands to download Dawn onto your computer.
  • A text editor such as VS Code, or Sublime for editing theme files.
  • Basic experience in HTML, CSS, JSON, and Liquid is required for this Codelab.