How to code for new add to cart button that autoscrolls customer up to main button in Prestige theme

Shopify Discussion

Topic summary

A Shopify store owner using the Prestige theme needed a custom sticky button solution. Their product pages include customization options (photo uploads, custom text) that only work with the main add-to-cart button, making standard sticky cart apps incompatible.

The Solution:

  • Create a sticky button in the bottom corner that auto-scrolls users back to the original add-to-cart button
  • Implemented using simple HTML, CSS, and JavaScript code
  • Code should be placed in the theme.liquid file before the </body> tag

Key Implementation Details:

  • Button appears fixed in bottom-right corner
  • Uses scrollIntoView() JavaScript method for smooth scrolling
  • Customizable styling (colors, positioning, size)
  • Targets the original cart form element

Resolution: The issue was successfully resolved. A community member provided working code that the store owner implemented, confirming it worked as intended.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I currently have the Prestige theme, and my product page includes customizations (such as photo upload and custom text) that are only included at checkout if the customer hits the main add to cart button — as a result, sticky add to cart apps are not an option.

I was wondering how to manually code a sticky add to cart button in the bottom corner of my page that brings the customer back up the page to the original add to cart button, which they can then hit after adding their customizations. Basically, a new button that autoscrolls the customer back up the page to the top where the original add to cart button is located.

Is this possible? Any help would be much appreciated!

2

If I understand correctly, you need a button in the bottom corner that only appears when you scroll past the main ‘Add to Cart’ (ATC) button. Clicking this bottom button will take you back to the main ATC button.

If that’s the case, it’s a simple task that can be done with a few lines of JavaScript. To provide a precise solution, please share your store URL.

3

My store URL is https://madebyme.us

I’m not super familiar with code, so if you could include instructions on how/where to add the code, that would be great! Thank you!

4

Place the code in “theme.liquid” file before tag
5

Thank you, that worked great! Really appreciate the help

1 Like
6

Hi @madebyme1

Yes, this is definitely possible! You can achieve this by adding some custom HTML, CSS, and JavaScript to your Shopify theme. Below, I’ll walk you through the steps to create a sticky “Add to Cart” button that scrolls the customer back up to the original “Add to Cart” button.

Here’s how to do it:#### 1. Add the Sticky Button in Your Theme Code

Go to Online Store > Themes > Edit Code and locate the theme.liquid or product.liquid file. Then, add this code right before the closing tag:

.sticky-add-to-cart { position: fixed; bottom: 20px; right: 20px; background-color: #ff6b6b; color: white; padding: 12px 20px; font-size: 16px; border-radius: 8px; cursor: pointer; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); z-index: 9999; }

Customize & Add to Cart

2. Customize the Button- You can change the background-color to match your theme.

  • The .sticky-add-to-cart button is positioned in the bottom right, but you can adjust bottom and right values.
  • The script finds the original add-to-cart button and scrolls the page to it smoothly.

This way, customers can still interact with your product customization fields before adding to the cart. Let me know if you need further refinements!

7

Most Welcome :slightly_smiling_face:

Could you please mark it as solved :grinning_face_with_smiling_eyes: