# カートページ内のチェックアウトボタンについて相談です。

**URL:** <https://community.shopify.com/t/topic/109284>\
**Category:** サンプルコード集（アプリ・テーマ）\
**Created:** [March 25, 2022, 6:45am UTC](https://community.shopify.com/t/topic/109284 "2022-03-25T06:45:39Z")\
**Posts on this page:** 1\
**Page:** 1

## AI-generated summary

カートページのチェックアウト周りの見直し。楽天ペイ（SBペイメント経由）を導入済みで、チェックアウト前のカートにもAmazon Pay等のようなボタンを表示したい。さらに、Amazon/Google Payなどのボタンを「ご購入はこちら」と同様に横幅いっぱいで表示したい。添付画像が前提。 

提示コードはcart-template.liquidの該当箇所で、checkoutボタン（class: btn--small-wide）とadditional_checkout_buttons（{{ content_for_additional_checkout_buttons }}）の出力を含む。CSSのbtn--small-wideを調整すると「ご購入はこちら」ボタンの幅は変えられるが、Amazon/Google Payボタンの幅は変わらない。 

未解決の点: 1) 楽天ペイのボタンをカートページに表示する具体的手順の有無。2) Amazon/Google Payなどサードパーティ決済ボタンの横幅をテーマ側CSSで制御できるか、もしくは提供元スクリプトの制約で不可能なのか。 

現状の結論や対処法は示されておらず、回答待ちの状態。追加の実装ガイドやスタイル調整方法に関する情報提供を求めている。

<div class="post-metadata">

**Author:** ![masuda\_1](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@masuda\_1](https://community.shopify.com/u/masuda_1)\
**Post date:** [March 25, 2022, 6:45am UTC](https://community.shopify.com/t/topic/109284/1 "2022-03-25T06:45:39Z")

</div>

cartページのカスタマイズの相談です。

SBペイメントより楽天ペイ導入の手続きを完了したのですが、チェックアウトに行く前のカートページにもAmazonペイ等のようにボタンを表示させたいですが、私の調べ方が悪いのか、調べても出てこないということは無理なんでしょうか。

①楽天ペイのボタンを表示させたい。

②Amazonペイ～Googleペイなども「ご購入はこちら」のボタンと同じように横幅いっぱいに表示させたい。

※添付画像をご確認ください。

コード編集の「cart-template.liquid」の「ご購入はこちら」あたりのコードは下記のようになります。

{%- capture taxes\_shipping\_checkout -%}  
{%- if shop.taxes\_included and shop.shipping\_policy.body != blank -%}  
{{ ‘cart.general.taxes\_included\_and\_shipping\_policy\_html’ | t: link: shop.shipping\_policy.url }}  
{%- elsif shop.taxes\_included -%}  
{{ ‘cart.general.taxes\_included\_but\_shipping\_at\_checkout’ | t }}  
{%- elsif shop.shipping\_policy.body != blank -%}  
{{ ‘cart.general.taxes\_and\_shipping\_policy\_at\_checkout\_html’ | t: link: shop.shipping\_policy.url }}  
{%- else -%}  
{{ ‘cart.general.taxes\_and\_shipping\_at\_checkout’ | t }}  
{%- endif -%}  
{%- endcapture -%}

{{ taxes\_shipping\_checkout }}

{% render "cart-attributes-os1" %}
{%- unless section.settings.cart\_ajax\_enable -%} {%- endunless -%} \*\*\*\*

{{ 'general.accessibility.error' | t }} {% include 'icon-error' %} 

{%- if additional\_checkout\_buttons -%}

{{ content\_for\_additional\_checkout\_buttons }}
{%- endif -%}

# {{ 'cart.general.title' | t }}

{{ 'cart.general.empty' | t }}

{{ 'cart.general.cookies\_required' | t }}

{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}

上記、赤文字部分の\*\*「\*\*\*\*btn–small-wide」\*\*のCSSは発見でき、paddingをいじると「ご購入はこちら」ボタンの幅などは変更できたのですが、Amazonペイなどのボタンは幅が変更されませんでした。

ご教示いただけますと幸いです。

何卒よろしくお願いいたします。