Announcing Online Store 2.0
Online Store 2.0 is an end-to-end overhaul of how themes are built at Shopify, launched June 2021. While the information in the following article is still correct, it doesn't account for Online Store 2.0 best practices, and may not include references to recent features or functionality. To learn more about how to build with Online Store 2.0, visit our updated documentation.
Visit docsWhether you are starting out with Shopify Themes or are a seasoned Shopify Expert, there are always new and useful things to learn that will help with your everyday theme development. With so much content available at your fingertips, one of the problems (at least for me) is knowing where to start.
With that in mind, we have pulled together a structured list of articles, videos, and online courses to help you on your way. As Shopify changes, we’ll constantly be adding new items to keep the list up-to-date and fresh. We want to provide you with our best and most accurate resources on theme development and production. I strongly recommend you take a moment to bookmark it for future reference.
Naturally, some articles will touch on advice and guidance from others, but each one is packed full of content that will help you learn more about developing themes for the Shopify platform. You can start at the beginning, or dive into an appropriate section — the choice is yours.
Finally if you have an article that should be included in the list, please let us know in the comments.
Are you working with Visual Studio Code for development? Check out our article on thebest Visual Studio Code extensions.
Online theme development courses
To build themes, you need to understand Shopify’s core features and functionality as well as the front end development tools and frameworks. If you are brand new to the Shopify platform, the following structured online courses will take you from newbie to expert in four and a half hours.
- Shopify Essentials for Web Developers: From Store Setup to Custom Themes(3h 2min)
- Advanced Shopify Theme Development(1h 34min)
Working with Shopify Themes
Themes are the basis of every Shopify store. These articles will introduce you to the structure of a Shopify theme, explain when each template is rendered, give you a pre-launch checklist, and discuss tools that can help with your Shopify development workflow.
- An Overview of Liquid: Shopify's Templating Language
- Shopify液体代码示例
- 4 Essential Tips for Building Your First Shopify Theme
- Shopify Checklist: Things to Do Before the Site Goes Live
- 4 Advanced Shopify Theming Techniques to Add to Your Workflow
- 10 Top Questions About Developing Shopify Themes Answered
- [Video] Getting Started with Shopify Themes
Learning Liquid: Getting Started with Shopify Theming
Get this free guide and learn practical tips, tricks, and techniques to start modifying, developing, and building Shopify themes.
By entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.
Your Shopify theme toolkit
开源工具加快和简化Shopify Theme development.
- 3 Simple Steps for Setting Up a Local Shopify Theme Development Environment
- The 8 Best Free Shopify Resources and Tools for Front-End Developers
- ThemeKit — cross-platform tool for building Shopify Themes
- Shopify Liquid Cheat Sheet
- A Beginner's Git Guide with Shopify
- How to Create Your Own Slate Starter Theme
- Shopify液体代码示例
- A Comprehensive Guide to Using Slate
Designing for Shopify
Great ecommerce website design is about so much more than aesthetics. These articles focus on the design and UX of building Shopify Themes. Here you can find a list of articles to help you design home pages, product pages, and cart templates, and a free CSV file to get your development store up and running.
- Add Products Faster With Product CSVs
- The Benefits of Using a UI Kit
- An In-Depth Look Into Designing a Shopify Theme
- Creating Dynamic Color Schemes with Theme Options and Presets
- Building a Clickable Call-to-Action Button for Your Shopify Theme
- Best Practices for Developing Scalable (and Sustainable) Shopify Themes
- Build an Eye-Catching Non-Rectangular Header Design
Grow your business with the Shopify Partner Program
Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Sign upLiquid template language
Liquid is the bridge between a store’s data and its theme templates. These articles will cover the basics of how to use Liquid in Shopify Themes. If you are brand new to Liquid, start with An Overview of Liquid to familiarize yourself.
- An Overview of Liquid: Shopify's Templating Language
- How to Use Liquid's "case/when" Control Tags in Shopify Themes
- The Beginner’s Guide to Building Shopify Themes with Sections
- Using Liquid on the Order Status Page
- How to Use Math Filters with Liquid
Liquid templates
From in-depth looks at individual templates to discussions on how you can leverage the power of alternate template and layout files, these articles will help you take your theme building to the next level.
- Liquid Cheat Sheet
- The product.liquid template
- How to Use all_products in a Shopify Theme
- The Power of Alternate Layout Files in Shopify Theme Development
- How to Use Alternate Templates in Shopify Theme Development
- How URLs Map to Shopify Templates
- Customize Shopify Password Pages With the password.liquid Template
- How to Use Liquid to Create Custom Landing Page Templates
- How to Craft the Best 404 Pages for your Clients
- How to use Liquid to Customize Shopify Theme Blog Templates
Shopify Theme images
Images are the key to a great ecommerce experience. There are plenty of ways to customize images in Shopify — from clever use of variant images to Liquid filters, which allow you to crop and resize.
- How to Manipulate Images with the img_url Filter
- Designing with SVG: How Scalable Vector Graphics Can Increase Visitor Engagement
- How to Customize the img Element in Shopify Themes
- How to Work With Images in Shopify
- How to Update a Theme to Use Variant Images
- Building Icon Systems With SVG
- Using Placeholder Images for Products with the placeholder_svg_tag filter
- Build Unique Customer Experiences Using Shopify's API
Snippets
Leverage the power of the DRY (Don’t Repeat Yourself) principle in your themes by using snippets effectively — these articles will teach you how.
- GitHub repo built by member of Shopify staff, Jason Bowman
- Shopify Snippets Quick Tips
- Tips for Using Snippets in Your Shopify Theme
- How to Improve Your Theme Development Workflow
- Announcing Shopify Liquid Code Examples for Partners
Link lists, menus, and navigation
There’s a lot more to menus than you might think. From information architecture to SEO benefits, learn how to extract maximum potential from the humble “link list”.
- The Power of Link Lists
- Understanding Shopify Theme Styles and Presets With settings_data.json
- 提示和故障诊断ing for Using the new Nested Navigation In Shopify
- [Video] Shopify Navigation Tutorial 2018 How to Create Drop Down Menus
- Finding a Balance Between SEO and Amazing Website Design
- Working with Product Variants When Building a Shopify Theme
- Creating an Accessible Pagination with Liquid
- Building an Accessible Breadcrumb Navigation with Liquid and Shopify
Shopify Theme Sections
部分让你让商家给他们greater flexibility when customizing their online store. This feature allows them to easily add or move content on their homepage with just a few clicks.
- Introducing Sections for Shopify Themes
- How to Create Your First Shopify Theme Section
- Building a Clickable Call-to-Action Button for Your Shopify Theme
- How to Create Custom Theme Sections and Blocks (Webinar)
- How to Create a Customizable Logo Bar Section
CSS in Shopify Themes
There are plenty of reasons to add useful CSS hooks to your templates. Learn how, and why, this can help you make your theme building more effective and powerful.
- Creating Useful CSS Hooks in Liquid
- 3 Essential Tips for Refactoring CSS Without Losing Your Mind
- Getting Started With a CSS Grid Layout on Shopify
- A Beginner's Guide to Sass with Shopify — Part 1: Getting Started With Sass
Shopify Themes and JavaScript
Shopify Themes do not require JavaScript — however, by progressively enhancing your templates, you can add functionality that will delight customers.
- Using JavaScript To Super Power Your Client's Shopify Site
- How to Create a Sticky Add to Cart Button On Scroll
- Cart.js — A Javascript Library to Power your Shopify Cart
- How to Use JavaScript to Add Ecommerce to Any Website
- jQuery Image Zoom for Shopify in 5 Easy Steps
- Introducing BuyButton.js – Shopify's New JavaScript Library
Metafields
Learn how to make the most of theShopify metafieldsfunctionality and bulk editor feature.
- Using Metafields in Your Shopify Theme
- Adding Custom Fields to the Shopify Dashboard
- Secrets of the Shopify Bulk Editor
- How to Use Liquid to Create Custom Landing Page Templates
Shopify API
Thousands of apps and integrations are available in theShopify App Storethanks to the powerful Shopify API. Here’s a primer to whet your appetite.
- Getting Started with the Shopify API
- How to Generate a Shopify API Token
- Why Learn to Build a Shopify App?
- Ruby Shopify Script Tutorial
- Securing Customer Pages with a Shopify App Proxy
- Building Shopify Apps with PHP
- Shopify API tutorials
- Shopify Storefront API
- How to Authenticate Your Embedded App in the Shopify Admin
Theme performance
A little can go a long way — especially when it comes to theme performance. Learn how Shopify Experts squeeze gains out of each and every theme they produce. Better performance = happy customers = happy merchants.
- How to Optimize Themes for Performance
- Tiny Tweaks for Shopify Theme Performance
- 9 Tips for Boosting the Speed of your Shopify Website
- Crafting Faster Themes: How the Shopify Themes Team Tackled Narrative's Web Performance
- How Lazy Loading can Optimize Your Shopify Theme Images
Using web fonts in Shopify Themes
Adding web fonts to a theme is a common request. The following article will teach you how to do just that.
- How to Use Web Fonts in Your Shopify Store
- Font Pairing For Designers 101, Plus 10 Free Font Pairing Tools
- How to Use Shopify’s New font_picker Settings
- 10 Web Design Tools to Discover Beautiful Fonts for Your Next Project
Official resources
As well as regularly published tutorials on theShopify Web Design and Development Blog, we also recommend the following official Shopify Theme-related resources. Both theLiquid Cheat SheetandLiquid Code Examplesare worth bookmarking.
- Building Themes
- Customizing Themes
- Liquid Reference
- Developers — Getting Started with the Shopify API
- Shopify Tutorials — Web Design and Development Blog
- Liquid Cheat Sheet
Create a development store to test your themes
As a Shopify Partner, you have access to a free development store to experiment with and test your themes. Follow the link below to create your development store today. Not yet a Shopify Partner?Sign up now.
Create development store