明細表のカスタマイズ

明細表のテンプレートをカスタマイズできます。テンプレートを変更すると、独自のブランディングを追加して明細表の見た目と雰囲気を変更することができます。

ストアの住所を変更する

ストアの住所を編集または変更する場合は、[設定] > [一般] に移動してストア情報を編集します。

明細表の住所だけを変更する場合は、以下の手順に従ってください。

手順:

  1. 管理画面から、[設定] > [配送と配達] に移動します。

  2. 明細表セクションで [編集] をクリックします。

  3. ストアの住所を参照する以下のLiquid変数を見つけます。

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
  1. このコードを強調表示して、削除します。5. この空きスペースに、明細表に表示する住所を入力します。たとえば、次のように住所を入力します。
    123 Example Street, New York, NY, 10000, United States 6. [テンプレートをプレビューする] をクリックして、変更を確認します。7. [保存] をクリックします。

商品画像を削除する

明細表の商品名の横に表示される商品画像を削除できます。

手順:

  1. 管理画面から、[設定] > [配送と配達] に移動します。

  2. 明細表セクションで [編集] をクリックします。

  3. 商品画像を参照する以下のLiquid変数を見つけます。

{% if line_item.image != blank %}
       <div class="flex-line-item-img">
         <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
           {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
         </div>
       </div>
       {% endif %}
  1. このコードを強調表示して、削除します。

    1. [テンプレートをプレビューする] をクリックして変更を確認します。
    2. [Save] をクリック

ロゴを編集する

明細表にストアのロゴを追加する前に、管理画面にロゴをアップロードする必要があります。明細表に使用するファイルに割り当てられるURLが必要です。

ロゴをストアにアップロードしたら、ロゴを追加してストア名を削除したり、ストア名の上にロゴを追加したり、ストア名の横にロゴを追加することができます。

手順:

  1. 管理画面から、[設定] > [ファイル] に移動します。

  2. [ファイルをアップロード] をクリックします。

  3. お使いのデバイスから、ストアロゴを選択してアップロードします。

  4. アップロードが完了したら、ファイルのURLをコピーします。

ロゴを追加してストア名を削除する

ストア名を削除して、明細表の上部にあるストアロゴに置き換えることができます。

手順:

  1. 管理画面から、[設定] > [配送と配達] に移動します。

  2. 明細表セクションで [編集] をクリックします。

  3. ストア名を参照する以下のコードを見つけます。 <p class="to-uppercase"> {{ shop.name }} </p>

  1. このコードを強調表示して削除します。

  2. できたスペースに以下のコードを記入し、コピーしたURLを指定の位置に貼り付けます。

<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
  1. [テンプレートをプレビューする] をクリックして、変更を確認します。7. [保存] をクリックします。

ストア名の上にロゴを追加する

明細表の上部にあるストア名の上にロゴを追加する場合は、以下の手順に従ってください。

手順:

  1. 管理画面から、[設定] > [配送と配達] に移動します。
  2. 明細表セクションで [編集する] をクリックします。3. ストア名を表示する以下のLiquid変数を見つけ、2つの行の間に改行を追加します。
<div class="shop-title">
      |
      <p class="to-uppercase">
  1. できたスペースに、次のコードを記入し、コピーしたURLを指定の位置に貼り付けます。
<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
<br>
  1. [テンプレートをプレビューする] をクリックして、変更を確認します。6. [保存] をクリックします。

ストア名の横にロゴを追加する

明細表の上部にあるストア名の横にロゴを追加する場合は、以下の手順に従ってください。

手順:

  1. 管理画面から、[設定] > [配送と配達] に移動します。
  2. 明細表セクションで [編集する] をクリックします。3. ストア名を表示する以下のLiquid変数を見つけます。
<p class="to-uppercase">
{{ shop.name }}
</p>
  1. このコードを強調表示して、削除します。5. できたスペースに以下のコードを記入し、コピーしたURLを指定の位置に貼り付けます。
<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
<span class="to-uppercase">
  {{ shop.name }}
</span>
  1. 以下のLiquid変数を見つけます。
.shop-title {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  flex: 6;
  font-size: 1.9em;
}
  1. 上記の変数の最後に新しい行を追加し、次のコードを貼り付けます。
.shop-title img {
 vertical-align: middle;
}

.shop-title span {
 vertical-align: middle;
}
  1. [テンプレートをプレビューする] をクリックして、変更を確認します。9. [保存] をクリックします。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す