カスタムページ

SHOPLINEの対応プラン

SHOPLINE の「カスタムページ」は、テンプレートまたは空白のページから手軽に作成できます。画像、動画、テキストなどのパーツをドラッグして配置し、ストアに合わせたページを作成できます。

本記事では、以下の内容についてご説明します。

 

1、新しいパーツを追加する

STEP 1. カスタムページを追加する

ストアの管理画面で「オンラインストアデザイン > ページ」を開き、「ページを追加」をクリックして「カスタムページ」を選択します。

管理画面でカスタムページを追加する画面

 

STEP 2. テンプレートを選択する

用意されているテンプレートを選ぶか、空白のページからレイアウトを作成します。

カスタムページのテンプレート選択画面

 

STEP 3. パーツを選択する

カスタムページの設定画面で、左側の青い「デザイン」をクリックし、追加するパーツを選択します。

*ご注意:商品カテゴリパーツは最大10個まで追加できます。

追加するパーツの選択画面

 

STEP 4. パーツを配置する

パーツを右側の編集エリアへドラッグします。配置できる場所は緑色で表示されます。

パーツをドラッグして配置する操作

 

2、パーツの機能

各パーツの機能と設定方法については、以下の記事をご覧ください。

 

3、ストアのヘッダー・フッターを編集する

  • カスタムページの設定画面には、ヘッダー領域が表示されます。「ここ」をクリックすると、管理画面の「ナビゲーション」に移動してヘッダーのナビゲーションを編集できます。詳しくは、ナビゲーションの管理をご覧ください。
  • カスタムページの設定画面には、フッター領域も表示されます。「ここ」をクリックすると、管理画面の「ナビゲーション」に移動してフッターの内容を編集できます。詳しくは、ストアのフッターの管理をご覧ください。

*ご注意:ヘッダーまたはフッターの編集画面に移動すると、編集中の内容は自動保存されます。

ヘッダーとフッターの編集リンク

 
 

4、カスタムページのレイアウト

  • 1行に最大4つのパーツを横並びに配置できます。各パーツには、その行の幅が均等に割り当てられます。
    4つのパーツを横並びに配置した例
     
  • 個別のパーツは、「十字」アイコンをドラッグして移動できます。「ゴミ箱」アイコンをクリックすると削除できます。
    個別のパーツを移動・削除する操作
     
  • 行全体を移動するには、右側の緑色の「矢印」アイコンをクリックします。緑色の「ゴミ箱」アイコンをクリックすると、行全体を削除できます。
    パーツの行全体を移動・削除する操作
     

 

5、ページをプレビューする

デザインやレイアウトはいつでも確認できます。画面右下の緑色の「ページをプレビュー」をクリックします。

ページのプレビューボタン

 

プレビュー画面では、デバイスごとの表示を確認できます。左から順に、スマートフォン、タブレット、パソコンです。

スマートフォン・タブレット・パソコンのプレビュー切り替え

デバイスごとのページ表示を確認する操作

 

編集が終わったら、画面右下の「保存」をクリックしてページを保存します。

ページを保存するボタン

 

6、 カスタムページを複製する

ページ一覧で作成済みのカスタムページを複製し、新しいキャンペーンに合わせて内容を調整できます。

パーツに加え、ページ名、URL、SEO設定なども新しいページに複製されます。新しいページを作成する際は、これらの内容を最新の情報に変更してください。

*ご注意:複製できるのはカスタムページのみです。テキストページは複製できません。

カスタムページを複製する操作

 

7、SHOP Builder

SHOPLINEの新しいページエディタ「SHOP Builder」では、カスタムページをより自由にデザインできます。お知らせバー、ヘッダー、フッターやさまざまなブロックを組み合わせて、ストア独自のレイアウトを作成できます。詳しい手順はSHOP Builderの概要をご覧ください。 

SHOP Builderのページ編集画面

 
*ご注意:
  • SHOP Builderで現在利用できるテンプレートは Ultra Chic、Kingsman、Philia 、 Varm のみです。
  • SHOP Builderでページを作成した後に別のストアテンプレートへ切り替えても、ページは表示されます。ただし、編集できなくなり、レイアウトが崩れる場合があります。ページを公開する前にご確認ください。
  • Dusk、Skya、Sangria、Bianco、Doris Bienでは、SHOP Builderで作成したページを表示できますが、編集はできません。その他のストアテンプレートでは、表示・編集ともに対応していません。

 

 

関連記事

最終更新日:2026 年 9 月 10 日

この記事は役に立ちましたか?
1人中1人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント