CSSコードを使用して動的なチェックアウトボタンに角丸を追加する方法

その ダイナミックチェックアウトボタン これは、顧客が以下のような迅速な決済方法を使用して商品を直接購入できる高速チェックアウトオプションです。

• ショップペイ
• PayPal
• Google Pay
• アップルを支払います

通常のカート操作を経る代わりに、顧客はワンクリックで迅速に購入を完了できます。

Shopifyでは、ダイナミックチェックアウトボタンは通常、商品ページの「カートに追加」ボタンの下に表示されます。 ダイナミックチェックアウトボタンの詳細と、GemPagesおよびShopifyでのその動作について知りたい場合は、こちらの記事をご覧ください。

Shopifyにおけるダイナミックチェックアウトボタンとは何ですか？
動的チェックアウトボタン要素

この記事では、カスタムCSSを使用して角丸を追加することで、ダイナミックチェックアウトボタンをカスタマイズする方法を紹介します。

ステップ1：カスタムコードエリアを開く

• GemPagesでページエディタを開きます。
• ダイナミックチェックアウトボタンが含まれているセクションをクリックしてください。
• 要素またはコンテナを右クリックします。
• 選択 カスタムコード.

これにより、カスタムコードエディタが開きます。

ステップ2：カスタムCSSを貼り付ける

以下のコードをカスタムコード欄に貼り付けてください。

.xxxxxxx .shopify-payment-button {

境界線の半径: 10px !important;

オーバーフロー：隠されました;

}

次に交換します .xxxxxxx 実際の要素クラスを使用します。

ステップ 3: 保存して公開する