60 minutes remaining

Building a Custom Section

60 minutes remaining

1Before you begin 2Download your theme 3Setting up your local environment 4Creating a new section and using it 5Adding settings to a section 6Accessing settings 7Adding JavaScript 8Conclusion 9For the curious

Before you begin

This Codelab teaches you how to create a section for an existing Shopify theme. For this Codelab we will be building a countdown section. This is an often used feature that is provided by many apps on our store, but can actually be implemented as a section as well.

Timer running in editor

Prerequisites

Basic experience in HTML, CSS and Javascript are required for this Codelab. Some experience with Liquid (the language in which Shopify templates are written in) is helpful but certainly not mandatory.

Learning objectives

Use your local development environment for working on themes
Add a custom section to existing themes
Make section configurable via settings in the theme editor

What you'll need (Shopify Account Requirements)

If you don’t have one, create a Shopify partner account.
If you don’t have one, create a Development store where you can install and test your theme.

What you'll need (Libraries and Tools)

You have installed Node.js which is required to ...
... install the Shopify CLI.