Skip to content
Fixed buy buttons
The Fixed Buy Buttons feature adds a sticky add-to-cart bar that stays visible on product pages, making it easy for customers to purchase even when they've scrolled away from the main product form. This helps reduce friction and can improve conversion rates, especially on mobile devices.
How to setup
Navigate to Product Template
- Go to Online Store > Themes > Customize
- Open any product template (e.g., Default Product)
- Click on the product section
Add the Block
- Click Add block within the Product section
- Select Fixed buy buttons from the block list
Only one fixed buy button block can be added per product page.
Configure Settings
The block will automatically appear at the bottom of your screen when customers scroll down the page. Configure the settings to match your store's design and needs.
Hit Save
Key features
Smart visibility
- Show after scrolling: Enable this option to make the bar appear only after customers scroll past the main add-to-cart button
- Automatically hides when the main product form is in view to avoid redundancy
Positioning options
Choose from 4 position options to match your design:
- Left: Fixed card on bottom-left (desktop), full-width bar (mobile)
- Right: Fixed card on bottom-right (desktop), full-width bar (mobile)
- Center: Centered bar constrained to content width
- Full Width: Spans entire viewport width (most prominent option)
Variant selection
- For products with variants: Shows a dropdown selector displaying the currently selected variant
- Clicking the variant selector scrolls back to the main options area
- Shows contextual button states:
- "Choose options" when no variant is selected
- "Sold out" when selected variant is unavailable
- "Unavailable" when variant doesn't exist
- "Add to cart" when ready to purchase
Custom content
- Add optional rich text content (e.g., product title, promotional messages)
- Example: "Free shipping on orders over $50" or "Lifetime warranty included"
- Content appears on desktop only to save mobile screen space
Full customization
Color Schemes:
- 12 color scheme options including body, neutral, accent colors, and transparent
Button Styles:
- 9 button style options: Primary, Secondary, Tertiary, Neutral, Plain, Outline, Inverted Outline, Link styles
Border Options:
- Subtle border, strong border, or no border
Button Text:
- Supports custom button text via product metafields (
custom.button_text)
Responsive design
- Mobile: Full-width bar at bottom of screen
- Desktop: Positioned card with rounded corners and shadow (except "Full" position)
- Maximum width of 500px for left/right positions on desktop
Loading states
- Animated loading spinner during cart submission
- Visual feedback prevents duplicate submissions
Best practices
Enable "Show after scrolling" for a cleaner experience that doesn't distract from the main product content
Use "Full" position for maximum visibility and conversions on mobile
Use "Left" or "Right" positions for a more subtle, premium feel on desktop
Add promotional text in the content field to reinforce value propositions (e.g., "Free returns", "2-year warranty")
Match button style to your primary CTA buttons for brand consistency
Test on mobile devices to ensure the bar doesn't obstruct important content
Common use cases
- Long product descriptions: Keep the buy button accessible when customers scroll through detailed specs
- High-converting products: Ensure the CTA is always visible for your best sellers
- Mobile optimization: Reduce scrolling friction on mobile devices
- Promotional campaigns: Highlight limited-time offers or free shipping thresholds
Technical notes
Works seamlessly with products that have:
- Single variants
- Multiple variants
- Selling plans/subscriptions
- Custom button text metafields
Automatically integrates with your cart system (no additional configuration needed).
For changes beyond theme editor settings (button text, price in bar, layout), see Customize the sticky buy button.