easyPoints

# Getting Started

WARNING

The EasyPoints integration guide assumes intermediate level knowledge of Liquid, HTML, CSS, and JavaScript. If you are totally new to Shopify themes, it might be better to contact us at easypoints.jp (opens new window) for a custom integration built by our in-house engineers.

# Requirements

# Setup

TIP

If you've already got your own theme development flow then you can skip straight to the actual theme integration found here

To make Shopify theme development easier we'll use Theme Kit by Shopify, let's guide you through a few steps to start developing your theme locally. Everything in the following steps is simply to setup Theme Kit:

Alternatively if you do not want to use Theme Kit (not recommended) you can simply use Shopify's built in theme editor.

# Theme Kit — Installation

First of all let's install Theme Kit, which is a command line tool for shopify themes to easily download, deploy and develop your themes.

To install Theme Kit (opens new window) please follow the installation guide on the official documentation (opens new window) page. Verify if Theme Kit was successfully installed by running the command theme version

> theme version
ThemeKit 1.1.2 darwin/amd64

Now we're ready to setup Theme Kit for your Shopify theme!

# API Password — Creating a Shopify Private App

Creating a Shopify private app is required to get an API Password which will allow Theme Kit to access your store its theme files.

To do so, we need to log into the Shopify store, and create a private app.

# Configuration

  1. password or -p

Copy the password (not the API key) from the private app we created in the previous step

  1. store or -s

This is the domain of your Shopify store e.g.: your-store.myshopify.com

  1. theme_id or -t

In the terminal since we got the API Password we can simply run theme get --list (opens new window)

> theme get --list -p=password -s=your-store.myshopify.com
Available theme versions:
  [93372317755][live] Debut
  [97899806779] Duplicate of Debut

This will return a list of themes names and their [ids] that exist on your store.

# Using Theme Kit

TIP

Before we start you can find the in-depth usage documentation of Theme Kit here (opens new window)

# Theme Download

Once you have your API password and the id of the theme you want to work on, we can start using Theme Kit.

First lets create a new directory for your theme

> mkdir your-theme-name

Then, go into the directory we just created

> cd your-theme-name

Now we'll download the theme

> theme get -p=your-api-password -s=your-store.myshopify.com -t=your-theme-id

# Theme Preview

To open a preview of the theme that we just downloaded, use

> theme open

This will open a new browser window to the URL http://your-store.myshopify.com?preview_theme_id=<your-theme-id>

# Theme Changes

During the integration we can automatically deploy the changes we're making with

> theme watch

This will watch the current directory for any changes in the theme files and automatically update them on Shopify.

On a side note, you can also update every change you've made with

> theme deploy

# In short

During the development of your theme you should always have a preview of your theme open and be sure to watch the theme directory for any changes. To do that we combine the theme open and theme watch commands to have an easier time integrating.

> theme open && theme watch

To see the changes you've made in the theme preview be sure to refresh the browser tab frequently, unfortunately Theme Kit does not automatically refresh after it pushes any theme changes.

← Integrating easyPoints →