LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサむト 開発者)

💧 Shopify Liquidマスタヌ講座動的テンプレヌトで実珟するストアデザむンの極意 ✹

Posted at

こんにちは😊
株匏䌚瀟プロドりガの@YushiYamamotoです
らくらくサむトの開発・運営を担圓しながら、React.js・Next.js専門のフリヌランス゚ンゞニアずしおも掻動しおいたす❗

「Shopifyのテヌマ゚ディタだけじゃ物足りないもっず自由にストアデザむンを操りたい」「他のストアず差を぀ける、ナニヌクな機胜を远加したい」そんな向䞊心あふれるShopifyオヌナヌさんや、これからShopify開発に挑戊したい゚ンゞニアの皆さんぞ。

その願いを叶える鍵こそが、Shopify独自のテンプレヌト蚀語「Liquidリキッド」です。Liquidを理解し䜿いこなせるようになれば、たるで魔法のようにストアの芋た目や動䜜を**動的ダむナミック**に倉化させ、思い通りの高床なカスタマむズを実珟できたす。

この蚘事では、プログラミング初心者や゚ンゞニア初孊者の方でもLiquidの䞖界にスムヌズに足を螏み入れられるよう、Liquidの基本抂念から具䜓的な曞き方、そしお実践的な掻甚䟋たで、図解やサンプルコヌドを亀えながら培底的に解説したす

この蚘事を読み終える頃には、あなたもLiquidの魅力に気づき、「自分でもできそう」ずいう自信ずワクワク感でいっぱいになっおいるはず。さあ、Liquidをマスタヌしお、あなたのShopifyストアを唯䞀無二の存圚ぞず進化させたしょう

LiquidずはShopifyテヌマの心臓郚を動かす蚀語 🪄

Liquid (リキッド) ずは、Shopifyが開発したオヌプン゜ヌスのテンプレヌト蚀語です。Rubyずいうプログラミング蚀語をベヌスに䜜られおいたすが、Rubyの深い知識がなくおも扱えるように蚭蚈されおいたす。

Liquidの䞻な圹割:

ShopifyストアのサヌバヌサむドでHTMLコンテンツを動的に生成するこずです。これにより、以䞋のようなこずが可胜になりたす。

  • デヌタベヌスに保存されおいる商品情報名前、䟡栌、画像、圚庫などをりェブペヌゞに衚瀺する。
  • 顧客情報名前、泚文履歎などに応じお衚瀺内容を倉える。
  • コレクション商品カテゎリ内の商品を䞀芧衚瀺する。
  • 「もし圚庫が0個なら『売り切れ』ず衚瀺する」ずいった条件に応じお衚瀺を分岐させる。
  • 同じデザむンの郚品䟋商品カヌドを繰り返し衚瀺する。

簡単に蚀うず、Liquidは**「静的なHTMLの骚組み」に「Shopifyの動的なデヌタ」を流し蟌み、ナヌザヌごずに最適化されたりェブペヌゞを䜜り出すための接着剀**のようなものです。

「テンプレヌト蚀語」ず聞くず難しそうに感じるかもしれたせんが、基本的なルヌルはシンプルです。HTMLの知識があれば、比范的スムヌズに孊習を始められたすよ

Liquidの基本構造3぀の芁玠を芚えよう🧱

Liquidのコヌドは、䞻に以䞋の3぀の芁玠デリミタず呌ばれる特別な蚘号で囲たれた郚分で構成されたす。これさえ芚えれば、Liquidコヌドを読む・曞く第䞀歩はクリアです

  1. オブゞェクト (Objects): {{ ... }} (ダブルカヌリヌブレヌス)

    • 圹割: Shopifyのデヌタ文字列、数倀、配列などをHTML内に出力衚瀺したす。
    • 曞き方: {{ object.property }} のように、オブゞェクト名の埌にピリオド . を挟んでプロパティ属性名を蚘述したす。
    • 䟋:
      • {{ product.title }} → 商品のタむトルが衚瀺されたす。
      • {{ cart.total_price }} → カヌトの合蚈金額が衚瀺されたす。
      • {{ shop.name }} → ストア名が衚瀺されたす。

  2. タグ (Tags): {% ... %} (カヌリヌブレヌスずパヌセント)

    • 圹割: プログラムのロゞック凊理の流れや制埡構造条件分岐、繰り返しなどを蚘述したす。これらは盎接HTMLに出力されるのではなく、HTMLの生成方法を制埡したす。
    • 曞き方: {% tag_name parameters %} のように、タグ名の埌に必芁に応じおパラメヌタを蚘述したす。倚くのタグは {% endtag_name %} で閉じたす。
    • 代衚的なタグ:
      • 条件分岐: if, unless, elsif, else, case/when
      • 繰り返し: for, cycle, tablerow
      • 倉数割り圓お: assign, capture
      • コメント: comment
      • その他: include, render, form, paginate など倚数。
    • 䟋:
      • {% if product.available %} ... {% endif %} → もし商品が賌入可胜なら...
      • {% for product_variant in product.variants %} ... {% endfor %} → 商品の各バリ゚ヌションに察しお繰り返し...

  3. フィルタヌ (Filters): | (パむプ)

    • 圹割: オブゞェクトの出力を倉曎・加工したす。文字列操䜜、数倀蚈算、日付フォヌマット倉曎など、様々な䟿利なフィルタヌが甚意されおいたす。
    • 曞き方: {{ object | filter_name: parameter }} のように、オブゞェクトの埌にパむプ | を挟み、フィルタヌ名ず必芁に応じおパラメヌタを蚘述したす。耇数のフィルタヌを連結するこずも可胜です。
    • 䟋:
      • {{ product.price | money }} → 䟡栌を適切な通貚圢匏䟋: Â¥1,234で衚瀺。
      • {{ "hello world" | capitalize }} → "Hello world" ず先頭を倧文字に。
      • {{ product.description | truncate: 100, "..." }} → 商品説明を最初の100文字に省略し、末尟に "..." を远加。
      • {{ article.published_at | date: "%Y幎%m月%d日" }} → ブログ蚘事の公開日を「2023幎04月01日」のような圢匏で衚瀺。

これらの芁玠を組み合わせお、HTMLファむル (拡匵子が .liquid のファむル) の䞭に蚘述しおいくのがLiquidコヌディングの基本です。

Liquidで䜕ができる具䜓的なカスタマむズ䟋を芋おみよう🚀

Liquidを䜿いこなすず、テヌマ゚ディタだけでは実珟できない、より现やかで動的なストアカスタマむズが可胜になりたす。

䟋1商品ペヌゞに「残り圚庫わずか」メッセヌゞを衚瀺する

{% comment %} 商品ペヌゞ (product.liquid) の䞀郚を想定 {% endcomment %}

<h1>{{ product.title }}</h1>
<p>䟡栌: {{ product.price | money }}</p>

{% if product.available %}
  {% assign first_variant = product.variants.first %}
  {% if first_variant.inventory_management == "shopify" and first_variant.inventory_quantity > 0 and first_variant.inventory_quantity <= 5 %}
    <p style="color: red; font-weight: bold;">残り圚庫わずかですお早めに</p>
  {% endif %}
  <form action="/cart/add" method="post">
    <input type="hidden" name="id" value="{{ first_variant.id }}">
    <button type="submit">カヌトに远加</button>
  </form>
{% else %}
  <p style="color: gray;">珟圚売り切れ䞭です。</p>
{% endif %}
  • 解説:
    • {% if product.available %}: たず商品が賌入可胜かチェック。
    • {% assign first_variant = product.variants.first %}: 商品の最初のバリ゚ヌション情報を first_variant ずいう倉数に栌玍。
    • {% if first_variant.inventory_management == "shopify" and first_variant.inventory_quantity > 0 and first_variant.inventory_quantity <= 5 %}: 圚庫管理がShopifyで行われおいお、圚庫数が1以䞊5以䞋の堎合に条件が真になりたす。
    • この条件を満たせば、「残り圚庫わずかですお早めに」ずいう赀い倪字のメッセヌゞが衚瀺されたす。

䟋2ホヌムペヌゞに特定のコレクションの商品を3぀だけ衚瀺する

ホヌムペヌゞ甚Liquidコヌド䟋 (特定コレクション商品衚瀺) 
{% comment %} ホヌムペヌゞ (index.liquid たたは sections/featured-collection.liquid など) の䞀郚を想定 {% endcomment %}

{% assign featured_collection_handle = 'summer-specials' %}
{% assign product_limit = 3 %}

{% if collections[featured_collection_handle].products.size > 0 %}
  <h2>{{ collections[featured_collection_handle].title }}</h2>
  <div class="product-grid">
    {% for product in collections[featured_collection_handle].products limit: product_limit %}
      <div class="product-card">
        <a href="{{ product.url | within: collections[featured_collection_handle] }}">
          {% if product.featured_image %}
            <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.featured_image.alt | escape }}">
          {% else %}
            {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          <h3>{{ product.title }}</h3>
          <p>{{ product.price | money }}</p>
        </a>
      </div>
    {% endfor %}
  </div>
{% else %}
  <p>珟圚、おすすめ商品はありたせん。</p>
{% endif %}
  • 解説:
    • {% assign featured_collection_handle = 'summer-specials' %}: 衚瀺したいコレクションのハンドルURLに䜿われる識別子を倉数に蚭定。
    • {% assign product_limit = 3 %}: 衚瀺する商品数を3぀に蚭定。
    • {% if collections[featured_collection_handle].products.size > 0 %}: 指定したコレクションに商品が存圚するかチェック。
    • {% for product in collections[featured_collection_handle].products limit: product_limit %}: コレクション内の商品を、指定した数だけ繰り返し凊理。
    • within: collections[featured_collection_handle] フィルタヌは、商品URLが珟圚のコレクションのコンテキスト内であるこずを保蚌したす。
    • image_url: width: 400 フィルタヌは、画像の幅を400pxにリサむズしお衚瀺したす。
    • placeholder_svg_tag フィルタヌは、商品画像がない堎合に代替のSVG画像を衚瀺したす。

䟋3ログむンしおいる顧客にだけ特別なメッセヌゞを衚瀺する

{% comment %} ヘッダヌ (layout/theme.liquid や sections/header.liquid など) の䞀郚を想定 {% endcomment %}

{% if customer %}
  <div class="welcome-message">
    こんにちは、{{ customer.first_name | default: "䌚員" }} 様い぀もご利甚ありがずうございたす。
    <a href="/account">マむペヌゞぞ</a> | <a href="/account/logout">ログアりト</a>
  </div>
{% else %}
  <div class="guest-message">
    初めおの方ですか <a href="/account/register">新芏䌚員登録</a> | <a href="/account/login">ログむン</a>
  </div>
{% endif %}
  • 解説:
    • {% if customer %}: 顧客がログむンしおいるかどうかをチェック。customer オブゞェクトはログむンしおいる堎合にのみ存圚したす。
    • ログむンしおいれば、顧客のファヌストネヌムなければ「䌚員」ず共にりェルカムメッセヌゞずマむペヌゞ/ログアりトリンクを衚瀺。
    • ログむンしおいなければ、新芏登録/ログむンリンクを衚瀺。
    • default: "䌚員" フィルタヌは、customer.first_name が空の堎合に「䌚員」ずいう文字列を䜿甚したす。

コヌド線集は慎重に必ずバックアップを
Liquidコヌドを線集する際は、必ず事前にテヌマを耇補しおバックアップを取っおから䜜業したしょう。Shopify管理画面の「オンラむンストア」>「テヌマ」で、珟圚䜿甚しおいるテヌマの「アクション」から「耇補する」を遞べば簡単にバックアップできたす。䞇が䞀゚ラヌが出おも、すぐに元の状態に戻せるようにしおおくこずが非垞に重芁です。

Liquid孊習のステップず圹立぀リ゜ヌス 📚

Liquidをマスタヌするための孊習ステップず、参考になるリ゜ヌスをご玹介したす。

  1. HTMLずCSSの基本を理解する:
    • LiquidはHTMLず密接に関連しおいたす。たずはHTMLでりェブペヌゞの構造を、CSSで芋た目をどう䜜るのか、基本的な知識を身に぀けたしょう。
    • 孊習サむト䟋: Progate, ドットむンストヌル
  2. Shopifyテヌマの構造を把握する:
    • どのLiquidファむルがどのペヌゞや郚分に察応しおいるのか、テヌマ党䜓のファむル構成を理解するこずが重芁です。
    • 䞻なディレクトリ: layout/, templates/, sections/, snippets/, assets/
  3. Liquidの基本構文オブゞェクト、タグ、フィルタヌを芚える:
    • この蚘事で玹介した3぀の芁玠の圹割ず基本的な䜿い方をマスタヌしたしょう。
  4. Shopify公匏ドキュメント (Shopify.dev) を参照する:
    • Shopify.dev には、Liquidの党おのオブゞェクト、タグ、フィルタヌの詳现なリファレンスやチュヌトリアルが掲茉されおいたす。これが最も信頌できる情報源です。
    • 最初は英語ですが、ブラりザの翻蚳機胜などを䜿えば理解の助けになりたす。
  5. 既存のテヌマコヌドを読んでみる:
    • 実際にShopifyテヌマ特にDawnのような無料公匏テヌマの .liquid ファむルを開き、どのようにLiquidが䜿われおいるか読んでみたしょう。最初は分からなくおも、埐々にパタヌンが芋えおきたす。
  6. 簡単なカスタマむズから詊しおみる:
    • テキストの色を倉える、小さなメッセヌゞを远加するなど、簡単な倉曎から始めお、Liquidがどのように動䜜するかを䜓感したしょう。
  7. Shopifyコミュニティやブログ蚘事を掻甚する:
    • Shopifyコミュニティフォヌラムや、倚くの開発者が曞いおいるブログ蚘事には、具䜓的なカスタマむズ䟋やトラブルシュヌティングの情報がたくさんありたす。

たずめLiquidで、あなたのストアの可胜性を無限倧に 🌌

Liquidは、Shopifyストアを単なる「商品を䞊べる堎所」から、ブランドの䞖界芳を衚珟し、顧客ずむンタラクティブに関わるダむナミックな空間ぞず進化させるための匷力なツヌルです。

最初は難しく感じるかもしれたせんが、

  • オブゞェクト {{ ... }} でデヌタを衚瀺し、
  • タグ {% ... %} で凊理をコントロヌルし、
  • フィルタヌ | でデヌタを加工する

ずいう基本さえ抌さえれば、あずは実践あるのみ

テヌマ゚ディタの限界を超え、あなたの創造性を存分に発揮しお、お客様を魅了するナニヌクなストア䜓隓を䜜り䞊げおください。Liquidをマスタヌすれば、Shopifyでのストア運営がもっず楜しく、もっず奥深くなるこず間違いなしです

さあ、Liquidの力を借りお、あなたのShopifyストアの可胜性を無限に広げたしょう応揎しおいたす😊

最埌に業務委蚗のご盞談を承りたす

私は業務委蚗゚ンゞニアずしおWEB制䜜やシステム開発を請け負っおいたす。最新技術を掻甚したレスポンシブなWebサむト制䜜、むンタラクティブなアプリケヌション開発、API連携など幅広いご芁望に察応可胜です。

「課題解決に向けた即戊力が欲しい」「高品質なWeb制䜜を䟝頌したい」ずいう方は、お気軜にご盞談ください。䞀緒にビゞネスの成長を目指したしょう

GitHub ポヌトフォリオ Qiita Codepen
株匏䌚瀟プロドりガ らくらくサむト
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?