ヘルプ
ログイン

明細表のカスタマイズ

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

このページの内容

ストアの住所を変更する

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

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

手順：

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

  2. ドキュメントセクションで、明細表のテンプレートをクリックします。

  3. ストアの住所を参照する {{ shop_address.summary }} Liquid 変数を見つけます。この変数が見つからない場合は、次の変数を試してください。

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
  1. このコードをハイライトして、削除します。
  2. この空白部分に、明細表に記載する住所を入力します。たとえば、次のように住所を入力できます。 123 Example Street, New York, NY, 10000, United States
  3. [テンプレートをプレビュー] をクリックして、変更を確認します。
  4. [保存] をクリックします。

商品画像を削除する

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

手順：

  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. このコードをハイライトして、削除します。
  2. [テンプレートをプレビュー] をクリックして、変更をプレビューします。
  3. [保存] をクリックします。

明細表にストアのロゴを追加する前に、管理画面にロゴをアップロードする必要があります。アップロード後、明細表のテンプレートで後ほど使用するために、アップロードしたファイルのファイル名を控えておいてください。

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

手順：

  1. 管理画面から、[コンテンツ] > [ファイル] に移動します。

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

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

  4. アップロードが完了したら、ファイルの拡張子 (.pngや.jpgなど) を含むファイル名を控えてください。

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

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

手順：

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

  2. ドキュメントセクションで、明細表のテンプレートをクリックします。

  3. ストア名を参照する、次のコードを見つけます。

<p class="to-uppercase">
  {{ shop.name }}
</p>
  1. このコードをハイライトして、削除します。
  2. 作成したスペースに、先ほどアップロードしたファイル名を使用して以下のコードを記述します。
{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}

file_img_urlフィルターは指定されたサイズでアップロード済みファイルの URL を生成し、img_tagフィルターは指定した代替テキストを含む HTML 画像タグを作成します。

たとえば、アップロードされたファイルが shop_logo.png の場合、対応する Liquid コードは次のようになります。

{{ 'shop_logo.png' | file_img_url: 'small' | img_tag: 'Logo' }}
  1. [テンプレートをプレビュー] を選択して、変更をプレビューします。
  2. [保存] をクリックします。

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

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

手順：

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

  2. ドキュメントセクションで、明細表のテンプレートをクリックします。

  3. ストア名を参照する次の Liquid 変数を見つけ、2行の間に改行を追加します。

<div class="shop-title">
      |
      <p class="to-uppercase">
  1. 作成したスペースに、先ほどアップロードしたファイル名 (たとえば、shop_logo.png) を使用して、以下のコードを記述します。
{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<br>
  1. [テンプレートをプレビュー] を選択して、変更をプレビューします。
  2. [保存] をクリックします。

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

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

手順：

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

  2. ドキュメントセクションで、明細表のテンプレートをクリックします。

  3. ストア名を参照する、次の Liquid 変数を見つけます。

<p class="to-uppercase">
{{ shop.name }}
</p>
  1. このコードをハイライトして、削除します。
  2. 作成したスペースに、先ほどアップロードしたファイル名 (たとえば、shop_logo.png) を使用して、以下のコードを記述します。
{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<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. [テンプレートをプレビュー] を選択して、変更をプレビューします。
  2. [保存] をクリックします。

CSS を使用して明細表のスタイルを設定する

Shopify にアップロードした CSS ファイルを使用して、明細表をカスタマイズできます。Shopify の外部でホストされている CSS ファイルは正しく表示されません。

手順：

  1. 管理画面から、[コンテンツ] > [ファイル] に移動します。

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

  3. CSS ファイルを選択してアップロードします。

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

  5. 次のコードを含めます。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.shopify.com/path_to_file/styles.css"
>