new_window arrow_01 arrow_02 arrow_03 arrow_04 arrow_05 arrow_06 arrow_07 arrow_08 arrow_09 menu close metaphase facebook instagram twitter tumblr logo_metaphase

[Shopify]ショートコード

Other

2022.01.06

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

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

1.ファイル取得

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

2.ファイルを配置

snippetsフォルダへ下記2ファイルを配置します。
 
・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を利用したストアの構築・運用のご相談はお問い合わせフォームより受け付けております。

 

 

最新のブログ記事