Instant seamlessly integrates with all subscription apps on Shopify that provide subscription selling plan data, including Recharge, Yotpo, Bold, Skio, Stay Ai, Appstle, Loop, and others.
Overview
Connect your subscription plans to Instant and create fully customized buy sections that match your brand. The Custom Variant Picker allows you to build subscription selection interfaces with complete design control.
Supported Subscription Apps
App | Supported |
Recharge | ✓ |
Yotpo | ✓ |
Bold | ✓ |
Skio | ✓ |
Stay Ai | ✓ |
Appstle | ✓ |
Loop | ✓ |
Other Shopify subscription apps | ✓ |
Before You Start
Before connecting your subscription plans in Instant, ensure you have properly set up your subscriptions within Shopify.
Important: For detailed instructions on setting up subscriptions in Shopify, visit Shopify's Subscription Setup Guide.
Setting Up the Custom Variant Picker
The Custom Variant Picker can be used for selecting variants and selling plans. You can style it fully to your liking, making it the foundation for building a custom buy section within Instant.
Step 1: Add the Custom Variant Picker
Navigate to Insert Panel → Elements → Variants
Drag the Custom Variant Picker onto the canvas
Place it within a container connected to a Shopify product that has a subscription available
Step 2: Inspect the Layers
With the Custom Variant Picker placed in your layout, inspect its layers in the Layers panel. You'll notice it contains 2 layers called Variant Option.
Step 3: Configure the Variant Option
The Variant Option layer acts as a button to select a variant or selling plan.
Select a Variant Option layer
Navigate to the Interactions tab in the right sidebar
Step 4: Add the Selling Plan Action
Click on the add action icon
A dropdown appears with available actions
Select the selling plan option for your product
Step 5: Choose the Selling Plan
Select the appropriate selling plan you wish to toggle through this Variant Option button.
Adding More Variant Options
By default, the Custom Variant Picker has 2 options within the element.
To add more Variant Options, duplicate a Variant Option layer within the Layers panel. Each duplicated layer can be configured with a different selling plan or variant selection.
Styling the Variant Picker
The Custom Variant Picker is fully customizable. You can style:
Element | Customizable Properties |
Variant Option buttons | Colors, borders, typography, spacing |
Active state | Highlight color, border, background |
Hover state | Interactive feedback styles |
Layout | Direction, gap, alignment |
Quick Reference
Task | Action |
Add Custom Variant Picker | Insert Panel → Elements → Variants → Custom Variant Picker |
Configure selling plan | Select Variant Option → Interactions → Add action → Select selling plan |
Add more options | Duplicate Variant Option layer in Layers panel |
Style options | Select element → Style tab → Customize |
Set active state | Select Variant Option → Interactions → Active state |
Setup Checklist
Step | Status |
Subscriptions set up in Shopify | ☐ |
Subscription app installed and configured | ☐ |
Product connected in Instant | ☐ |
Custom Variant Picker added | ☐ |
Selling plans configured | ☐ |
Styling applied | ☐ |