Available Layouts
1. Form Elements (Normal)
The default layout displays all options as standard form fields in a vertical list. All options are visible at once.
Best for:
Simple products with 2-5 options
Stores where customers need to see all choices at once
Quick decision-making processes
Features:
All options visible without interaction
Traditional form layout
Works well with any number of options
Minimal clicks required
When to use:
Your products have straightforward customization
You want the fastest checkout experience
Customers are familiar with your options
2. Accordion Collapsible
Options are displayed in collapsible accordion panels. Each option can be expanded individually with "Add to Product" and "Skip" buttons.
Best for:
Products with many options (5+ options)
Complex customization workflows
Mobile-friendly experiences
Features:
Options collapsed by default to save space
One option visible at a time
Shows selected value in collapsed state
"Add to Product" button confirms each choice
"Skip" button for optional items
When to use:
You have 5 or more options per product
Options require detailed descriptions or images
You want to guide customers through customization step by step
Mobile shopping is a priority
3. Steps
A guided step-by-step interface with navigation buttons. Only one option displays at a time with "Previous" and "Next" controls.
Best for:
Complex products requiring guided configuration
High-value items needing careful selection
Products with conditional options
Features:
One option per screen
Step counter (e.g., "1 of 5")
Previous/Next navigation buttons
Linear progression through options
Minimizes decision fatigue
When to use:
Products require detailed configuration
You want maximum focus on each choice
Options build on previous selections
Customer guidance is important
Changing Your Layout
To change the layout:
Go to your Shopify admin
Navigate to Online Store → Themes
Click Customize on your active theme
Add or select the Product Options app block on a product page
In the block settings, find Layout
Choose from: Form Elements, Accordion Collapsible, or Steps
Save your changes
Layout Settings
All layouts share these settings:
Title: Heading above options (e.g., "Customize Your Product")
Description: Additional instructions or notices
Colors: Accent, tile, success, skipped, and border colors
Button Text: Customize "Add to Product" and "Skip" button labels
Cart Action: Choose what happens after adding to cart (Stay on Page, Go to Cart, Go to Checkout)
Form Elements Settings
Match theme styles: Apply your theme's form styling to option fields
Accordion Settings
Add to Product Button Text: Text for the confirmation button (default: "Add to Product")
Skip Button Text: Text for the skip button (default: "Skip")
Additional Options Title: Label for collapsible sub-groups (default: "More Options +")
Steps Settings
Navigation buttons: Previous/Next automatically included
Step counter: Shows current position (e.g., "2 of 7")
Best Practices
Do:
Test your layout on mobile and desktop
Use accordion or steps for 5+ options
Match the layout to your product complexity
Consider your target audience's technical comfort level
Don't:
Use steps layout for simple products with 1-2 options
Mix layouts for similar products (keep it consistent)
Forget to test the entire customization flow
Ignore mobile user experience
Tips
Start with Form Elements for simple products
Switch to Accordion when you have more than 5 options
Use Steps for high-value or complex configurations
Preview changes in the theme editor before publishing
A/B test different layouts to optimize conversions
Consider your average number of options when choosing a default
Mobile Considerations
All layouts are mobile-responsive, but:
Accordion is most mobile-friendly for many options
Steps works well on small screens with limited space
Form Elements may require scrolling on mobile with many options