明細表をカスタマイズする

このページはSep 09, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/fulfillment/managing-orders/printing-orders/packing-slips/customizing-packing-slipsをご覧ください。

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

目次

ストアの所在地を変更する

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

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

手順

  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. [保存] をクリックします。

ロゴを編集する

明細表にストアのロゴを追加する前に、管理画面にロゴをアップロードする必要があります。明細表に使用するファイルに割り当てられる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. [テンプレートをプレビューする] を選択して変更を確認します。
  2. [保存] をクリックします。

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

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

手順

  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. [テンプレートをプレビューする] を選択して変更を確認します。
  2. [保存] をクリックします。

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

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

手順

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

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

  3. あなたのストア名を参照する以下のLiquid変数を見つけます。

<p class="to-uppercase">
{{ shop.name }}
</p>
  1. このコードを強調表示して削除します。
  2. できたスペースに以下のコードを記入し、コピーした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. [テンプレートをプレビューする] を選択して変更を確認します。
  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"
>

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

無料体験を試す