VibeCoderzVibeCoderz
Telegram
All Prompts
Shopify Buy Button - Add to Cart preview
buttonecommerceshopifycartmodernroundedgreenbold

Shopify Buy Button - Add to Cart

Кнопка "Купить" Shopify для добавления товаров в корзину. Зеленая, с эффектом при наведении. Интеграция с магазином Shopify.

Prompt

<div class="shopify-buy-button-container">
  <style>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
    
    .shopify-buy-button-container {
      font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    }</style>
  <div id="product-component-1765309277508"></div>
  <script type="text/javascript">(function () {
      var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
      if (window.ShopifyBuy) {
        if (window.ShopifyBuy.UI) {
          ShopifyBuyInit();
        } else {
          loadScript();
        }
      } else {
        loadScript();
      }
      function loadScript() {
        var script = document.createElement('script');
        script.async = true;
        script.src = scriptURL;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
        script.onload = ShopifyBuyInit;
      }
      function ShopifyBuyInit() {
        var client = ShopifyBuy.buildClient({
          domain: 'dbjzit-ji.myshopify.com',
          storefrontAccessToken: '30010a7b7ca6a999d1d4bd7e0935b533',
        });
        ShopifyBuy.UI.onReady(client).then(function (ui) {
          ui.createComponent('product', {
            id: '7552609321073',
            node: document.getElementById('product-component-1765309277508'),
            moneyFormat: 'R%20%7B%7Bamount%7D%7D',
            options: {
              "product": {
                "styles": {
                  "product": {
                    "@media (min-width: 601px)": {
                      "max-width": "calc(25% - 20px)",
                      "margin-left": "20px",
                      "margin-bottom": "50px"
                    }
                  },
                  "button": {
                    "font-family": "Montserrat, sans-serif",
                    "font-weight": "bold",
                    ":hover": {
                      "background-color": "#51b21e"
                    },
                    "background-color": "#5ac621",
                    ":focus": {
                      "background-color": "#51b21e"
                    },
                    "border-radius": "27px",
                    "padding-left": "73px",
                    "padding-right": "73px"
                  }
                },
                "text": {
                  "button": "Add to cart"
                },
                "googleFonts": [
                  "Montserrat"
                ]
              },
              "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"
                    }
                  },
                  "button": {
                    "font-family": "Montserrat, sans-serif",
                    "font-weight": "bold",
                    ":hover": {
                      "background-color": "#51b21e"
                    },
                    "background-color": "#5ac621",
                    ":focus": {
                      "background-color": "#51b21e"
                    },
                    "border-radius": "27px",
                    "padding-left": "73px",
                    "padding-right": "73px"
                  }
                },
                "googleFonts": [
                  "Montserrat"
                ],
                "text": {
                  "button": "Add to cart"
                }
              },
              "option": {},
              "cart": {
                "styles": {
                  "button": {
                    "font-family": "Montserrat, sans-serif",
                    "font-weight": "bold",
                    ":hover": {
                      "background-color": "#51b21e"
                    },
                    "background-color": "#5ac621",
                    ":focus": {
                      "background-color": "#51b21e"
                    },
                    "border-radius": "27px"
                  }
                },
                "text": {
                  "total": "Subtotal",
                  "button": "Checkout"
                },
                "googleFonts": [
                  "Montserrat"
                ]
              },
              "toggle": {
                "styles": {
                  "toggle": {
                    "font-family": "Montserrat, sans-serif",
                    "font-weight": "bold",
                    "background-color": "#5ac621",
                    ":hover": {
                      "background-color": "#51b21e"
                    },
                    ":focus": {
                      "background-color": "                    }
                  }
                },
                "googleFonts": [
                  "Montserrat"
                ]
              }
            },
          });
        });
      }
    })();</script>
</div>
All Prompts