Mobile sticky add to cart test
Compares a standard add-to-cart button against two sticky bottom bars on mobile product pages, scored on carts created.
Authored by Intempt Technologies
Recipe curators
Agentic workflow
Coming soon1 step Blu runs end to end. It drafts a plan and nothing runs until you approve it.
- 1
Set up the sticky cart test
Coming soonBlu builds a step
About this recipe
When to use it
Mobile shoppers scroll past the add-to-cart button constantly, and a sticky bar is the common fix - but 'common fix' isn't the same as 'proven for your store.' This measures it directly on mobile-only traffic.
What it delivers
Runs a mobile-only client-side experiment testing whether a sticky add-to-cart bar improves conversion.
How you prompt this
Describe the outcome in your own words and Blu Agent maps it to this recipe, or run it by name. It drafts a plan first and nothing runs until you approve it.
Tell Blu Agent what you want
“Compares a standard add-to-cart button against two sticky bottom bars on mobile product pages, scored on carts created.”
recipe.md preview
Built from the published catalog. Blu Agent's full step prompts load in your workspace when you run it.
Inputs & outputs
What the recipe needs before it runs, and what it leaves in your workspace.
Inputs
- Nothing declared beyond an Intempt workspace. Blu asks for anything else it needs as it goes.
Outputs
How the recipe runs
Blu follows the steps in order and shows you each one before anything goes live.
- 01Set up the sticky cart testCreate a CLIENT EXPERIMENT on /experiences titled "Mobile Sticky Add-to-Cart". ═══ PATH 1: Top-level configuration ═══ Experience type: client_experiment Variants: - Control (34%): standard add-to-cart button (scrolls with page content) - Variant B (33%): sticky bottom bar with "Add to Cart" + price - Variant C (33%): sticky bar with quantity selector + "Add to Cart" Targeting: - Pages: page URL contains "/products/" - Devices: MOBILE ONLY (viewport width < 768px): this is a mobile-specific UX test - Audience: all visitors - Display frequency: always Primary metric: goal_completed_in_experience where experience_id = <this> (goal fires on Cart created within session of exposure) Secondary metrics: - Click on where target_id = "sticky-add-to-cart-button" (variant B and C only) - Click on where target_id = "main-add-to-cart-button" (control + as fallback for B/C) - Placed order within 24 hours of exposure (mobile checkout completion) - Time-on-PDP (mobile dwell time) Guardrail: PDP scroll depth must not drop >10% (sticky bar shouldn't disincentivize content reading); checkout conversion rate must not drop on mobile Schedule: 14 days, mobile traffic only ═══ PATH 2: Variant HTML content (Visual Editor) ═══ Variant: Control (no DOM changes) Existing PDP layout: main "Add to Cart" button scrolls with page. Variant: B (sticky bar with price) HTML target selector: body (append fixed-position element) Variant DOM: <div class="sticky-cart-bar" data-variant="b" data-mobile-only="true" style="position:fixed;bottom:0;left:0;right:0;padding:12px 16px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;z-index:1000;"> <div class="sticky-product-info"> <span class="product-title-mini">[Product name]</span> <span class="product-price">[$X.XX]</span> </div> <button class="sticky-add-cart-btn" id="sticky-add-to-cart-button" data-variant="b">Add to Cart</button> </div> CSS guard: hide on viewport width >= 768px so it never shows on tablet/desktop. Variant: C (sticky bar with quantity selector) Same wrapper, with quantity selector added: <div class="sticky-cart-bar" data-variant="c" data-mobile-only="true" style="position:fixed;bottom:0;left:0;right:0;padding:12px 16px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;gap:12px;z-index:1000;"> <div class="sticky-product-info"> <span class="product-title-mini">[Product name]</span> <span class="product-price">[$X.XX]</span> </div> <div class="quantity-selector"> <button class="qty-decrease" aria-label="Decrease">−</button> <input type="number" value="1" min="1" max="99" class="qty-input" /> <button class="qty-increase" aria-label="Increase">+</button> </div> <button class="sticky-add-cart-btn" id="sticky-add-to-cart-button" data-variant="c">Add to Cart</button> </div> The Visual Editor allows the user to fine-tune the bar's color scheme, animation (slide-up reveal on scroll), and quantity-selector behavior. Taxonomy notes: - "Mobile only" is enforced via the experience-level device targeting (targetDevice = "mobile") which Lovable applies at the SDK level; the CSS guard is belt-and-braces. - target_id = "sticky-add-to-cart-button" is shared across variants B and C; control uses "main-add-to-cart-button". This lets you compare sticky-bar engagement vs. main-button engagement.
Install Intempt and run it
- 1
Sign up
Create a free Intempt workspace.
- 2
Connect your data
Add the sources this recipe reads from.
- 3
Ask Blu
Type /mobile-sticky-add-to-cart-test in Blu once this recipe is live there.
- 4
Review and approve
Blu builds each step and waits for your OK before anything goes live.
