Instagramパーツ|SHOP Builder

4. EC + SC (EN).png

高度なページを編集する際に、「Instagramウィジェット」を追加して、Instagramアカウントをストアフロントに統合できます。これにより、ストアフロントがより活気に満ちたものになり、ソーシャルメディアへのトラフィックも増加します。

⚠️ 始める前に:

  • SHOPビルダーは現在、Ultra Chic、Kingsman、Varm、Philiaテーマテンプレートのみをサポートしています。
  • SHOPビルダーを使用してページを作成した後、他のテーマテンプレートに切り替えてもページは表示されますが、編集できず、レイアウトが崩れる可能性があります。ページを公開する前にこの点に注意してください。

 

1. Instagramウィジェットを追加する

ステップ 1

SHOPLINE管理画面に進み、> [オンラインストアデザイン] > [ページ]をクリックし、高度なページ/編集をクリックして高度なページ設定ページを開きます。

11.png

 

ステップ 2

ウィジェットボタンをクリックします。

Screen_Shot_2022-08-01_at_4.47.14_PM.png

 

ステップ 3

「拡張機能」の下にあるInstagramウィジェットをクリックします。

Screen_Shot_2022-08-04_at_6.53.00_PM.png

 

ステップ 4

+ Instagramボタンをクリックして、Instagramアカウントを統合します。

Screen_Shot_2022-08-04_at_6.56.46_PM.png

Screen_Shot_2022-08-04_at_7.02.20_PM.png

*Note: InstagramアカウントをSHOPビルダーに統合すると、その統合はすべてのストアページに適用されるため、高度なページでInstagramアカウントを切り替えると、すべてのページに適用されます。

 

ステップ 5

テキスト設定を編集します:

  • タイトル(オプション): Instagramウィジェットのタイトルを挿入するか、空白のままにします。
  • テキストの配置:テキストの配置を調整します(左/中央/右)。

Screen_Shot_2022-08-08_at_2.55.42_PM.png

 

ステップ 6

Instagramの写真設定を調整します:

A. キャプションを表示

「キャプションを表示」トグルをオンにすると、カーソルがInstagram投稿の上にあるときにコンテンツのプレビューが表示されます。

Screen_Shot_2022-08-08_at_2.58.48_PM.png

 

B. 内部パディングを削除

「内部パディングを削除」トグルをオンにすると、Instagramの写真間の白いスペースが削除され、よりしっかりとしたレイアウトになります。

Screen_Shot_2022-08-08_at_3.02.59_PM.png

 

C. パディング

Instagramの写真とウェブページの間のスペースを調整できます。

Screen_Shot_2022-08-08_at_3.01.03_PM.png

 

D. 行/列ごとの画像数

行(縦)ごとおよび列(横)ごとの画像数を調整できます。行/列ごとに最小1画像、最大5画像がサポートされています。

Screen_Shot_2022-08-08_at_3.02.59_PM.png

 

ステップ 7

設定中に、下部の保存ボタンをクリックすると、追加したInstagramウィジェットのプレビュー画面が右側に表示されます。モバイル版でもプレビューできます。

Screen_Shot_2022-08-08_at_3.04.02_PM.png

Screen_Shot_2022-08-08_at_3.08.59_PM.png

 

または、右上のプレビューボタンをクリックして、完全なストアフロントを表示します。

Screen_Shot_2022-08-08_at_3.05.15_PM.png

 

ステップ 8

上記が完了したら、公開ボタンをクリックすると、顧客はストアフロントのこのページで追加されたコンテンツを見ることができます。

Screen_Shot_2022-08-08_at_3.07.13_PM.png

 

 

 

さらに読む

 

 

 

 

 

この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。

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

コメント