🛍 Shopify Theme Customizer

July 14, 2021 · View on GitHub

An effective development tool for customizing existing Shopify themes. It's built with Gulp, LiveReload, Shopify Theme Kit, Shopify Theme Check, ESlint, Prettier, ... and Passion.

I archived this project and moved the code to this repository. You also can find new updates there.

Experience

These are my experience when I have been working on this tool:

  • Using Gulp to Automate & Enhance the Development Workflow.
  • Using Parcel to Bundle all SCSS, JavaScript, Font, Image, ... Assets.
  • Using LiveReload to Reload the Browser Automatically When Saving the Files.
  • Using PostCSS to Make CSS Code Compatible with Old Browsers.
  • Using CoreJS to Make JavaScript Code Compatible with Old Browsers.
  • Using Shopify Theme Check, ESlint to Follow Theme Best Practices.
  • Using Shopify Theme Kit to Download, Develop and Deploy the Themes.
  • Using Shopify Liquid & Prettier Visual Studio Code Extensions to Format the Source Code.

If you like this project, hit the STAR button to bookmark it ⭐️

Installation

Clone the source code into your computer.

git clone https://github.com/maxvien/shopify-theme-customizer.git

Install the project's dependencies.

yarn install

Configuration

To config the project, you need to copy and rename the config.yml.example file to the config.yml file. Then update the store, password, theme_id properties.

There are sections in the config.yml file:

  • The development section is for your development branch.
  • The production section is for your production branch.
  • The feature section is for your feature branch.
development:
  store: store-name.myshopify.com
  password: store-admin-api-password
  theme_id: store-theme-id

production:
  store: store-name.myshopify.com
  password: store-admin-api-password
  theme_id: store-theme-id

feature:
  store: store-name.myshopify.com
  password: store-admin-api-password
  theme_id: store-theme-id

Store Property

To fill the store property, you copy your store's hostname and paste it to the config.yml file.

Password Property

To fill the password property, please follow these steps:

  1. From your Shopify admin, click Apps.
  2. Near the bottom of the page, click Manage private apps.
  3. If private app development is disabled, then click Enable private app development. Only the store owner can enable private app development.
  4. Click Create new private app.
  5. In the App details section, fill out the app name and your email address.
  6. In the Admin API section, click Show inactive Admin API permissions.
  7. Scroll to the Themes section and select Read and write from the dropdown.
  8. Click Save.
  9. Read the private app confirmation dialog, then click Create app.
  10. In the Admin API section of the App, copy the password and paste it into the config.yml file.

Theme ID Property

To fill the theme_id property, please follow these steps:

  1. From your Shopify admin, click Online Store.
  2. At the top of the Online Store menu, click Themes.
  3. In the Current theme section, click Actions and select Duplicate to backup your current theme.
  4. Next, click the Customize button.
  5. There is a link like this https://store-name.myshopify.com/admin/themes/[theme_id]/editor on your browser's address bar. Copy the theme_id and paste it into the config.yml file.

Usage

To work with theme, you need to follow the Configuration section to config the environments in the config.yml file. The default environment is development.

Get

yarn get --env=environment

Watch

yarn watch --env=environment

To enable LiveReload, you need to install the LiveReload extension on your browser.

Deploy

yarn deploy --env=environment

Download

yarn download --env=environment --file=[your theme file]

For example, you can run this command to download the config/settings_data.json file

yarn download --env=production --file=config/settings_data.json

Lint

First of all, you need to install Shopify CLI. Then you can run this command to analyze your code to find problems.

yarn lint

Automatically fix problems

yarn lint --fix

Open

yarn open --env=environment

Build

yarn build

Visual Studio Code Extensions

To speed up your productivity, you can install these extensions:

  • Next Shopify Storefront • A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.
  • Bootstrap Shopify Theme • A free Shopify Theme built with Bootstrap, BEM, Theme Tools, Swiper, Gulp, Parcel, Liquid, SASS, PostCSS, ESNext, ... and Passion.
  • Shopify Data Faker • A Shopify development tool for generating dummy store data.