Shopifyのテーマをカスタマイズする時によく使うコマンドとタグまとめ

  • URLをコピーしました!

Shopifyのテーマをカスタマイズする際にコマンドやタグをいつも忘れてしまうので、まとめてみました。

目次

Shopify-cliのコマンド

Shopify-cliのバージョン確認

shopify version

Shopifyとストアを接続する

shopify login --store ストアのURL

ex) shopify login --store hogehoge.myshopify.com

新規テーマを作成する

shopify theme init テーマに付けたい名前 クローンを作成するGitリポジトリのURL

既存のテーマをカスタマイズする

shopify theme pull -i カスタマイズしたいテーマのID

ex) shopify theme pull -i 128528580762

テーマのIDは、テーマの「カスタマイズ」で該当のテーマを開いた際のURLに記載されています。

サイト全体のテーマを確認したい場合は、

shopify theme pull

で現在サイトのテーマ一覧を取得できます。

ストアとローカル環境にあるテーマを接続する

shopify theme serve

Shopifyでは編集中のテーマをローカルで確認することはできないので、ストアと接続してプレビューします。

ローカル環境にあるテーマをストアに反映させる

shopify theme push

ローカルで作成しているテーマをストアに反映させます。

Shopifyでよく使うタグ

基本的に変数や処理を定義する場合は、{% %}で囲みます。

{%    %}

定義した値を出力する際は{{ }}で囲みます。

{{   }}

assetsディレクトリ内のファイルを出力

// 画像
{{ 'smirking_gnome.gif' | asset_url | img_tag }}
// CSS
{{ 'shop.css' | asset_url | stylesheet_tag }}
// JS
{{ 'shop.js' | asset_url | script_tag }}

assetディレクトリまでのパスを自動で出力してくれます。

出力内容

// 画像
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />
// CSS
<link href="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28178" rel="stylesheet" type="text/css" media="all" />
// JS
<script src="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.js?28178" type="text/javascript"></script>

管理画面内のファイルを出力

{{ 'file.pdf' | file_url }}

管理画面内のファイルを出力する場合はフィルター名をfile_urlとします。

//cdn.shopify.com/s/files/1/0087/0462/files/file.pdf?28261

変数の定義

assign

{% assign hoge = テキストが入ります。 %}

出力

<p>{{hoge}}</p>

//出力内容
<p>テキストが入ります。</p>

capture

{% capture email_body %}
  {% if requires_shipping %}
  {% case delivery_method %}
      {% when 'pick-up' %}
        注文の受取の準備が整うと、メールが届きます。
      {% when 'local' %}
        {{ customer.first_name }}様、ご注文の品を配達する準備を行っております。
      {% else %}
        {{ customer.first_name }}様、ご注文いただき、誠にありがとうございます。注文の発送準備を行なっております。商品が発送されましたら、Eメールにてお知らせいたします。
    {% endcase %}
      {% if delivery_instructions != blank  %}
        <p><b>配達情報:</b> {{ delivery_instructions }}</p>
      {% endif %}
  {% endif %}
{% endcapture %}

出力

{{ email_body }}

閉じタグがあるので、htmlやliquidオブジェクト、liquidタグなど{% capture %}タグの中をまるっとを変数として扱えます。

条件文

if文

{% if weather == 'sunny' %}
 <p>今日の天気は晴れです。</p>
{% elsif weather == 'rainy' %}
 <p>今日の天気は雨です。</p>
{% else %}
 <p>今日の天気は分かりません。</p>
{% endif %}
論理演算子で複数条件

両方の条件を満たす場合

{% for tag in product.tags %}
   {%- if tag contains '新商品' and '人気商品' -%}
       <p>新商品であり、人気商品です。</p>
   {%- endif -%}
{% endfor %}

どちらかの条件を満たす場合

{% for tag in product.tags %}
   {%- if tag contains '新商品' or '人気商品' -%}
       <p>新商品または、人気商品です。</p>
   {%- endif -%}
{% endfor %}

switch文

{% assign handle = 'cake' %} 
{% case handle %}
 {% when 'cake' %}
 <p>これはケーキです。</p>
 {% when 'cookie' %}
 <p>これはクッキーです。</p>
 {% else %}
 <p>これはケーキでもクッキーでもありません。</p>
{% endcase %}

for文

コレクションとかで商品一覧やブログ記事一覧の呼び出しとかでよく使います。

{% for collection in collections %}
  {{ collection.title }}
{% endfor %}

セクションの呼び出し

{% section 'footer' %}
{% section 'footer' %}

コメントアウト

{% comment %}
ここの文章はコメントアウトになります。
{% endcomment %}

値の中身を確認する

{{ collections | json }}

オブジェクトをjsonフィルターを使って出力することで中身を確認することができます。

他にも多数タグがあるので、詳しくはShopify Cheat Sheetへ。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

神奈川生まれ沖縄育ちの88年生まれ。WEB制作3年目。
31歳まで舞台俳優を目指して活動していましたが、将来が不安になり未経験からWEB制作業界へ。
現在はWEB制作会社で働いています。たまに演劇経験を活かしてイベントスタッフも。

目次
閉じる