title: Shopify Buy Button JS display collection in product slider
body: <pre><code>&lt;div class=&quot;wrap&quot;&gt;&lt;div id=&quot;collection-component-1608088773387&quot;&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    /*&lt;![CDATA[*/
    (function () {
      var scriptURL = &quot;http://sdks.shopifycdn.com/buy-button/2.1.7/buybutton.js&quot;;
      if (window.ShopifyBuy) {
        if (window.ShopifyBuy.UI) {
          ShopifyBuyInit();
        } else {
          loadScript();
        }
      } else {
        loadScript();
      }
  
      function loadScript() {
        var script = document.createElement(&quot;script&quot;);
        script.async = true;
        script.src = scriptURL;
        (
          document.getElementsByTagName(&quot;head&quot;)[0] ||
          document.getElementsByTagName(&quot;body&quot;)[0]
        ).appendChild(script);
        script.onload = ShopifyBuyInit;
      }
  
      function ShopifyBuyInit() {
        var client = ShopifyBuy.buildClient({
          storefrontAccessToken: &quot;ACCESS TOKEN&quot;,
          domain: &quot;xxx.myshopify.com&quot;,
          appId: &quot;6&quot;,
        });
  
        var ui = ShopifyBuy.UI.init(client);
  
        ui.createComponent(&quot;collection&quot;, {
          id: 231614611608,
          node: document.getElementById(&quot;collection-component-1608088773387&quot;),
          moneyFormat: &quot;%24%7B%7Bamount%7D%7D&quot;,
          options: {
            product: {
              variantId: &quot;all&quot;,
              buttonDestination: &quot;modal&quot;,
              contents: {
                options: false,
              },
              styles: {
                product: {
                  &quot;max-width&quot;: &quot;none&quot;,
                  &quot;margin-right&quot;: &quot;10px&quot;,
                  width: &quot;60%&quot;,
                },
                button: {
                  &quot;background-color&quot;: &quot;#252525&quot;,
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;:hover&quot;: {
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                  &quot;:focus&quot;: {
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                variantTitle: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                title: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                },
                description: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                price: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                compareAt: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
              },
              googleFonts: [
                &quot;Open Sans&quot;,
                &quot;PT Serif&quot;,
                &quot;PT Serif&quot;,
                &quot;PT Serif&quot;,
                &quot;PT Serif&quot;,
                &quot;PT Serif&quot;,
              ],
            },
            cart: {
              contents: {
                button: true,
              },
              styles: {
                button: {
                  &quot;background-color&quot;: &quot;#252525&quot;,
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;:hover&quot;: {
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                  &quot;:focus&quot;: {
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                footer: {
                  &quot;background-color&quot;: &quot;#ffffff&quot;,
                },
              },
              googleFonts: [&quot;Open Sans&quot;],
            },
            modalProduct: {
              styles: {
                button: {
                  &quot;background-color&quot;: &quot;#252525&quot;,
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;:hover&quot;: {
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                  &quot;:focus&quot;: {
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                variantTitle: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                title: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                },
                description: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                price: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
                compareAt: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
              },
              googleFonts: [
                &quot;Open Sans&quot;,
                &quot;PT Serif&quot;,
                &quot;PT Serif&quot;,
                &quot;PT Serif&quot;,
                &quot;PT Serif&quot;,
                &quot;PT Serif&quot;,
              ],
            },
            toggle: {
              styles: {
                toggle: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                  &quot;background-color&quot;: &quot;#252525&quot;,
                  &quot;:hover&quot;: {
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                  &quot;:focus&quot;: {
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                  &quot;font-weight&quot;: &quot;normal&quot;,
                },
              },
              googleFonts: [&quot;Open Sans&quot;],
            },
            option: {
              styles: {
                label: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                },
                select: {
                  &quot;font-family&quot;: &quot;Karla&quot;,
                },
              },
              googleFonts: [&quot;PT Serif&quot;, &quot;PT Serif&quot;],
            },
            productSet: {
              classes: {
                products: &quot;shopify-buy__collection-products-foo&quot;,
              },
              styles: {
                products: {
                  display: &quot;flex&quot;,
                  //&quot;display&quot;: &quot;-webkit-flex&quot;,
                  //&quot;display&quot;: &quot;-ms-flexbox&quot;,
  
                  &quot;flex-wrap&quot;: &quot;nowrap&quot;,
                  &quot;-webkit-flex-wrap&quot;: &quot;nowrap&quot;,
                  &quot;overflow-x&quot;: &quot;auto&quot;,
                  &quot;-webkit-overflow-scrolling&quot;: &quot;touch&quot;,
                  &quot;justify-content&quot;: &quot;initial&quot;,
                  &quot;-webkit-justify-content&quot;: &quot;initial&quot;,
                  &quot;margin-left&quot;: &quot;0&quot;,
                  &quot;@media (min-width: 601px)&quot;: {
                    &quot;margin-left&quot;: &quot;-20px&quot;,
                  },
                  &quot;::-webkit-scrollbar&quot;: {
                    &quot;-webkit-appearance&quot;: &quot;none&quot;,
                    height: &quot;8px&quot;,
                  },
                  &quot;::-webkit-scrollbar-thumb&quot;: {
                    &quot;border-radius&quot;: &quot;8px&quot;,
                    border: &quot;1px solid #222222&quot;,
                    &quot;background-color&quot;: &quot;#222222&quot;,
                  },
                },
              },
            },
          },
        });
      }
    })();
    /*]]&gt;*/
  &lt;/script&gt;
  </code></pre>
  <p>Hello guys, I've been searching though how to put the Shopify buy button js collection into a slider like the 2nd picture below. Anybody can enlighten me on how to do it? So far I've found code to make the products horizontally scrollable - but it isn't exactly what I want.</p>
  <p>Currently looks like this:
  <a href="https://i.stack.imgur.com/5XgJy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5XgJy.png" alt="![enter image description here" /></a></p>
  <p>Ideally what it should look like:
  <a href="https://i.stack.imgur.com/PTVvf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PTVvf.png" alt="enter image description here" /></a></p>
  <p>I had to use buy button js to get the desired modal pop up showing the product page and add to cart option everytime the user selects a product. Could someone guide me on how I can modify the code to achieved the desired result?</p>