How do I start a custom product feature on my store?

Store Design
, ,

Topic summary

Goal: replicate a multi-option product configurator on a Shopify store (like True Nutrition), letting shoppers choose several options before adding the final build to cart. A screenshot was referenced, but the core need is a custom flow on the product page.

Proposed implementation:

  • Use custom code: on the product details page, JavaScript controls selection and adds/removes items in the cart.
  • Build a dedicated page matching the desired design.
  • Structure options as sections tied to Shopify collections (e.g., “protein”).
  • When a user selects a sub-option (e.g., “cold filtration”), list relevant products with images in a dropdown/popup.
  • Store the selected product IDs for each section.
  • Enable Proceed/Checkout once all required sections have selections.
  • On click, use the Cart API (programmatic interface to the cart) to add all selected products at once.

Clarifications/outstanding:

  • The approach likely requires development skills; the asker wondered if a pro is needed, but no firm recommendation was given.
  • No app or code snippet was provided; conversation remains open without a finalized solution.
Summarized with AI on January 22. AI used: gpt-5.
1

Screenshot_20230809_171102_Messenger.jpg
Screenshot_20230809_171102_Messenger.jpg1440×3200 291 KB

Hello,

I recently stumbled across this store that was made with Shopify. You select customize on their site, true nutrition, and can choose several options before getting to the final product. Does anyone know how to start this feature?

Thank you!

2

Hi @oakashbindery

This can be done by custom code, have to get products on product details page, using javascript have to add or remove product from cart.

3

Hello! Thank you for letting me know. Where do you think would be a good place to start. Would this require a professional to build, or something I could learn?

4

Hi @oakashbindery

Here how you can start,

Create a page which will have design shown in above picture.

Assuming we have 2 block it can be more.

  1. when user choose protein make a collection name with protein

  2. When user click on cold filtration get the list of all the product along with their image in drop-down or popup.

Store the id of product which user select.

Repeat this for every section u had under protein.

Once you have all the id’s of every section enable the proceed or checkout button to click.

Upon clicking on button use cart API to add all the products in cart.

And you are done.

Hope this will help…