Shopify theme style development

background

Recently I received a Shopify Requirements for template modification , First contact with this , Feel the stone to cross the river , The official documents are only in English , It looks hard , Various searches for information , Most of the information we found were about the opening of stores and the decoration of stores , Local development uses Shopify CLI There are few articles about tools , Or use Theme Kit Tools ,Shopify The history and development of , If you are interested, you can check it yourself , Here is a record of your own use Shopify CLI The process of developing tools for local development .

Reference article

How to create shopify Theme template local development environment （ use shopify-cli）

Shopify Various entrances

Shopify API file
Shopify Partner homepage
Shopify Store background login

Building local development environment

The local development environment can be built for reference How to create shopify Theme template local development environment （ use shopify-cli）

Here is a brief introduction ,

1. install Shopify CLI Tools
   Shopify Cli Is a command line tool , In the installation Shopify Cli Installation is required Ruby;
   installed Ruby It can be used later gem The tool , open cmd Use gem install shopify-cli package ,

gem install shopify-cli

2. Initialize a new topic

shopify theme init

Follow the prompts to enter the name of the template , This step will create a new folder and Dawn The theme will be cloned into a folder .
Dawn yes Shopify Reference topics for , Designed for performance , Built for flexibility and ease of use .

3. Connect to Shopify The store
Instructions

shopify login --store mystore.myshopify.com  # mystore  Register store address for 

4. Run the local environment

shopify theme serve

I create a development store on the partner account management platform , Previous login log in with the development store address , I don't know if it's because the app store in the partner account settings hasn't registered , An error will be reported during local startup ;
So we can only go shopify Official website Sign up for a trial 14 Days store , use 14 The trial store can be started locally .

Directory structure and component types

Let's first understand the directory structure of the project

# Shopify  Topic directory structure 
└── theme
    ├── assets
    ├── config
    ├── layout
    ├── locales
    ├── sections
    ├── snippets
    └── templates
        └── customers

assets

Point to the title “ assets ” Part of the anchor link
This directory contains all the resources used in the topic , Include images 、CSS and JavaScript file .
Use asset_url Liquid URL Filter to reference the material resources in the template .

config

This directory contains the theme's configuration files . The configuration file defines the settings in the theme settings area of the theme editor .

layout

This directory contains the layout files for the theme , Render the template file through this file .

locales

This directory contains the language translation settings files for the theme , These files are used to provide translated content .

sections

This directory contains the block parts of the topics .

snippets

The directory contains Liquid file , These files host smaller reusable code snippets . You can use Liquid Render tags reference these snippets throughout the topic .

templates

This directory contains the template files for the theme , These files control what is rendered on each type of page .
This directory contains customer-centric pages （ Such as login name and account overview page ） Template file .

See the official documentation for details , Topic introduction

The development process

demand ： Now it is required to add some customized content to the product details page , I chose to develop a partition module , Then reference... In the template .

explain ： Here to liquid The template language doesn't explain too much , You can check the relevant documents .

Reference documents ：Liquid Template language Chinese document 、LiquidJS

Development ： stay sections Add a custom liquid file ,custom-section.liquid

<style> .custom-box {
       color: #CCC; text-align: center; } </style>

<div class="custom-box">
  <p> Customize a  sction</p>
  <p> Here you can write  HTML  Content </p>
</div>

<script> </script>

{% schema %}
  {
    "name": "Custom Sction",
    "class": "custom-section",
    "settings": [
      
    ],
    "blocks": [
      
    ],
    "presets": [{
      "name": "Custom Sction",
      "blocks": [
        
      ]
    }]
  }
{% endschema %}

Local boot , preview

Code parsing

liquid In file CSS、HTML、Javascript Code and HTML It is almost written in the document , external CSS、Javascript There are two ways to introduce ,
The resources imported locally are placed in assets Directory

• CSS Style Introduction

// liquid  Introduce style sheets in 
<link rel="stylesheet" media="screen and (max-width:768px)" href="{
    { 'custom-mobile.css' | asset_url }}">
//  or 
{
    {
     'custom-base.css' | asset_url | stylesheet_tag }}

• JS introduce

// liquid  Introduction in js
<script src="{
    { 'swiper-3.4.2.jquery.min.js' | asset_url }}" defer="defer"></script>
//  or 
{
    {
     'custom-script.js' | asset_url | script_tag }}

• Image resources can be imported locally or put on the server

//  Picture resource introduction 
<img src="{
    { 'icon.svg' | asset_url }}" width="120" height="40" alt="icon">

schema What is written in is the template related configuration , No settings name Words , When you edit the template in the background, you cannot see the customization section.

Upload the code to the theme

• The way 1： You can initialize a git library , Commit the code to github, Then enter the backstage template library of the store , Add template from GitHub Connect , adopt github to grant authorization , Connect Shopify and github,
  
• The way 2： Or modify it in the background
  stay Shopify In the backstage of the store , Go to the online store > Template .
  Find the topic to edit , And then click “ operation ”>“ Edit code ”.
  In this way, you will see a project code structure similar to the local environment , choice “ newly added section”, Copy the local code 、 Paste 、 preservation .

Edit the template in the background , If it is Assets Add resources to the directory , Support file upload ,

After the template is updated , Execute locally shopify theme pull, Pull the latest code of the topic , This operation may cause the local uncommitted code to be replaced , Make a copy locally , Check and fix the problem .

Record

Make complaints about it ,Shopify This set of tools is really not easy to use , Too few documents , The vast ocean of Internet can not find the answer you want , If you have a choice, you really want to change other tools for development , but ~