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

Shopify

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

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

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

Liquid学習の参考サイト

Liquid チートシート

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

Liquid 解説サイト

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

>>Liquid 解説サイト

Liquid学習の手順

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

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

おすすめApp

商品登録

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

LinkTreeと連携

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

ShopifyLiquidのコードサンプル

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

パンくず編

<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

SMART SEARCH & PRODUCT FILTER

日本語ベンダー編

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

最近の気になる事例集

» 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チートシート

番外編

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

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

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

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

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