Buy Button Code is causing to all my products to repeat on my home page. I need answers...

Highlighted
Tourist
6 0 1

Hello Everyone, I have tried using the Buy Button app in shopify to help create "Add to cart" buttons on all my products on my homepage. After countless hours of trying to find the correct place to post it. I found that Product-Grid-Item.liquid was my best bet. However when the code began to look like it was working, I noticed that my products would repeat well over a dozen times. I reached out to Shopify Guru's and was lead here to further my research in trying to resolve this matter. If anyone knows how to fix this it would be greatly appreciated. Here is the code with the "Add to cart" feature...

 

 

<div id='collection-component-1585974120048'></div>
<script type="text/javascript">
/*<![CDATA[*/
(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: 'the-a-l-l.myshopify.com',
      storefrontAccessToken: '90cc996f0ad979bca0fd015d4435e020',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('collection', {
        id: '180345700397',
        node: document.getElementById('collection-component-1585974120048'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(33.33333% - 30px)",
          "margin-left": "30px",
          "margin-bottom": "50px",
          "width": "calc(33.33333% - 30px)"
        },
        "img": {
          "height": "calc(100% - 15px)",
          "position": "absolute",
          "left": "0",
          "right": "0",
          "top": "0"
        },
        "imgWrapper": {
          "padding-top": "calc(75% + 15px)",
          "position": "relative",
          "height": "0"
        }
      },
      "title": {
        "color": "#2e2a2a"
      },
      "button": {
        "font-weight": "bold",
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px",
        ":hover": {
          "background-color": "#d31010"
        },
        "background-color": "#ea1212",
        ":focus": {
          "background-color": "#d31010"
        },
        "border-radius": "0px"
      },
      "quantityInput": {
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px"
      },
      "price": {
        "font-size": "15px",
        "color": "#292727"
      },
      "compareAt": {
        "font-size": "12.75px",
        "color": "#292727"
      },
      "unitPrice": {
        "font-size": "12.75px",
        "color": "#292727"
      }
    },
    "buttonDestination": "checkout",
    "text": {
      "button": "Buy now"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-30px"
        }
      }
    }
  },
  "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-weight": "bold",
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px",
        ":hover": {
          "background-color": "#d31010"
        },
        "background-color": "#ea1212",
        ":focus": {
          "background-color": "#d31010"
        },
        "border-radius": "0px"
      },
      "quantityInput": {
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "option": {
    "styles": {
      "label": {
        "color": "#030303"
      }
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-weight": "bold",
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px",
        ":hover": {
          "background-color": "#d31010"
        },
        "background-color": "#ea1212",
        ":focus": {
          "background-color": "#d31010"
        },
        "border-radius": "0px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold",
        "background-color": "#ea1212",
        ":hover": {
          "background-color": "#d31010"
        },
        ":focus": {
          "background-color": "#d31010"
        }
      },
      "count": {
        "font-size": "16px"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>
1 Like
Highlighted
Shopify Partner
2953 399 761

Hello, @TheALL 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
6 0 1

Hello, @KetanKumar 

Thank you for the assistance.

My URL is www.theartlifeleft.com/

 

 

0 Likes
Highlighted
Shopify Partner
2953 399 761

Thanks for URL.
sorry for This site can’t be reached.
can you please check let me know.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
6 0 1

Interesting. Try this link. 

 

www.theartlifeleft.com

 

or my catalog link. May have to click home when you arrive to link site

 

https://theartlifeleft.com/collections/all

0 Likes