title: Shopify Buy Button - click on external image and scroll automatically on collection
body: <p>I am trying to use shopify lite and buy button to create an art store. The purpose is to have a fixed light spectrum on the top of the page (as shown below), and the collection with buy buttons underneath it. Everytime the user clicks on a specific part of the spectrum, the collection should scroll to a defined product.</p>
  <p>Any idea how to implement this? Many thanks</p>
  <p>Code and images below</p>
  <pre><code>  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: ###,
        storefrontAccessToken: ###,
      });
      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('collection', {
          id: '397519487215',
          node: document.getElementById('collection-component-1655137222708'),
          moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
          options: {
    &quot;product&quot;: {
      &quot;styles&quot;: {
        &quot;product&quot;: {
          &quot;@media (min-width: 601px)&quot;: {
            &quot;max-width&quot;: &quot;calc(50% - 40px)&quot;,
            &quot;margin-left&quot;: &quot;40px&quot;,
            &quot;margin-bottom&quot;: &quot;50px&quot;,
            &quot;width&quot;: &quot;calc(50% - 40px)&quot;
          },
          &quot;img&quot;: {
            &quot;height&quot;: &quot;calc(100% - 15px)&quot;,
            &quot;position&quot;: &quot;absolute&quot;,
            &quot;left&quot;: &quot;0&quot;,
            &quot;right&quot;: &quot;0&quot;,
            &quot;top&quot;: &quot;0&quot;
          },
          &quot;imgWrapper&quot;: {
            &quot;padding-top&quot;: &quot;calc(75% + 15px)&quot;,
            &quot;position&quot;: &quot;relative&quot;,
            &quot;height&quot;: &quot;0&quot;
          }
        },
        &quot;button&quot;: {
          &quot;font-family&quot;: &quot;Open Sans, sans-serif&quot;,
          &quot;font-size&quot;: &quot;13px&quot;,
          &quot;padding-top&quot;: &quot;14.5px&quot;,
          &quot;padding-bottom&quot;: &quot;14.5px&quot;,
          &quot;:hover&quot;: {
            &quot;background-color&quot;: &quot;#7d7d7d&quot;
          },
          &quot;background-color&quot;: &quot;#8b8b8b&quot;,
          &quot;:focus&quot;: {
            &quot;background-color&quot;: &quot;#7d7d7d&quot;
          },
          &quot;border-radius&quot;: &quot;0px&quot;,
          &quot;padding-left&quot;: &quot;26px&quot;,
          &quot;padding-right&quot;: &quot;26px&quot;
        },
        &quot;quantityInput&quot;: {
          &quot;font-size&quot;: &quot;13px&quot;,
          &quot;padding-top&quot;: &quot;14.5px&quot;,
          &quot;padding-bottom&quot;: &quot;14.5px&quot;
        }
      },
      &quot;buttonDestination&quot;: &quot;modal&quot;,
      &quot;contents&quot;: {
        &quot;options&quot;: false
      },
      &quot;text&quot;: {
        &quot;button&quot;: &quot;View product&quot;
      },
      &quot;googleFonts&quot;: [
        &quot;Open Sans&quot;
      ]
    },
    &quot;productSet&quot;: {
      &quot;styles&quot;: {
        &quot;products&quot;: {
          &quot;@media (min-width: 601px)&quot;: {
            &quot;margin-left&quot;: &quot;-40px&quot;
          }
        }
      }
    },
    &quot;modalProduct&quot;: {
      &quot;contents&quot;: {
        &quot;img&quot;: false,
        &quot;imgWithCarousel&quot;: true
      },
      &quot;styles&quot;: {
        &quot;product&quot;: {
          &quot;@media (min-width: 601px)&quot;: {
            &quot;max-width&quot;: &quot;100%&quot;,
            &quot;margin-left&quot;: &quot;0px&quot;,
            &quot;margin-bottom&quot;: &quot;0px&quot;
          }
        },
        &quot;button&quot;: {
          &quot;font-family&quot;: &quot;Open Sans, sans-serif&quot;,
          &quot;font-size&quot;: &quot;13px&quot;,
          &quot;padding-top&quot;: &quot;14.5px&quot;,
          &quot;padding-bottom&quot;: &quot;14.5px&quot;,
          &quot;:hover&quot;: {
            &quot;background-color&quot;: &quot;#7d7d7d&quot;
          },
          &quot;background-color&quot;: &quot;#8b8b8b&quot;,
          &quot;:focus&quot;: {
            &quot;background-color&quot;: &quot;#7d7d7d&quot;
          },
          &quot;border-radius&quot;: &quot;0px&quot;,
          &quot;padding-left&quot;: &quot;26px&quot;,
          &quot;padding-right&quot;: &quot;26px&quot;
        },
        &quot;quantityInput&quot;: {
          &quot;font-size&quot;: &quot;13px&quot;,
          &quot;padding-top&quot;: &quot;14.5px&quot;,
          &quot;padding-bottom&quot;: &quot;14.5px&quot;
        }
      },
      &quot;googleFonts&quot;: [
        &quot;Open Sans&quot;
      ],
      &quot;text&quot;: {
        &quot;button&quot;: &quot;Add to cart&quot;
      }
    },
    &quot;option&quot;: {},
    &quot;cart&quot;: {
      &quot;styles&quot;: {
        &quot;button&quot;: {
          &quot;font-family&quot;: &quot;Open Sans, sans-serif&quot;,
          &quot;font-size&quot;: &quot;13px&quot;,
          &quot;padding-top&quot;: &quot;14.5px&quot;,
          &quot;padding-bottom&quot;: &quot;14.5px&quot;,
          &quot;:hover&quot;: {
            &quot;background-color&quot;: &quot;#7d7d7d&quot;
          },
          &quot;background-color&quot;: &quot;#8b8b8b&quot;,
          &quot;:focus&quot;: {
            &quot;background-color&quot;: &quot;#7d7d7d&quot;
          },
          &quot;border-radius&quot;: &quot;0px&quot;
        }
      },
      &quot;text&quot;: {
        &quot;total&quot;: &quot;Subtotal&quot;,
        &quot;button&quot;: &quot;Checkout&quot;
      },
      &quot;popup&quot;: false,
      &quot;googleFonts&quot;: [
        &quot;Open Sans&quot;
      ]
    },
    &quot;toggle&quot;: {
      &quot;styles&quot;: {
        &quot;toggle&quot;: {
          &quot;font-family&quot;: &quot;Open Sans, sans-serif&quot;,
          &quot;background-color&quot;: &quot;#8b8b8b&quot;,
          &quot;:hover&quot;: {
            &quot;background-color&quot;: &quot;#7d7d7d&quot;
          },
          &quot;:focus&quot;: {
            &quot;background-color&quot;: &quot;#7d7d7d&quot;
          }
        },
        &quot;count&quot;: {
          &quot;font-size&quot;: &quot;13px&quot;
        }
      },
      &quot;googleFonts&quot;: [
        &quot;Open Sans&quot;
      ]
    }
  },
        });
      });
    }
  })();
  /*]]&gt;*/
  &lt;/script&gt;
  </code></pre>
  <p><strong>Initial Collection</strong></p>
  <p><a href="https://i.stack.imgur.com/PkL16.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PkL16.jpg" alt="enter image description here" /></a></p>
  <p><strong>Collection sorted</strong></p>
  <p><a href="https://i.stack.imgur.com/8bDRu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8bDRu.png" alt="enter image description here" /></a></p>