Shopify

[Liquid]デフォルトファイル一覧

本記事の情報は古いです。Shopify公式ドキュメントをご確認ください。

必須 ファイル名 備考
customers/account.liquid 会員情報ページ
姓名、メールアドレス、住所、注文履歴、住所編集ページへのリンクを表示する
customers/activate_account.liquid アカウントを有効にするページ
顧客情報インポート後、顧客へ招待メールを送信した際、顧客がメールのリンクをクリックして来るページ
パスワード、パスワード(確認)を入力するフォームがあり、「アカウントを有効にする」「招待を断る」ボタンを配置する。
customers/addresses.liquid 住所一覧・編集ページ
住所は複数登録出来る。
customers/login.liquid ログインページ
「パスワードをお忘れですか?」のフォームも含む
customers/order.liquid 注文詳細ページ
商品、配送、価格、数量、合計を表示する
customers/register.liquid 会員登録ページ
姓、名、メールアドレス、パスワードを入力する
customers/reset_password.liquid パスワードリセットページ
「パスワードをお忘れですか?」のフォームに入力されたメールアドレスへこのページへのリンクが記載されている
新パスワード、新パスワード(確認)を入力する
404.liquid 404ページ
article.liquid ブログ記事ページ
blog.liquid ブログ記事一覧ページ
cart.liquid カートページ
連絡事項欄を作成可能。
attributesで任意の入力欄を作成出来る。
collection.liquid コレクションページ
collection.favorites.liquidのように複数のバージョンを作成し、コレクション作成時にどのバージョンを適用させるか選択出来る
collection.list.liquid コレクション内商品一覧ページ
gift_card.liquid ギフトカードページ
index.liquid TOPページ
list-collections.liquid コレクション一覧ページ
page.contact.liquid お問い合わせページ
項目は任意に作成できる。サーバサイドのバリデーションは特定の項目のみなのでhtml,jsでバリデーションを実装すべし。確認画面は無い。
page.liquid 固定ページ
page.v2.jpのように複数のバージョンを作成し、固定ページ作成時にどのバージョンを適用させるか選択出来る
product.liquid 商品詳細ページ
search.liquid 検索結果ページ
フリーワードやタグで検索出来る。並び替え機能は無い。並び替えはliquid上で作れるが商品数が多い場合処理が重くなるのでやめたほうがいい。

[Liquid]/searchの仕様

公式説明ページ

 

/search?type=product

検索対象:商品

 

/search?type=article

検索対象:記事

 

/search?q=あいうえお

タイトルや説明に「あいうえお」が含まれるもの

 

/search?q=tag:apple

タグに「apple」が含まれるもの

 

/search?q=あいうえお tag:apple

タイトルや説明に「あいうえお」が含まれる かつ タグに「apple」が含まれるもの

 

/search?q=tag:apple tag:carrot

タグに「apple」「carrot」が両方含まれるもの

 

/search?q=tag:apple OR tag:carrot

タグに「apple」又は「carrot」が含まれるもの

 

/search?q=tag:apple (tag:carrot OR tag:radish)

タグに「apple」が含まれる かつ タグ「carrot」「radish」どちらか一方又は両方含まれるもの

 

/search?q=-tag:apple

タグに「apple」を含まないもの

 

/search?q=

検索結果に何も出ない。よって、この時のみ特別な処理(全商品表示)をする必要がある。

 

[Liquid]GETクエリの値を取得

参考:https://community.shopify.com/c/Shopify-Design/URL-Parameters-in-LIQUID/td-p/149761/page/2

function_get_query_value_by_key.liquid

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | replace:'\/','/' | replace:'%20',' ' | replace:'\u0026','&' -%}
{%- assign get_query_value_by_key = '' -%}
{%- if pageUrl contains "?" -%}
    {%- assign pageQuerystring = pageUrl | split:'?' | last | replace:'=','&' -%}
    {%- assign tmp = pageQuerystring | split:'&' -%}
    {%- for kv in tmp -%}
        {%- if kv == key -%}
            {%- assign get_query_value_by_key = tmp[forloop.index] -%}
            {%- break -%}
        {%- endif -%}
    {%- endfor -%}
{%- endif -%}

使用時 typeの値を取得する

{%- include "function_get_query_value_by_key" key:"type" -%}
get_query_value_by_key:{{get_query_value_by_key}}

※renderを使用すると親テンプレートへ値を渡せないためincludeを使用