This article is an introductory book by our company on Shopify, Hello Shopify Themes: A Guide to Shopify Theme Development Here's an excerpt from .

Let’s actually launch the Shopify CLI and add a simple edit to Dawn where we have our development environment ready.
We will also explain how to reflect the work of development theme in a store's theme library.

launch a development theme

First, shopify theme dev Use the command to launch a development theme.

Once the theme has been synced, you will see a message on your command line: xxxxxxxxxxxxx is a few columns of Theme IDs.

┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #xxxxxxxxxx on nsw-sample-store.myshopify.com
┃
┃ Serving .
┃
┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃
┃ Customize this theme in the Online Store Editor:
┃ https://nsw-sample-store.myshopify.com/admin/themes/xxxxxxxxxx/editor
┃
┃ Share this theme preview:
┃ https://nsw-sample-store.myshopify.com/?preview_theme_id=xxxxxxxxxx
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The development theme is not displayed in the theme library as described above in "Introducing Development Tools".
Use the URL shown on this message to view it in your browser, edit a theme editor and share preview URLs. shopify theme dev with the command running http://127.0.0.1:9292 Please use Google Chrome for your browser.

development theme display

A development theme has been created and can be displayed in the browser.

edit a theme file

Let's continue and edit the theme file.
layout/theme.liquid open the file in your code editor <body> Find the description of an element.

layout/theme.liquid

<body class="gradient">
  <a class="skip-to-content-link button visually-hidden" href="#MainContent">
    {{ "accessibility.skip_to_text" | t }}
  </a>

  {% section 'announcement-bar' %}
  {% section 'header' %}
  <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
    {{ content_for_layout }}
  </main>

  {% section 'footer' %}

（後略）

{% section 'announcement-bar' %} and {% section 'header' %} between <p>Hello World!</p> I will add it.

layout/theme.liquid

* When you fill out a code //EDIT_START 〜 //EDIT_END Please exclude and type in the text.

{% section 'announcement-bar' %}
//EDIT_START
<p>Hello World!</p>
//EDIT_END
{% section 'header' %}

save the file http://127.0.0.1:9292 If you don’t have to update your screen, the display should be changed automatically.

display of post-editing development themes

It's a good feeling!

reflect a theme's edit in the store

Once you've edited the file, ctrl+c running at shopify theme dev Let's terminate the command.At this time, editing content is only present in local development themes.
To reflect the theme's edit content in a store: shopify theme push Use the command.

duplicate the theme and make a backup

Before that, just in case you want to copy the live theme of your development store.
Open the theme library page on the store management screen and "replicate" the theme to be modified from "Action".
With future customizations, even if the theme display becomes strange, you can restore the theme contents with this backup.

Run a replica of the theme from Action.

select a theme to reflect

once again shopify theme push When you execute the command, a theme that exists in your store’s theme library will appear as an option:

? Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Dawn [live]
  2. Dawn BackUp [unpublished]

[live] The theme that is being applied to the current store, i.e. a live theme, which exists in the theme library but has been drafted. [unpublished] It will be displayed.
　 this time 1. Dawn [live] Let's select ".
Since a confirmation message is displayed for reflection to the live theme, select yes.

? Are you sure you want to push to your live theme? (Choose with ↑ ↓ ⏎)
> 1. yes
  2. no

✓ Your theme was pushed successfully If you see a message, your work is completed!

Other Shopify CLI commands

Various commands are available in the Shopify CLI.
We have summarized typical commands including those described so far.
For a more detailed description of each command and available options and flags, see the Shopify official documentation as well.

Click here to purchase the introductory book on Shopify theme development that we produced at our company.
We do not have any plans for printing after the sale at this time, so if you would like to read a printed book please pick us up as soon as possible.

• Author: Sayaka Kawashima
• Publishing: Non-standard world, Inc.
• Number of pages: B5, 248
• Price: 3,850 yen (tax included) * Packed with PDF version, free shipping

Explore the feature