Add variants to product page with quantity

Topic summary

Goal: Add selectable add-ons/variants with per-option quantities on the product page that dynamically update the total price (checkbox-style like the “Modern Brown Queen Bed”). Images provided compare current vs desired UI; they’re central to understanding the request.

Approaches proposed:

  • Custom theme build as a bundle (not true variants). A YouTube tutorial was shared that uses Shopify metaobjects (custom structured data) to drive option logic and limits; the poster offers custom development if no app is desired.
  • App-based solution via Easify Product Options: create custom options, link option values to existing products as add-ons, support Image Swatches or Checkboxes, enable a Quantity Selector with min/max and selection limits, and preview changes live.

Follow-up/Issues:

  • Another user asked how the metaobjects were specifically configured (limits, true/false) and how to render four options; they found the video unclear and missing those steps.
  • The developer replied the video targets developers and suggested hiring help; no step-by-step was posted.

Status:

  • No confirmed resolution. Next steps are to try the Easify app or pursue custom coding. Key open question: detailed metaobject setup and page configuration for the custom approach.
Summarized with AI on January 1. AI used: gpt-5.

Looking to see if there is a native way or an app to help with this. I’m trying to add an option that allows me to add variants to the product page. I added an example below of what I’m trying to do, also what my current product page is like. I want to have all the options like the “Modern Brown Queen Bed”, where it also updates the price as you click on the check boxes and when you change the quantity.

Hi @sink120

It’s not a variant but more like a bundle product, where user can add items at their convenience and quantity if want.

We can create a similar functionality if not looking for an APP option.

Hi @sink120 ,

You should consider using the Easify Product Options app to effortlessly generate custom options for your products, enabling customers to specify quantities for each selected option—mirroring the functionality of your reference website :blush: .

Here’s a sample illustration:

Storefront:

![tb.png|4620x2989](upload://vSl08htYu3wmzdhI5jqwLPPZ2aQ.jpeg) ![yh.png|4599x3254](upload://4KdsDtdmY6yrYLNIk2QNud4Y5PO.jpeg)

In the demo above, we showcase custom options using the Image Swatches style. If you prefer a checkbox display akin to your reference website, simply notify us through the in-app live chat.

App Settings (featuring in-app live preview):

  • Install the app and create a new option set.
  • Add an option for your upsell products, opting for a suitable type like Image Swatches or Checkbox.
  • Associate option values with your existing upsell products using the Add-on product feature.

  • Activate the Quantity Selector feature, empowering customers to choose quantities for selected option values. Customize min/max limits and the total number of option values customers can select.

  • Finally, selecting the main product(s) to incorporate your additional options.

Hi can you show how you set up this metaobject? And then how you get the page to setup so the user can see the options. None of this was easy to follow.

Hi @taylor7moon ,

Metaobject setup is already their in video, video is created for Developers only and provide the logic to code in the theme. If you are not expert in coding would request you to hire someone.

We can do the same if interest let us know your thoughts?

I am an engineer who does a bit of automation. I tried to follow along with the video but I did not have the same options for limits and true/false so I was wondering how they setup the metaobject to do that. Nor did it show how to get the setup page to show all four options, which is what I was looking for. I’m sure I’ll find other videos and figure it out. Thanks for your “help”..