Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Shopify Button

    General Discussion
    1
    3
    288
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      tivnwvng last edited by

      Hi I am trying to add a shopify button to my website, but everytime I add in the javascript for it the button shows at the bottom of my homepage. What am I doing wrong?

      <!-- SHOPIFY -->
      <script>
      Frontend.GlobalEvents.on('newpageshown', function(){

      function ShopifyBuyInit() {
          var client = ShopifyBuy.buildClient({
              domain: 'sixoverone.myshopify.com',
              apiKey: '6bcba7d0a1f8b95ab9e5b16f854ab92f',
              appId: '6',
              });
          
      ShopifyBuy.UI.onReady(client).then(function (ui) {
          ui.createComponent('product', {
              id: [454150389802],
              node: document.getElementById('product-component-855b57d3151'),
              moneyFormat: '%24%7B%7Bamount%7D%7D',
              options: {
                  "product": {
                      "variantId": "all",
                      "width": "240px",
                      "contents": {
                          "img": false,
                          "imgWithCarousel": false,
                          "title": false,
                          "variantTitle": false,
                          "price": false,
                          "description": false,
                          "buttonWithQuantity": true,
                          "quantity": false
                      },
                  
                  "styles": {
                      "product": {
                          "text-align": "left",
                          "@media (min-width: 601px)": {
                              "max-width": "100%",
                              "margin-left": "0",
                              "margin-bottom": "50px"
                              }
                          },
                  
                      "button": {
                          "background-color": "#f4e973",
                          "color": "#000000",
                          ":hover": {
                              "background-color": "#dcd268",
                              "color": "#000000"
                              },
                          "border-radius": "0px",
                          ":focus": {
                              "background-color": "#dcd268"
                              }
                          },
                  
                      "title": {
                          "font-size": "26px"
                          },
                      
                      "price": {
                          "font-size": "18px"
                          },
                  
                      "compareAt": {
                          "font-size": "15px"
                          }
                      }
                  },
                  
                  "cart": {
                      "contents": {
                          "button": true
                          },
                  
                      "styles": {
                          "button": {
                              "background-color": "#f4e973",
                              "color": "#000000",
                              ":hover": {
                                  "background-color": "#dcd268",
                                  "color": "#000000"
                                  },
                      
                          "border-radius": "0px",
                          ":focus": {
                              "background-color": "#dcd268"
                              }
                          },
                  
                          "footer": {
                              "background-color": "#ffffff"
                              }
                          }
                      },
              
                  "modalProduct": {
                      "contents": {
                          "img": false,
                          "imgWithCarousel": true,
                          "variantTitle": false,
                          "buttonWithQuantity": true,
                          "button": false,
                          "quantity": false
                          },
              
                  "styles": {
                      "product": {
                          "@media (min-width: 601px)": {
                          "max-width": "100%",
                          "margin-left": "0px",
                          "margin-bottom": "0px"
                          }
                      },
              
                  "button": {
                      "background-color": "#f4e973",
                      "color": "#000000",
                      ":hover": {
                          "background-color": "#dcd268",
                          "color": "#000000"
                          },
                      "border-radius": "0px",
                          ":focus": {
                              "background-color": "#dcd268"
                              }
                          }
                      }
                  },
              
                  "toggle": {
                      "styles": {
                          "toggle": {
                              "background-color": "#f4e973",
                              ":hover": {
                                  "background-color": "#dcd268"
                                  },
                              ":focus": {
                                  "background-color": "#dcd268"
                                  }
                              },
                          "count": {
                              "color": "#000000",
                              ":hover": {
                                  "color": "#000000"
                                  }
                              },
              
                          "iconPath": {
                              "fill": "#000000"
                              }
                          }
                      },
              
                  "productSet": {
                      "styles": {
                          "products": {
                              "@media (min-width: 601px)": {
                                  "margin-left": "-20px"
                                  }
                              }
                          }
                      }
                  }
              });
          });
      }
      

      (function () {
      var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
      window.ShopifyBuy && window.ShopifyBuy.UI ? ShopifyBuyInit() : 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;
              }
          })(); 
      });
      

      </script>

      1 Reply Last reply Reply Quote 0
      • T
        tivnwvng last edited by

        And everytime I refresh the page one more add to cart button comes up. So If I clicked on 4 different pages, I would have 4 add to cart buttons stacked up on top of each other.

        1 Reply Last reply Reply Quote 0
        • T
          tivnwvng last edited by

          Nevermind I figured it out.

          Holy shit ahahahaha.

          1 Reply Last reply Reply Quote 0
          • First post
            Last post

          Before you post

          Use the Search Feature. Maybe there is already a solution to your issue.

          1. Update Lay Theme and all Lay Theme Addons
          2. Disable all Plugins
          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
          4. Now see if your problem solved itself
          5. Go here, see if your problem is listed here:
          Troubleshooting

          When you post:
          1. Post a link to where the problem is
          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

          Thanks!

          Online Users

          S
          A
          7
          T
          K

          Recent Topics

          • S

            can't change front page

          • A

            Theme crashed - because of Polylang?

          • M

            komische boxen auf der Website

          laytheme.com