contacts

Get All 122 Premium WordPress Themes for Just $59.99
One-Time Payment: Unlimited Use Across Unlimited Domains, Plus Free Lifetime Updates!

How to Create a New Shopify 2.0 Theme based on Dawn

How to Create a New Shopify 2.0 Theme based on Dawn

If you plan to create a new Shopify 2.0 theme the recommended approach is to use Dawn theme as a blueprint and then proceed with your customization. Here is a quick guide how it can be done:

1. Install Shopify CLI

The first step is to install Shopify Command Line Interface (CLI) on your computer. It is based on node.js and you can install it by running the following command on Command Line:

npm install -g @shopify/cli @shopify/theme

2. Init your theme

The next step is to init your theme by running the below command:

shopify theme init

It will prompt you to enter your theme name, then it will clone the Dawn theme from the corresponding Shopify repo and apply the new theme name.

3. Goto your new theme folder, i.e.

cd your-new-theme-name

4. Start dev server

First, you will need a Shopify development store i.e. https://your-dev-store.myshopify.com

Then execute the below command to upload your theme and dev activate it. So, the local changes you apply to be deployed on your dev sandbox:

shopify theme dev --store your-dev-store

5. Once the dev work is ready, you can push your theme to a Shopify store by running the below command:

shopify theme push --store your-dev-store.myshopify.com

Additional Resources

Here are additional resource my might check to improve your Shopify dev work:

GitHub integration: https://shopify.dev/docs/themes/tools/github

REST Admin API resource: https://shopify.dev/docs/api/admin-rest/2024-01/resources/asset

GraphQL Admin API: https://shopify.dev/docs/api/admin-graphql

Shopify Theme Inspector for Chrome: https://shopify.dev/docs/themes/tools/theme-inspector

Analyzing your Liquid code: https://shopify.engineering/in-depth-liquid-render-analysis-shopify-theme-inspector-chrome-extension

Importing products with a CSV file: https://help.shopify.com/en/manual/products/import-export/import-products?shpxid=49956b67-B530-42F7-677E-B5D9C3934D83

Test product CSV: https://shopify.dev/csv/theme-performance-shop-product-data.csv

Google Lighthouse: https://developer.chrome.com/docs/lighthouse/overview/#devtools

Shopify Lighthouse CI GitHub action: https://shopify.dev/docs/themes/tools/lighthouse-ci

View the store in your Shopify partner account: https://partners.shopify.com/current/stores?shpxid=49956b67-B530-42F7-677E-B5D9C3934D83

Viewing managed store performance: https://help.shopify.com/en/partners/dashboard/managing-stores/store-performance?shpxid=49956b67-B530-42F7-677E-B5D9C3934D83

Accessibility insights for web: https://accessibilityinsights.io/en

WAVE: https://wave.webaim.org

JSON template: https://shopify.dev/docs/themes/architecture/templates/json-templates

Theme app extension: https://shopify.dev/docs/apps/online-store/theme-app-extensions

Leave a Reply