Generate Sticky Add-to-Cart Bar

Create a sticky add-to-cart bar that appears when scrolling past the buy button, showing product image, title, price, variant selector, and ATC button.

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Create a sticky add-to-cart bar for product pages:

Features:

  Appears when user scrolls past the main add-to-cart button
  Shows: product image thumbnail, product title, price, variant selector, add-to-cart button
  Slides in from bottom smoothly
  Disappears when scrolling back up to the buy button


Settings:

  Bar position (top/bottom)
  Background color
  Button color
  Show product image toggle
  Show variant selector toggle
  Show price toggle
  Bar height
  Shadow style


Requirements:

  Only shows on product pages
  Syncs with main page variant selection
  Mobile responsive (simplified layout)
  Smooth slide animation
  Doesn’t interfere with mobile bottom navigation
  Accessible


Generate the Liquid, CSS, and JavaScript for this as a snippet I can paste into my own theme.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Snippets (e.g. snippets/sticky-atc-bar.liquid), paste the generated code in, and save. Then add a {% render 'sticky-atc-bar' %} line inside sections/main-product.liquid (or the product template) so it renders and syncs with the variant selector on product pages.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions