Shopifyでは、トップページは動的セクションに対応しており、豊富なセクションから簡単にページを作成できます。Debutテーマではその中に、「高度なレイアウト」として「コンテンツをカスタムする」ことが可能なセクションが存在します。
今回は、そんなカスタムコンテンツではどのようなことができるかをまとめました
ShopifyのDebutテーマで使用できる高度なレイアウト「コンテンツをカスタムする」とは
トップページでもともと用意されているセクションは以下のようなものがありますが、
- コレクション：コレクションリストなど
- ストア情報：マップ
- テキスト：画像付きテキスト列・お客様の声、など
- ブログ：ブログ記事一覧
- プロモーション用：メルマガ登録フォーム
- 動画：動画の埋め込み
- 商品：おすすめ商品埋め込み
- 画像：スライドショー・ギャラリー・テキスト付き画像・ロゴリスト、など
上記以外に、自由にパーツを組み替えて作成できる以下のようなものが存在します。
オンラインストア→カスタマイズ→ホームページの左下にある「セクションを追加する」を選択。
次に、その下にある「高度なレイアウト」内にある「コンテンツをカスタムする」を選択し、「選択する」を押します。
すると、以下のようなコンテンツ追加画面になります。
ここで使用できるコンテンツは以下の種類があります。
ShopifyのDebutテーマでカスタマイズできるレイアウトの種類
- テキスト
- 画像
- ビデオ
- 商品
- コレクション
- メニュー
- ブログ
- 記事
- HTMLをカスタムする
テキスト
「テキスト」を追加すると、以下のような項目が編集できます。
以下のように、1つの幅を指定したり、中央寄せ・右寄せ左寄せ、縦方向の位置も指定できます。コンテナーの幅は25％まで選択できるので、横4列まで表示可能です。
画像
「画像」を追加すると、以下のような項目が編集できます。
以下のように、テキストと同様に1つの幅を指定したり、中央寄せ・右寄せ左寄せ、縦方向の位置も指定できます。コンテナーの幅は25％まで選択できるので、横4列まで表示可能です。画像と先ほどのテキストを並べることも可能です。
ビデオ
「ビデオ」を追加すると、以下のような項目が編集できます。ビデオはYouTubeとVimeoのみ挿入できます。
ビデオも以下のように、1列から4列まで並べることができます。
商品
「商品」を追加すると、以下のような項目が編集できます。
商品も以下のように1列から4列まで並べることができます。
コレクション
「コレクション」を追加すると、以下のような項目が編集できます。
コレクションも以下のように1列から4列まで並べることができます。
メニュー
「メニュー」を追加すると、以下のような項目が編集できます。
メニューも同様に1列から4列まで並べることができます。
ブログ
「ブログ」を追加すると、以下のような項目が編集できます。
ブログも同様に1列から4列まで並べることができます。
ブログの説明の表示や、記事数表示の有無、画像サイズなどが指定できます。
ここでいうブログとは記事ではなく、ブログの種類のことです。クリックするとそのブログの記事一覧ページに遷移します。
記事
「記事」を追加すると、以下のような項目が編集できます。
記事も同様に1列から4列まで並べることができます。
HTMLをカスタムする
「HTMLをカスタムする」を追加すると、以下のような項目が編集できます。
幅の指定も同様に1列から4列まで並べることができます。
上記のコンテンツは、それぞれ横に並べたり、順番を変えたりすることが簡単にできます。
以上です。
こちらを丸ごと静的セクションにして、新しいテンプレートを追加することにより、トップページ以外でも使用することも可能です。
