決済方法アイコンの差替方法

ご注意：こちらの設定方法は上級者モードでのご案内になります。初心者モードをご利用中の場合は、上級者モードへの切替をお願いいたします。【切替方法はこちら】

PACKではサイトへ決済方法アイコンを設置する事ができます。（サンプルサイトでは画面上部の決済アイコン） ここでは決済方法アイコンの差替方法を解説します。

1. [ショップ作成] → [デザイン設定]から利用中のテンプレートの[デザイン編集]をクリックします。
   
2. 下記を変更します。変更箇所はページ内に1カ所
   （ページ内検索にて「決済方法アイコン - 差替箇所」で探すと便利です。）
   
   変更前：テンプレートDL後は全てが表示の状態となっています。

   <ul class="upbar-list inline col col-md-12">
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_convenience.png" alt="コンビニ決済" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_bank.png" alt="銀行振込" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_postal.png" alt="郵便振替" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_cod.png" alt="代金引換" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_jcb.png" alt="クレジット JCB" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_mastercard.png" alt="クレジット MasterCard" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_amex.png" alt="クレジット American Express" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_visa.png" alt="クレジット VISA" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_diners.png" alt="クレジット Diners" />
     </li>
   </ul>
   

   変更後：対応していない決済アイコンはコメントアウトにて非表示にします。以下例です。

   <ul class="upbar-list inline col col-md-12">
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_convenience.png" alt="コンビニ決済" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_bank.png" alt="銀行振込" />
     </li>
     <!--
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_postal.png" alt="郵便振替" />
     </li>
     -->
     <!--
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_cod.png" alt="代金引換" />
     </li>
     -->
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_jcb.png" alt="クレジット JCB" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_mastercard.png" alt="クレジット MasterCard" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_amex.png" alt="クレジット American Express" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_visa.png" alt="クレジット VISA" />
     </li>
     <li class="upbar-list__unit">
       <img src="//img.shop-pro.jp/tmpl_img/79/icon_payment_credit_diners.png" alt="クレジット Diners" />
     </li>
   </ul>
   

3. 変更しましたら、[更新]ボタンをクリック。
4. サイトにアクセスして変更が反映されている事を確認します。