[Shopify]ショートコード

メタフェイズではShopifyを利用したストア構築を行っています。
今回はショートコードを設定する方法を紹介いたします。

ショートコードはブログ記事内やページ内で特定の記述をすると任意のコードを呼び出せる機能です。ブログ記事で商品を紹介する際などにデザインされたレイアウトを表示したいときに使います。

1 ファイル取得

https://github.com/culturekings/shopify-shortcodesからファイルを取得します。

2 ファイルを配置

snippetsフォルダへ下記２ファイルを配置します。

・shortcode.liquid
・shortcode-render.liquid

3 「snippets/shortcode-product_in_blog.liquid」というファイルを作成します。

内容はサンプルとして下記を記述して下さい。

{%- capture product_handle -%}{%- include 'shortcode-render' render:'handle' default:'' -%}{%- endcapture -%}

{%- paginate collections.all.products by collections.all.all_products_count -%}
{%- for tmp in collections.all.products -%}
{%- if tmp.handle == product_handle -%}
{%- assign product = tmp -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endpaginate -%}

{% if product -%}
<section>;
   {%- for image in product.images -%}
       <figure class="image"><img src="{{ image | img_url:'162x' }}" alt="{{ image.alt | escape }}"></figure>
       {%- break -%}
   {%- endfor %}
   <h2 class="name nameCell">{{ product.title | escape }}</h2>
</section>
{%- endif %}

4 templates/article.liquid の記事部分を下記へ書き換えます。

{% include 'shortcode' load:article.content %}

5 ブログ記事編集で任意の場所に下記コードを入力します。

xxxxの部分は商品ハンドル

[product_in_blog handle="xxxx"]

ブログ記事の上記コードの部分が「snippets/shortcode-product_in_blog.liquid」の内容に変換されます。

Shopifyを利用したストアの構築・運用のご相談は株式会社メタフェイズまで！