Setting Up Your Shopify Development Environment

Before you can start writing Liquid code, you need somewhere to run it. In this guide, we’ll set up a completely free development environment where you can experiment, break things, and learn without any risk to a real store.

Why You Need a Development Environment

Liquid code runs on Shopify’s servers, not in your browser. Unlike JavaScript, you can’t just open a console and start typing. You need:

A Shopify store to run your code
A theme to write your code in
A way to edit that theme’s files

The good news? Shopify provides all of this for free through their Partners program.

Creating a Shopify Partners Account

The Shopify Partners program is free and gives you access to unlimited development stores. Here’s how to get started:

Step 1: Navigate to Partners

Go to partners.shopify.com and click Join now.

Step 2: Create Your Account

You can sign up with:

An email address
Your Google account
Your Apple ID

Fill in your details. Shopify will ask about your business, but don’t worry. You can select “I’m just exploring” or similar options. This won’t limit your access.

Step 3: Verify Your Email

Check your inbox for a verification email from Shopify and click the confirmation link.

Step 4: Explore the Dashboard

Once you’re in, you’ll see the Partners Dashboard. The key areas are:

Stores: Where you’ll create development stores
Apps: For building Shopify apps (we won’t need this for themes)
Themes: For managing themes you’re developing
Resources: Documentation and learning materials

Setting Up a Development Store

A development store is a free Shopify store for testing. It has almost all the features of a paid store, but it can’t process real transactions.

Creating Your First Dev Store

From the Partners Dashboard, click Stores in the left sidebar
Click Add store
Select Create development store
Choose Create a store to test and build

Configure Your Store

Give your store a name, something like “liquid-sandbox” or “my-dev-store”. This will become part of your store URL: your-store-name.myshopify.com.

Select your development purpose:

Choose Build a new theme if you’re following along with our tutorials

Click Create development store and wait a moment while Shopify sets everything up.

Adding Sample Data

An empty store isn’t very useful for testing Liquid. Let’s add some sample products:

From your new store’s admin, go to Settings → Plan
Look for Add sample data or go to Products → Import
You can also manually create a few products for testing

For quick sample data, you can also use Shopify’s demo products:

Go to Online Store → Themes
Click Customize on your current theme
Many sections have options to show sample products when your store is empty

Tip: Create at least 3-5 products with images, descriptions, and prices. Include one product with a “compare at” price to test sale functionality.

Theme Setup for Running Liquid

Your development store comes with a theme pre-installed (usually Dawn, Shopify’s default theme). You have a few options:

Option 1: Use Dawn (Recommended for Learning)

Dawn is Shopify’s reference theme. It’s well-documented and follows best practices. For learning Liquid, it’s a great starting point because:

Clean, readable code
Good examples of common patterns
Extensive use of sections and blocks

Option 2: Build a Minimal Theme

If you want a blank slate without the complexity of a full theme, you can build a minimal theme from scratch. We cover this in a later lesson on Building a Minimal Shopify Theme.

Understanding Theme Structure

Before we dive into the code editor, here’s how theme files are organized:

theme/
├── assets/          # CSS, JS, images
├── config/          # Theme settings
├── layout/          # Base templates (theme.liquid)
├── locales/         # Translation files
├── sections/        # Modular, reusable components
├── snippets/        # Small reusable pieces
└── templates/       # Page templates (index, product, etc.)

The most important files for learning Liquid:

layout/theme.liquid - The master template that wraps everything
templates/*.json - Define which sections appear on each page type
sections/*.liquid - The actual Liquid code for components
snippets/*.liquid - Reusable pieces you can include anywhere

Working with the Code Editor

Shopify provides a built-in code editor right in your browser. No additional software required.

Accessing the Editor

From your store admin, go to Online Store → Themes
Find your theme and click the … menu
Select Edit code

You’ll see a file browser on the left and an editor on the right.

Navigating Theme Files

The files are organized into folders matching the structure we discussed:

Click a folder to expand it
Click a file to open it in the editor
Use Ctrl/Cmd + S to save changes

Creating New Files

To create a new file:

Click Add a new [file type] at the bottom of the relevant folder
Enter a filename (without the extension, Shopify adds it)
Click Create

For example, to create a new snippet:

Scroll to the Snippets folder
Click Add a new snippet
Name it (e.g., product-badge)
You’ll get snippets/product-badge.liquid

Editing Liquid Files

The code editor supports:

Syntax highlighting for Liquid
Basic autocomplete
Line numbers
Search and replace (Ctrl/Cmd + F)

When you make changes:

Edit the code
Click Save (or use Ctrl/Cmd + S)
Changes are applied immediately to your store

Important: Changes to a published theme are live immediately. For development, work on an unpublished theme copy.

Creating a Development Copy

To safely experiment:

Go to Online Store → Themes
Click … on your current theme
Select Duplicate
Name it something like “Development” or “Testing”

Now you can edit the duplicate without affecting your live theme.

Previewing Your Changes

There are several ways to see your Liquid code in action:

Live Preview in Editor

When you’re in the code editor:

Click the Preview button in the top bar
A preview window opens in a new tab
As you save changes, refresh the preview to see updates

Theme Preview URL

Every theme has a preview URL you can share or bookmark:

Go to Online Store → Themes
Click … on your theme
Select Preview

This opens your store as it would appear with that theme published.

Testing Different Pages

To test Liquid on different page types:

Navigate to the page in your preview (product page, collection page, etc.)
The URL will reflect the template being used
Or use the preview selector in the code editor

Mobile and Device Testing

To check how your theme looks on different devices:

In the theme preview, use your browser’s developer tools
Toggle device mode (F12 → mobile icon)
Or resize the browser window

The theme customizer also has device preview buttons (desktop, tablet, mobile) at the top of the screen.

Tips for Your Development Workflow

Keep Multiple Browser Tabs Open

I recommend having these tabs ready:

Code editor - for writing Liquid
Store preview - for seeing changes
Shopify documentation - for reference

Use Browser Developer Tools

Press F12 to open developer tools:

Elements: Inspect the HTML your Liquid generates
Console: Check for JavaScript errors
Network: See what assets are loading

Save Often

The code editor doesn’t auto-save. Get in the habit of pressing Ctrl/Cmd + S frequently.

Read the Error Messages

When Liquid has a syntax error, Shopify shows helpful messages:

Line numbers where errors occurred
Description of what went wrong
Suggestions for fixing the issue

What’s Next?

You now have a fully functional Shopify development environment! Here’s where to go from here:

Build a sandbox theme: Create a minimal theme for experimenting
Go local: Set up local development with Shopify CLI for a more powerful workflow
Start coding: Continue with the next lessons to learn Liquid

Your development store never expires, and you can create as many as you need. Happy coding!