Shopify

[Shopify] コンテンツのレイアウトを自由にカスタマイズする方法(Debutテーマ)

Shopifyでは、トップページは動的セクションに対応しており、豊富なセクションから簡単にページを作成できます。Debutテーマではその中に、「高度なレイアウト」として「コンテンツをカスタムする」ことが可能なセクションが存在します。

今回は、そんなカスタムコンテンツではどのようなことができるかをまとめました。

ShopifyのDebutテーマで使用できる高度なレイアウト「コンテンツをカスタムする」とは

トップページでもともと用意されているセクションは以下のようなものがありますが、

  • コレクション:コレクションリストなど
  • ストア情報:マップ
  • テキスト:画像付きテキスト列・お客様の声、など
  • ブログ:ブログ記事一覧
  • プロモーション用:メルマガ登録フォーム
  • 動画:動画の埋め込み
  • 商品:おすすめ商品埋め込み
  • 画像:スライドショー・ギャラリー・テキスト付き画像・ロゴリスト、など
[Shopify] トップページで編集できる項目(Debutテーマ) ・Shopifyのトップページの作り方を知りたい ・トップページに追加できる要素を知りたい ・HTMLの知識がないけどどこま...

上記以外に、自由にパーツを組み替えて作成できる以下のようなものが存在します。

オンラインストア→カスタマイズ→ホームページの左下にある「セクションを追加する」を選択。

次に、その下にある「高度なレイアウト」内にある「コンテンツをカスタムする」を選択し、「選択する」を押します。

すると、以下のようなコンテンツ追加画面になります。

ここで使用できるコンテンツは以下の種類があります。

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列まで並べることができます。

上記のコンテンツは、それぞれ横に並べたり、順番を変えたりすることが簡単にできます。

以上です。

こちらを丸ごと静的セクションにして、新しいテンプレートを追加することにより、トップページ以外でも使用することも可能です。

[Shopify] トップページ以外もカスタマイズして簡単に作成する方法(Debutテーマ)Shopifyでは、トップページは動的セクションに対応しており、豊富なセクションから簡単にページを作成できますが、その他の「ページ」では...
ABOUT ME
toru
フリーランスWebディレクター・UI/UXデザイナー。大手Web制作会社10年・フリーランス6年の経験をもとに、Webサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信しています。