テキスト付き画像ブロック｜SHOP Builder

Avatar
SHOPLINE TW Copywriters

4. EC + SC (EN).png

SHOP Builderを使用して高度なページを追加または編集する際に、「テキスト付き画像」ウィジェットを追加して、オンラインストアをより美しくすることができます。

⚠️ 始める前に：

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

 

1. 「テキスト付き画像」ウィジェットの追加

ステップ 1

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

 

ステップ 2

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

 

ステップ 3

「テキスト付き画像」ウィジェットをクリックします。EN3.png

 

ステップ 4

テキスト付き画像ウィジェットのセットはデフォルトで設定されています。画像と動画ウィジェットをクリックしてコンテンツを編集します。EN4.png

左側のアイコンをクリックして、画像または動画の順序をドラッグして調整します。EN5.png

 

ステップ 5

画像ウィジェットをクリックして、モバイル版とデスクトップ版のそれぞれにアップロードします。

*注：デスクトップ版の画像幅は2000px以上、モバイル版の画像幅は1080px以上であることをお勧めします。EN6.png


言語のドロップダウンメニューをクリックすると、サポートされている言語のリストが表示されます。各言語インターフェース用に個別に画像をアップロードできます。EN7.png


ステップ 6

画像/テキストウィジェットをクリックして、画像およびテキスト関連の設定を編集します。

1. 画像

  • 画像のトリミング：表示する画像の部分を選択します（左上/中央上/右上/左中/中央/右中/左下/中央下/右下）。
  • 画像の代替テキスト：画像の代替テキストを入力します。検索エンジンが画像の内容をよりよく理解できるように、画像の内容を説明する文を使用します。画像のALT説明について詳しくは、こちらの記事を参照してください。
  • タイトル：画像のタイトルを入力します。
  • リンク先：画像にURLを追加し、顧客がクリックすると新しいページにリダイレクトされるようにします。
    リンクを開く方法を選択できます：
    • 現在のウィンドウ：現在のウィンドウでURLを開きます。
    • 新しいウィンドウ：新しいウィンドウでURLを開きます。

EN8.png

 

2. テキスト

  • タイトル：商品タイトルを挿入します。次のスタイル設定をカスタマイズすることもできます。スタイル設定の表示順は：ウィジェットのスタイル設定 > ストア設定。
    • 見出しタグ：H1からH6までの6つのオプションがあります。システムのデフォルトはH3です。
    • テキストカラー：パレットを開いてテキストカラーを選択するか、カラーコードを入力します。
    • フォントサイズ：16/20/24/28/32から選択できます。実際のフォントサイズは、ストア設定で設定したフォントサイズに基づいて比例的にスケールします。
  • サブタイトル：商品サブタイトルを挿入します。次のスタイル設定をカスタマイズすることもできます。スタイル設定の表示順は：ウィジェットのスタイル設定 > ストア設定。
    • 見出しタグ：H1からH6までの6つのオプションがあります。システムのデフォルトはH4です。
    • テキストカラー：パレットを開いてテキストカラーを選択するか、カラーコードを入力します。
    • フォントサイズ：14/16/18/20/22から選択できます。実際のフォントサイズは、ストア設定で設定したフォントサイズに基づいて比例的にスケールします。
  • コンテンツ：商品の説明を挿入します。次のスタイル設定をカスタマイズすることもできます。
    • フォントサイズ：12/14/16/18/20から選択できます。実際のフォントサイズは、ストア設定で設定したフォントサイズに基づいて比例的にスケールします。
    • テキストカラー：パレットを開いてテキストカラーを選択するか、カラーコードを入力します。
    • リスト：箇条書きリストまたは番号付きリストを追加できます。
    • 全画面編集：全画面編集モードに入って、コンテンツをより簡単に作成できます。
  • ボタンテキスト：ボタンテキストを挿入します。
  • リンク先：テキストにURLを挿入します。URLを開く方法は2つあります：
    • 現在のウィンドウ：現在のウィンドウからページを直接開きます。
    • 新しいウィンドウ：新しいウィンドウでページを開きます。

*注：

  • スタイル設定の表示順は：ウィジェットのスタイル設定 > ストア設定。
  • カスタムリキッドを使用してページレイアウトを調整した場合、ウィジェットのスタイル設定を調整した後にカスタムリキッドのルールを編集する必要があります。
  • 現在、Shopper Appはウィジェットのテキストカラーとフォントサイズのカスタマイズをサポートしていません。

 

ステップ 7

その他の設定がサポートされています。
 

A. パディング

画像とテキストのパディングを調整します。EN10.png

 

B. 画像の比率

デスクトップとモバイルビューそれぞれの画像の比率を設定できます。 EN11.png

 

C. テキストの配置EN12.png

 

ステップ 8 

設定プロセス中に新しく追加された画像とテキストのパーツを表示するには、下の保存ボタンをクリックできます。
*Note: デスクトップ版またはモバイル版のプレビューを選択できます。EN13.png

EN14.png


または、右上のプレビューボタンをクリックしてストアフロントでプレビューできます。  EN15.png

 

ステップ 9

上記の設定が確認できたら、公開をクリックして顧客に新しく更新されたコンテンツを表示させます。EN16.png

 

さらに読む

 

 

 

 

 

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

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

コメント