FROM CACHE - jp_header

決済アイコンをカートページ上部に設置したい

解決済
showa0726
観光客
5 0 1

決済アイコンをカートページ上部に設置したいのですが、可能でしょうか?

他サイト様で同じような表示がされていたので質問させていただきます。

  • CSS
1 件の受理された解決策
Qcoltd
Shopify Partner
937 373 356

成功

ご質問いただいているヘッダーに決済アイコンを表示したい件ですが、

管理画面のコード編集よりheader.liquidを選択していただき、

ヘッダーの掲載したい箇所に下記ソースを記載いただければ、

決済アイコンを表示する事が可能になります。

また、記載後CSSで見た目を整えていただければと思います。

 

設定方法

1.管理画面 > オンラインストア > 「・・・」をクリックし、コードを編集を選択。

2.検索窓に「header.liquid」と検索し、対象ファイルを選択。

3.header.liquid内で、任意の箇所に下記ソースを記載。

Shopifyの標準で決済アイコンを表示している場合の追加コード

<ul class="list list-payment" role="list">
  {%- for type in shop.enabled_payment_types -%}
    <li class="list-payment__item">
      {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    </li>
  {%- endfor -%}
</ul>

決済アイコンを手動で掲載している場合の追加コード

<ul class="list list-payment" role="list">
  {% assign enabled_payment_types = '決済キャリア名をカンマ区切りで記載' | remove: ' ' | split: ',' %}
  {%- for type in enabled_payment_types -%}
    <li class="list-payment__item">
      {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    </li>
  {%- endfor -%}
</ul>

 

決済キャリア名部分は下記Shopifyサイトよりご確認ください。

https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...

日本の決済方法については、Shopifyの決済アプリを提供されているKOMOJUサイトに記載がありましたのでそちらをご確認ください。

https://komoju-ja.helpscoutdocs.com/article/624-shopify

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

1件の返信1
Qcoltd
Shopify Partner
937 373 356

成功

ご質問いただいているヘッダーに決済アイコンを表示したい件ですが、

管理画面のコード編集よりheader.liquidを選択していただき、

ヘッダーの掲載したい箇所に下記ソースを記載いただければ、

決済アイコンを表示する事が可能になります。

また、記載後CSSで見た目を整えていただければと思います。

 

設定方法

1.管理画面 > オンラインストア > 「・・・」をクリックし、コードを編集を選択。

2.検索窓に「header.liquid」と検索し、対象ファイルを選択。

3.header.liquid内で、任意の箇所に下記ソースを記載。

Shopifyの標準で決済アイコンを表示している場合の追加コード

<ul class="list list-payment" role="list">
  {%- for type in shop.enabled_payment_types -%}
    <li class="list-payment__item">
      {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    </li>
  {%- endfor -%}
</ul>

決済アイコンを手動で掲載している場合の追加コード

<ul class="list list-payment" role="list">
  {% assign enabled_payment_types = '決済キャリア名をカンマ区切りで記載' | remove: ' ' | split: ',' %}
  {%- for type in enabled_payment_types -%}
    <li class="list-payment__item">
      {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    </li>
  {%- endfor -%}
</ul>

 

決済キャリア名部分は下記Shopifyサイトよりご確認ください。

https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...

日本の決済方法については、Shopifyの決済アプリを提供されているKOMOJUサイトに記載がありましたのでそちらをご確認ください。

https://komoju-ja.helpscoutdocs.com/article/624-shopify

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/