I’ve looked through apps, and used the page builder AI but can’t seem to achieve the variant & bundle options that I want.
As I am selling pants, I’ll try my best to describe what I want to achieve.
In total there will be 3 main bundles. Single, 2-Pack and 4-Pack.
Once Single is selected - it will show 8 variants (colors) of the shoes, and when I click on a colour the product photo image will change to that variant.
Once 2-Pack is selected - it will 4 2-pack bundle options (e.g. black & red, white & blue etc.), when clicked the product photo image will change to that variant
I’m Vineet from Identixweb, a Shopify Development Agency.
This is possible, but it sounds more like a product page variant/option setup than a normal bundle app setup.
I’d structure it like this:
Option 1: Bundle type, such as Single, 2-Pack, 4-Pack
Option 2: Color or color combination
Option 3 if needed: Size or another product-specific option
For example:
Single / Black
Single / Red
2-Pack / Black + Red
2-Pack / White + Blue
4-Pack / Mixed Pack
Then each valid combination can have its own variant image, so when the customer selects that option, the product image changes.
Shopify themes often show all option values by default, so if you want the second dropdown/buttons to change based on whether the customer selects Single, 2-Pack, or 4-Pack, you’ll likely need theme JavaScript customization. The code would hide or disable unavailable options based on the selected bundle type.
Yup, that’s exactly what I’m visioning for it to work! Thanks for that, i’ll try my best to customize the theme JavaScript ont he backend to make this work!
This is the only variant structure Shopify will manage.
Do not create colors or bundles in Shopify variants
This is important.
Do not try to create:
colors
bundle combinations
mixed packs as Shopify variants
Shopify variants will only control the pack type.
Everything else will be handled in the theme.
Open your theme code
Go to: Shopify Admin → Online Store → Themes → Ecomus → Edit Code
Open product page file
Find one of these files:
main-product.liquid
product-form.liquid
This is where the product layout is controlled.
Add pack selector UI logic
In the product page you will show a selector for:
Single
2-Pack
4-Pack
This can be buttons or dropdown (theme dependent)
This selection will control what the user sees next
Create three display sections
You will build three separate blocks in the theme:
For Single:
Show 8 color options
For 2-Pack:
Show predefined pairs like black + white, blue + grey
For 4-Pack:
Show predefined bundle cards
Only one section is visible at a time depending on pack type.
Add show and hide logic
You will use simple JavaScript inside the product page
Logic is:
If user selects Single, show only single colors
If user selects 2-Pack, show only 2-pack bundles
If user selects 4-Pack, show only 4-pack bundles
Everything else is hidden.
Connect image switching
For each selectable option (color or bundle), assign an image.
When user clicks an option:
The main product image updates
Shopify already supports image switching logic
but since you are not using variants for colors you will trigger image change using JavaScript in the theme.
Test the full flow
Go to your storefront and check:
Select Single → see 8 colors
Select 2-Pack → see bundle options only
Select 4-Pack → see bundle options only
Click any option → image changes
Add to cart → correct product added
This is best handled with a mix of variant structure and bundle logic rather than page builders. Keep Single, 2-Pack and 4-Pack as either a main product with a “pack size” option or separate products grouped via a bundle app that supports variant mapping. Then assign color combinations as actual variants under each pack so images can be tied per variant. If your theme supports it, use combined listings or variant swatches to keep the UX clean. The Vessi setup is usually custom coded using variant metafields and image linking.
What you’re looking for is usually called a Bundle Product Page, and it is typically supported by third-party apps. You can hire developers to build it custom, but it may be costly since the logic is quite complex, and future changes can be harder to manage.
What is a Bundle Product page?
Create a product page for your bundle with pack options (like 1 shoe, 2 shoes, 4 shoes, shown in the image below)
Allow customers to mix and match variants/quantities/products freely
Change the main product image based on the selected variant (like the pink shoe shown in the image)
