カスタマイズされたストアのフッター

ビジネスオーナーがストアデザインをカスタマイズする自由度を高めるために、ストアのページの下部にさらに情報を追加できるカスタマイズされたショップフッター機能を使用できるようになりました。

• 設定手順
• ソーシャルメディアアイコン
• 支払い/配達オプション
• ソーシャルメディアプラットフォームや他のアイコンを自分で置き換える
• テキストとアイコンにハイパーリンクを追加する

1. 設定手順

ステップ 1

「旧フッターエディタ」をまだ使用している場合は、[オンラインストアデザイン] > [メニュー ナビゲーション]にプロンプトメッセージが表示されます。試してみるをクリックして新しいフッターエディタの使用を開始してください。

*注意：編集を終えて送信ボタンを押すと、旧フッターを復元することはできません。送信する前に再度確認してください。

ショップビルダー

SHOPLINE ショップビルダーは、詳細なページのデザインを大幅に最適化します。お知らせボード、ヘッダー＆フッター、最大6種類のパーツをデザインして、ユニークなオンラインストアレイアウトを作成できます。

SHOPLINE 管理者 > [オンラインストアデザイン] > [ページ]に進み、[詳細ページ/編集]ボタンをクリックして詳細ページの設定を開きます。

ショップビルダーでフッターボタンを選択します。

ページにアクティベーションメッセージが表示されます。新しいフッタービルダーを有効にするをクリックします。詳細については、以下の記事をお読みくださいフッター設定。

ステップ 2

フッターエディタページには、デフォルトのテンプレートが用意されており、関連情報、条件、支払い＆配達アイコンを挿入できます。必要に応じてパーツを削除またはカスタマイズできます。さまざまな種類のパーツについては、この記事をお読みください。

*注意：アイコンは、ストアが提供する支払い/配達オプションに応じて選択してください。使用しない機能は残さないでください。

ステップ 3

編集が完了したら、プレビューをクリックして確認します。保存をクリックすると、ウェブサイトのフッターは編集プレビューとまったく同じように表示されます。

*注意：プレビュー結果がデザインと同じであることを確認し、保存して送信してください。

2. ソーシャルメディアアイコン

ストアのフッターに配置できるソーシャルメディアアイコンを提供しています。

ステップ 1

テキストパーツ（「A」アイコン）をクリックし、画面にドラッグします。

ステップ 2

</> HTML表示ボタンをクリックします。

注意：</>をクリックすると、このフィールドの内容がHTML構文に変わります。詳細については、こちらのリンクを参照してください： テキストエディタからHTMLを表示。

アイコンのHTMLコードを貼り付けます。

さまざまなアイコンのコードを提供しており、ページフッターにHTMLを使用できます。

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_facebook.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_flickr.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_google_plus.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_instagram.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://img.shoplineapp.com/media/image_clips/65a8a87fff80dc001a195556/original.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_sina_weiboo.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_tencent_weiboo.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_twitter.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_wechat.png"/>

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_whatsapp.png"/>

*ヒント： 異なるアイコンの構文をコピーする際は、<img style=........ .png"/>の全体の構文を別々にコピーしてください。

3. 支払い/配達オプション

テキスト要素（"A"アイコン）をクリックし、テキストエディタに入り、</> 機能をクリックしてください。以下のコードを投稿し、再度</>をクリックし、提供されたアイコンを配置し、再編集を開始します。

*注意：アイコンは、あなたのストアが提供する支払い/配達オプションに応じて選択してください。使用しない機能は保持しないでください。削除すると、要素ツールのHTMLを使用して再投稿できます。

<img height="40" style="max-height:40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/62297669a344ad002979d725/original.png"/>

<img height="20" style="max-height: 20px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/627b756d7cb363001b9aa69e/original.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_visa.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_master.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_paypal.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_unionpay.png"/>

<img height="30" style="max-height: 30px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/65a8a60c15126216564f6610/original.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_tw_711_pay.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_tw_fm_pay.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_taishin.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_amex.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_jcb.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_apple_pay_with_border.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_alipay_hk.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_alipay.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/62943ef1d23b980015241eff/original.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/62943ef1121e54002161a747/original.png"/>

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_google_pay.png"/> 

<img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src=" https://shoplineimg.com/assets/footer/card_fps_en.png"/>

 <img height="40" style="max-height: 60px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/628f12bb509075001bcd5a7c/original.png"/>

<img height="50" style="max-height: 70px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/628f138f43783a00214def9f/original.png"/>

<img height="40" style="max-height:40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/63ecb26abbaa99001147ff29/original.png"/>

<img height=“50” style=“max-height:50px; width: auto; display: inline-block; margin-right: 10px;” src=“https://img.shoplineapp.com/media/image_clips/647570a981ada70020572385/original.png”/>

 <img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://img.shoplineapp.com/media/image_clips/6720a67facba0c00104369b3/original.png?1730193022"/>

4. ソーシャルメディアプラットフォームやその他のアイコンを自分で置き換える

上記で提供されたソーシャルソフトウェアアイコンやその他のアイコンのスタイルがニーズに合わない場合は、以下の手順を参照して画像を置き換えることができます。

ステップ 1

まず、画像をSHOPLINEの画像ギャラリーにアップロードしてください。（画像ライブラリから画像のURLをアップロードしてコピーする方法についての詳細は、次の記事を参照してください： 画像ギャラリー）

ステップ 2

上記で提供された構文から、画像のリンクをあなたの画像リンクに変更してください。赤い部分を変更してください：

ソーシャルメディアプラットフォームアイコン：

<img style="height: 44px; width: auto; display: inline-block;" src="https://shoplineimg.com/assets/footer/social_facebook.png"/> 

支払い/配達オプションアイコン：

 <img height="40" style="max-height: 40px; width: auto; display: inline-block; margin-right: 10px;" src="https://shoplineimg.com/assets/footer/card_visa.png"/>

ステップ 3

ソーシャルメディアプラットフォームアイコンの追加と同様に、ソーシャルメディアプラットフォームアイコン および 支払い/配達オプションアイコンの手順に従って、「</>」HTML表示ボタンをクリックし、アイコンの構文を貼り付けてください。

5. テキストとアイコンにハイパーリンクを追加する

テキストパーツを使用してコンテンツを設定した後、テキストまたはアイコンを直接選択し、ツールバーの「リンク」ボタンをクリックしてハイパーリンクを設定できます。

操作手順の詳細については、こちらをクリックしてください。

さらに読む

• 紹介｜ショップビルダー
• フッター設定 | ショップビルダー