# 購入ボタンとカート画面のカスタマイズ

**URL:** <https://community.shopify.com/t/topic/124222>\
**Category:** 技術的なQ＆A\
**Created:** [May 27, 2022, 10:34am UTC](https://community.shopify.com/t/topic/124222 "2022-05-27T10:34:28Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

外部WordPressに埋め込んだShopify購入ボタン（Shopify Lite、オンラインストアなし）のUIを、CSSのように自由にカスタマイズしたいという相談。バリエーション用プルダウンと購入・カートボタンを親要素いっぱいにし、プルダウンの角丸や左右ボーダーを除去、カートボタンや×アイコンの見た目・青いフォーカス線の非表示、カート画面左端のドロップシャドーをボーダーに変更したい。 

提案:
- 既存コミュニティ投稿とShopify Buy Button JS（JavaScript SDK）のCustomization/Advancedドキュメント参照を案内。
- 購入ボタン生成コードのoptions.styles/text等でスタイルを指定可能と説明。
- 具体例として、options.cart.stylesで「box-shadow: unset」「border-left: 1px solid #ccc」を設定してドロップシャドーをボーダーに置換。
- optionsのtemplates.detailsでDOMを書き換え、より大幅な再設計も可能と補足。

結果:
- 質問者はbuy-button-storefront.min.jsに定義されたclassを特定し、購入ボタンコードに加えることで細部までカスタマイズに成功し解決。
- スクリーンショットは参考用添付。議論は解決済み。

<div class="post-metadata">

**Author:** ![yanana](https://avatars.discourse-cdn.com/v4/letter/y/ecd19e/32.png) [@yanana](https://community.shopify.com/u/yanana)\
**Post date:** [May 27, 2022, 10:34am UTC](https://community.shopify.com/t/topic/124222/1 "2022-05-27T10:34:28Z")

</div>

購入ボタンを外部のwordpressで作ったサイトに埋め込んでいます。

Lite プランなので、Shopifyの方にオンラインストアはありません。

商品にはバリエーションがあるので、カートへ商品を追加するボタンの上にプルダウンがあります。

Shopifyの管理画面で書き出したコードを修正することである程度カスタマイズはできますが、CSSで行うように、

もう少し自由にデザインを変更したいと考えています。

変更したい点は、

・プルダウン、ボタンとも親要素の幅ギリギリまで横幅を広げたい。

・プラダウンの角丸をなくして、左右のボーダーをなくしたい。（ボーダーは上下のみに。）ボーダーの色を変える。

・商品がカートに入っている時に表示されるカートボタンのデザインを変えたい。カートアイコンや背景色、ボタン自体の形・大きさ等。

・カート画面を閉じる右上の×印のアイコンデザインを変えたい。カートを開いた時に×印の周りの青い線も消したいです。画面の他の部分をクリックすると消えますが、カートを開いた時点では線は表示されています。

・カート画面の左端のドロップシャドーをやめて、単純なボーダーにしたい。

というところです。

どのようにすればよいのでしょうか。アドバイスをお願いいたします。

現状のスクリーンショットを添付いたしました。合わせて見ていただければと思います。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [May 30, 2022, 11:20am UTC](https://community.shopify.com/t/topic/124222/2 "2022-05-30T11:20:41Z")

</div>

同様のご質問がコミュニティ内にあるようですので、こちらをご覧いただくのが良いかもしれません。

[https://community.shopify.com/post/1126983](https://community.shopify.com/post/1126983)

もし、JSやCSSに慣れていらっしゃるなら、

下記のドキュメントを参考にされると、自由にカスタマイズ可能かと思います。

[https://shopify.github.io/buy-button-js/customization/](https://shopify.github.io/buy-button-js/customization/)

[https://shopify.github.io/buy-button-js/advanced/](https://shopify.github.io/buy-button-js/advanced/)

具体的にいうと、

購入ボタンのコードのうち下記の部分でCSSカスタマイズが可能です。

```javascript
options: {
    "product": {
      "styles": {
        "product": {
          "@media (min-width: 601px)": {
            "max-width": "calc(25% - 20px)",
            "margin-left": "20px",
            "margin-bottom": "50px"
          }
        }
      },
      "text": {
        "button": "Add to cart"
      }
    },
    "productSet": {
      "styles": {
        "products": {
          "@media (min-width: 601px)": {
            "margin-left": "-20px"
          }
        }
      }
    },
    "modalProduct": {
      "contents": {
        "img": false,
        "imgWithCarousel": true,
        "button": false,
        "buttonWithQuantity": true
      },
      "styles": {
        "product": {
          "@media (min-width: 601px)": {
            "max-width": "100%",
            "margin-left": "0px",
            "margin-bottom": "0px"
          }
        }
      },
      "text": {
        "button": "Add to cart"
      }
    },
    "option": {},
    "cart": {
      "text": {
        "total": "Subtotal",
        "button": "Checkout"
      }
    },

```

私も、実際にカスタマイズをしたことはなく、

上記のドキュメントを見ながら開発ストアで試して、この返信を書いておりまして、

全てを説明するのは難しいのですが、

> カート画面の左端のドロップシャドーをやめて、単純なボーダーにしたい。

参考までに、

こちらをどうやるかについてご説明しますと、

質問者様の上記コード部分(私が貼ったものとは質問者様の該当コードは異なるはずです)のうち下記の部分を、

```javascript
"cart": {
      "text": {
        "total": "Subtotal",
        "button": "Checkout"
      }
    },

```

下記のように変更すると実現できます。

```markup
"cart": {
      "styles": {
        "cart": {
          "box-shadow": "unset",
          "border-left": "1px solid #ccc"
        }
      },
      "text": {
        "total": "Subtotal",
        "button": "Checkout"
      }
    },

```

optionの、templates.detials で DOMを書き換えることも可能なようですので、

慣れれば完全にデザインし直すこともできそうです。

参考になれば幸いです。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![yanana](https://avatars.discourse-cdn.com/v4/letter/y/ecd19e/32.png) [@yanana](https://community.shopify.com/u/yanana)\
**Post date:** [June 3, 2022, 1:18am UTC](https://community.shopify.com/t/topic/124222/3 "2022-06-03T01:18:11Z")

</div>

アドバイスありがとうございます。

[https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js](https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js)

で設定されているclassを見つけ出し、購入ボタンのコードに加えていくとかなり細かい部分までカスタマイズできました。助かりました！！