商品ページブロック一覧

このセクションでは、サイドバーやカスタムタブのコンテンツを追加・編集したり、商品ページで表示する要素のブロックを追加することができます。

ブロックについて

商品ページにはたくさんのブロックがあり｢ブロックを追加｣によりコンテンツを追加できるようになっています。それぞれのブロックにより、商品に関するどの情報を表示するかを決められるようになっています。またその表示する順番も変更ができます。

商品ページにて表示される情報は、Shopifyの管理画面の商品管理の商品登録にて登録された情報です。

商品の詳しい変更方法はShopify ヘルプセンターをご覧ください。

では、MISEルテーマにおいて追加可能な商品ページのブロックをそれぞれ紹介いたします。

コレクション

その商品を含んでいるコレクションの一覧を表示させたい場合、このブロックを追加してください。

コレクションの一覧が表示され、クリックすることによりそのコレクションページに遷移することができます。

タイトル

商品のタイトルを表示する場合、このブロックを追加してください。

レビュー

レビューの星の数を表示する場合、このブロックを追加してください。

詳細

在庫の状態・SKU・商品のタイプ・販売元などの情報を表示する場合、このブロックを追加してください。それぞれの個別の表示の有無は｢テーマ設定> 商品ページとクイックビュー｣の商品詳細から切り替えてください。

価格

価格を表示したい場合、このブロックを追加してください。このブロックは価格に関するより詳しい情報、例えば値引きに関することなど表示されます。それぞれの個別の表示の有無は｢テーマ設定>商品ページとクイックビュー｣の価格から切り替えてください。

テキスト付きアイコン

ご注意このブロックは複数使用できます。

商品情報のエリアにより詳しい情報を追加したい場合、テキスト付きアイコンのブロックを追加してください。

スタイル

ブロックのスタイルはドロップダウンメニューから切り替えることができます。

セクション#1 - 6

このブロックでは最大6つのテキスト付きのアイコンの要素を加えることができます。

ー SVGアイコン

SVGアイコンではMISEルテーマ標準アイコンのショートコードを入力すると対応するアイコンが表示されます。デフォルトの状態を参考にして”theme-127”や”dry-21”などのように入力してください。

MISEルテーマ標準のアイコンの一覧ページはこちらからご確認いただけます。

ーアイコン画像

MISEルテーマ標準のアイコンではなく独自の画像もご使用いただけます。その場合は、コードの欄を空有白にして、画像を選択から表示したい画像を選択してください。

ーテキスト

表示したいテキストを入力してください。

商品説明

デフォルトでは｢商品説明｣は商品ページのタブ内に表示されます。ですが、｢商品説明｣の情報をこのエリアに表示したい場合、このブロックを追加してください。

ただし、カスタマイズにより本来の商品登録でおこなった｢商品説明｣を動的に表示するのでなく、テーマエディタ側で設定したタイトルや説明に切り替えることもできます。

その場合、このブロックの｢タイトル｣と｢コンテンツ｣の内容を編集してください。

ご注意このブロックを利用してのみ商品説明を表示したい場合、商品ページのタブ内に本来の商品情報のタブを表示させないようにすることもできます。商品ページテンプレート内の｢商品ページ｣のセクション上の設定で、｢商品説明のタブを表示｣のチェックをオフにしてください。

テキスト

ご注意このブロックは複数使用できます。

シンプルなテキストを追加したい場合、こちらのブロックを追加してください。コンテンツのインプットフィールドにてテキストを入力できます。文字スタイルの変更なども可能です。

タイムカウントダウン

ご注意こちらはShopifyのメタフィールド機能を使ったやや高度な設定となります。ご不明な場合はShopifyストア構築に詳しいShopifyパートナーなどのを雇うことをおすすめします。

ご注意またこちらの機能はあくまでテーマ上でカウントダウンを表示するのみとなりますので、実際の販売停止のための手続きはShopifyの管理画面上で手動で行う必要がございます。

セールのカウントダウンタイマーを表示したい場合、このブロックを追加してください。

ご注意「タイムカウントダウン」はメタフィールドで設定することができます。商品のメタフィールドに関する詳細は、メタフィールドについての項目をご覧ください。またはこちらのShopifyヘルプセンターの情報をご覧ください。

セールのカウントダウンタイマーを表示するには以下の3つの条件が必要です。

このブロック
商品の「割引前価格」を設定する
販売終了日の情報を作成したメタフィールドへ追加します。「countdown.date = ‘2020-10-29 17:10:09’｣

補足:商品へメタフィールドの設定

ネームスペースキーは｢countdown.date｣に設定してください。

補足:商品のメタフィールドへ日時情報の追加

在庫カウントダウン

在庫カウントダウンを表示したい場合、こちらのブロックを追加してください。

また｢テーマ設定>商品ページとクイックビュー｣の在庫カウントダウンも表示する必要があるのでご注意ください。

配送カウントダウン

配送カウントダウンを表示したい場合、このブロックを追加してください。

配送カウントダウンの詳細な設定は｢テーマ設定>商品ページとクイックビュー｣の項目から行ってください。

ボーダー

ご注意このブロックは複数使用できます。

ボーダー線を加えたい場合、このブロックを追加してください。

オプション

商品のバリエーション選択を表示したい場合、このブロックを追加してください。

オプションのバリエーション選択の表示デザインの変更については、｢テーマ設定>商品バリエーション｣から変更できます。

ポップアップ

MISEルテーマのサイズガイド・返品について・メッセージのポップアップ用ボタンを表示したい場合、こちらのブロックを追加してください。それぞれのボタンの設定は｢テーマ設定>商品ページとクイックビュー｣の項目から設定を行えます。各要素の詳細はマニュアルの｢商品ページとクイックビュー｣のページをご覧ください。