☰
YOSUKE-BLOG Written by よーすけ@Shopfiyフリーランス

【Shopify学習】役立つ Tips集【随時更新】

Shopify

この記事を書いている僕は、2020年からShopifyエキスパートで働いて、現在はShopifyフリーランスエンジニアとして活動しています。

Shopifyで発信していることをブログでしっかり書こうと思うと、まとまった時間が必要で、書きたいことが書けないので、Shopify Tips集としてメモ的に利用して、まとめていきます。

ぜひShopify構築の参考にしてみてください。

Liquid学習の参考サイト

Liquid チートシート

Shopify Liquid開発するならすぐに見れる環境にしておくのがおすすめですね！

Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid

This cheat sheet is an interactive reference for the Liquid templating language that will help you build ecommerce templates on Shopify.

Liquid 解説サイト

英語ですが、このサイトで基礎構文など学ぶとわかりやすいです。

>>Liquid 解説サイト

Liquid学習の手順

いろいろ学ぶことが多いのですが、まずはオブジェクトからが本当おすすめです。

>>【初心者向け】Shopifyをカスタマイズ Liquid言語の基本構文を解説

おすすめApp

商品登録

ここは、商品数が多ければ多いほど入れておきたいアプリ。
運営すればわかるのですが、本当に商品登録って時間かかるんですよね💦

LinkTreeと連携

まだ検証できていないので、インフォメーションだけ。

ShopifyLiquidのコードサンプル

これは結構参考コードとして使えるので、めちゃおすすめ。

Shopify Liquid code examples

Build and customize themes faster with component-based Liquid examples

パンくず編

<style>
  .breadcrumbs {
    margin: 0 0 2em;
  }

  .breadcrumbs__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumbs__item {
    display: inline-block;
  }

  .breadcrumbs__item:not(:last-child):after {
    border-style: solid;
    border-width: .10em .10em 0 0;
    content: '';
    display: inline-block;
    height: .20em;
    margin: 0 .20em;
    position: relative;
    transform: rotate(45deg);
    vertical-align: middle;
    width: .20em;
  }

  .breadcrumbs__link {
    text-decoration: underline;
  }

  .breadcrumbs__link[aria-current="page"] {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
  }

  .breadcrumbs__link[aria-current="page"]:hover,
  .breadcrumbs__link[aria-current="page"]:focus {
    text-decoration: underline;
  }
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="/">Home</a>
    </li>
    {%- case t -%}
      {%- when 'page' -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
        </li>
      {%- when 'product' -%}
        {%- if collection.url -%}
          <li class="breadcrumbs__item">
            {{ collection.title | link_to: collection.url }}
          </li>
        {%- endif -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
        </li>
      {%- when 'collection' and collection.handle -%}
        {%- if current_tags -%}
          <li class="breadcrumbs__item">
            {{ collection.title | link_to: collection.url }}
          </li>
          <li class="breadcrumbs__item">
            {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
            <a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
          </li>
        {%- else -%}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
          </li>
        {%- endif -%}
      {%- when 'blog' -%}
        {%- if current_tags -%}
          <li class="breadcrumbs__item">
            {{ blog.title | link_to: blog.url }}
          </li>
          <li class="breadcrumbs__item">
            {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
            <a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
          </li>
        {%- else -%}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
          </li>
        {%- endif -%}
      {%- when 'article' -%}
        <li class="breadcrumbs__item">
          {{ blog.title | link_to: blog.url }}
        </li>
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
        </li>
      {%- else -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
        </li>
    {%- endcase -%}
  </ol>
</nav>
{%- endunless -%}

Shopifyテーマ　スケルトンキット(OS1.0)

久しぶりにローカル環境で、スケルトンキットから作成したので、復習もかねて♪

Shopify Theme Kitをダウンロードして
↓
ファイルを作成して、コマンドでcdと打って指定
↓


    theme new -p=[your-api-password] --store=[〇〇〇〇.myshopify.com] --name=[任意のテーマ名]

↓


    [your-api-password] 　→　取得したAPI
    [〇〇〇〇.myshopify.com]　→　自分のアドレス
    name=[任意のテーマ名]　→　テーマの名前を決めて入力

※[ ] は省いて入力
APIを取得:「Shopify管理画面のアプリ管理」
→ 「プライベートアプリを管理する」 から作成
任意のテーマ名は英語表記

これで、必要なファイルが生成されるので、これをベースにして作成していく。

コマンドで Theme watch をすると同期されるので、ローカルのエディタで変更した内容がShopify online code editor に反映されていればOK！！

最近の気になるApp（検索編）

Product Filter & Search

Product Filter & Search| Shopify アプリストア

Leverage Product Filters & Search for Holiday Sales

SMART SEARCH & PRODUCT FILTER

SMART SEARCH & PRODUCT FILTER| Shopify アプリストア

Increase sales with Instant Search Bar & Collection Filter.

日本語ベンダー編

まだ使ってないが、クライアントさんからの要望に応えやすそう。いつも設定が英語で大変なので、、、

PROGEST（日本語検索最適化） | Shopify App Store

約80万語の日本語特化型辞書によるサイト内検索で、クリック率、流通額、回遊率の向上を実現します。

最近の気になる事例集

» Adeleのストア（Shopify）

デザイン関係

気になる考え方

付加価値は、本当に大事だな。その人から買う理由が必要。

開発テーマのプレビューURL

クライアントに本番環境ではないテーマを見てもらう時のURLの発行の仕方。

これすごく便利♫

〇〇〇〇.myshopify.com/pages/△△△△?preview_theme_id=□□□□

△△△△が、ハンドルでURLのところ。

その後の□□□□が、ID番号。

※パスワードは必要なので、注意です。

Shopifyビジネス名ジェネレーター

迷ったらこれかなー笑
たまに使ってみる。

Shopify Business name generator
https://www.shopify.com/tools/business-name-generator

CSS編

CSSボタンデザイン

逆引きレシピ

CSSの一括指定

CSSの一括指定（ショートハンド）のチートシート

JS編

JSチートシート

JSチートシート

通知に関して

メール通知の「Generic Shipping」の意味がよくわからないので、日本語に変更する方法。

{{ shipping_method.title }}

ここを下記に変更でOK！！

{{ shipping_method.title  | replace: 'Generic Shipping','一般配送' }}

決済について

銀行振込の場合

管理画面
↓
設定
↓
決済
↓
手動の決済方法
↓
Bank Deposit　
↓
管理

詳細

■銀行振込
支払い時期：ご注文後○日以内
※恐れ入りますが振込手数料はご負担をお願いしております。

引渡し時期：
例）ご入金確認後、○○は○週間以内、○○類は○○週間以内の引渡しとなります。

支払いの手順

●銀行振り込みでお支払のお客様

お買い上げ総合計金額を以下の振込先へ、○日以内にご入金ください。
ご入金を確認後、○日以内に商品を発送させていただきます。

【金　融　機　関　名】○○銀行
【　支　　店　　名　】○○支店
【　口　座　種　別　】普通
【　口　座　番　号　】○○○○○○
【　口　座　名　義　】○○○○○○

と記入して保存。

注文確認メール

{% case delivery_method %}
.
.
.
{% endcase %}

ここの
{% else %}
{{ customer.last_name }}様、ご注文いただき誠にありがとうございます。注文の発送準備を行なっております。商品が発送されましたら、Eメールにてお知らせいたします。

の続きに

なお、銀行振込をご選択の場合はご入金後の発送となります。本メールの末尾にございます金融機関まで〇日以内にご入金ください。

などを追記して

 <p class="customer-info__item-content">
                              {{ transaction.gateway_display_name }} &mdash; <strong>{{ transaction.amount | money }}</strong>
                              </p>

のところを

 {% if transaction.gateway == "Bank Deposit" %}
                            銀行振込 — <strong>{{ transaction.amount | money }}</strong>
                            <p> 代金は以下の振込先へ、一週間以内にご入金ください。<br />ご入金を確認後、〇〇以内に商品を発送させていただきます。<br />
                            【金　融　機　関　名】〇〇銀行<br />
                            【　支　　店　　名　】〇〇支店<br />
                            【　口　座　種　別　】普通<br />
                            【　口　座　番　号　】〇〇〇〇<br />
                            【　口　座　名　義　】〇〇〇〇</p>
                        {% else %}
                            {{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>
                        {% endif %}

へ変更でOKです。

番外編

ちょっと寒くなったので、これ買ってみました♪

インテリアクリエイターが提案する
エモーショナルデザイン家電

インテリアと調和する家電は今やありふれた存在に。
これからの時代に必要なのはアイデンティティ。人とは違う、自分らしさを発信したいから。今の気分にピッタリなニュアンスカラーと、バランスのとれたミニマムデザイン。欲しかったのは、この空気感。

感想として、めちゃめちゃいいです。

すぐ温まるし、人をセンサーで感知してくれるので、いない時は切れてくれる。
狭い部屋だと、これでいけちゃいますねー。

白買ったのですが、お気に入りです。
リビングと自分の仕事の部屋に毎回動かすのめんどうなので、もう一個書います♫

んー２台目はゴールドとウォールナット、どちらにしようー。悩んでます笑

RELATED

【初心者用】Shopify Liquid 学習方法のまとめ...

PROGRAMMING

【Shopify学習】Liquid Tips集【随時更新】...

Liquid

【3月読んだ本】良書と必読書のまとめ...

BOOKS

【Shopify UNITE 2021】大事なポイントのまとめ...

Liquid

>  >  【Shopify学習】役立つ Tips集【随時更新】