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

日本語 ディスカッション 技術的なQ＆A
1

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

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

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

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

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

変更したい点は、

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

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

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

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

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

というところです。

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

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

2

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

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/buybutton%E3%81%AB%E7%8B%AC%E8%87%AA%E3%81%AE%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AF%E5%BD%93%E3%81%A6%E3%82%8C%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B/m-p/1126983#M2313

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

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

https://shopify.github.io/buy-button-js/customization/

https://shopify.github.io/buy-button-js/advanced/

具体的にいうと、

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

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"
      }
    },

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

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

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

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

参考までに、

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

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

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

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

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

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

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

参考になれば幸いです。

(キュー田辺)

3

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

https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js

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

1 Like