How to sticky overlay the buy buttons on this product page?

[empiricalarby]

https://empiricalwater.com/products/starter-kit

Dawn theme.

It would be pretty ideal to get this working on both desktop and mobile. Cheers

[BSSCommerce-HDL · Accepted solution]

Hi @empiricalarby ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

{% assign full_url = request.host | append: request.path %}
{% if full_url contains '/products/starter-kit' %}
<style>
div:has(.product-form) {
    position: sticky !important;
    top: 10px;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSS-TekLabs · Accepted solution]

Hi @empiricalarby,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the theme.liquid file.

3, Paste the code snippet provided below right before the closing head tag, then save your changes.

<script>
  document.addEventListener("DOMContentLoaded", () => {
      const targetURLs = [
          "https://empiricalwater.com/products/starter-kit",
      ];

      if (targetURLs.some(url => window.location.href.includes(url))) {
          const style = document.createElement('style');
          style.textContent = `
              #ProductInfo-template--18120489337083__main > div:nth-child(5) {
                  background: #fff;
                  position: sticky;
                  top: 0;
                  padding-top: 1px;
              }
          `;
          document.head.appendChild(style);
      }
  });
</script>

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[BSSCommerce-HDL · Accepted solution]

Hi @empiricalarby ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

{% assign full_url = request.host | append: request.path %}
{% if full_url contains '/products/starter-kit' %}
<style>
div:has(.product-form) {
    position: sticky !important;
    top: 10px;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[empiricalarby]

Wow, that was incredibly quick! This is really nice! Are you able to give the area above the dynamic button a white background to avoid clashing with the text?

I'm referring to this area, including under the "only X left" text.

[BSS-TekLabs · Accepted solution]

Hi @empiricalarby,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the theme.liquid file.

3, Paste the code snippet provided below right before the closing head tag, then save your changes.

<script>
  document.addEventListener("DOMContentLoaded", () => {
      const targetURLs = [
          "https://empiricalwater.com/products/starter-kit",
      ];

      if (targetURLs.some(url => window.location.href.includes(url))) {
          const style = document.createElement('style');
          style.textContent = `
              #ProductInfo-template--18120489337083__main > div:nth-child(5) {
                  background: #fff;
                  position: sticky;
                  top: 0;
                  padding-top: 1px;
              }
          `;
          document.head.appendChild(style);
      }
  });
</script>

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[empiricalarby]

Nicely done!

[BSS-TekLabs]

You're welcome! 😊

[empiricalarby]

Just noticed something, are you able to remove this white space to save space on the screen?

It would help a lot, especially on mobile. Also please refer to the screenshot above: That's the perfect position where the button should stop, instead of how it is now:

[BSS-TekLabs]

Please replace the previous code snippet with this code snippet. The styling has been updated.

<script>
  document.addEventListener("DOMContentLoaded", () => {
      const targetURLs = [
          "https://empiricalwater.com/products/starter-kit",
      ];

      if (targetURLs.some(url => window.location.href.includes(url))) {
          const style = document.createElement('style');
          style.textContent = `
              #ProductInfo-template--18120489337083__main > div:nth-child(5) {
                  background: #fff;
                  position: sticky;
                  top: 0;
                  padding-top: 0;
                  z-index: 999;
              }
          `;
          document.head.appendChild(style);
      }
  });
</script>

In the second image, the button was overlapped by the text because of its z-index, I've fixed that in the CSS style above!

[empiricalarby]

Weirdly enough, the buy button isn't sticky anymore. Any idea what's causing that?

https://empiricalwater.com/products/starter-kit

[BSS-TekLabs · Accepted solution]

Hi there, maybe the HTML structure has changed a bit so the selector above didn't work anymore. But here is the updated code for you

<script>
  document.addEventListener("DOMContentLoaded", () => {
      const targetURLs = [
          "https://empiricalwater.com/products/starter-kit",
      ];

      if (targetURLs.some(url => window.location.href.includes(url))) {
          const style = document.createElement('style');
          style.textContent = `
              div:has(.product-form) {
                  background: #fff;
                  position: sticky;
                  top: 0;
                  padding-top: 0;
                  z-index: 999;
              }
          `;
          document.head.appendChild(style);
      }
  });
</script>

Here the buy button is sticky again

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[empiricalarby]

PERFECTION!!