Hi everyone! 👋

I’m building a Shopify store in Framer using Frameship, and I’m trying to recreate a volume offer selector like the one in the screenshot.

The UI itself is already built as a custom Framer Code Component:

Buy 1 → 4 masks

Buy 2 + 1 Free → 12 masks

Buy 3 + 2 Free → 20 masks

What I need is for the selection to control the quantity of the same Shopify product added to the cart.

Ideally:

Buy 1 → quantity = 1 → Add to Cart Buy 2 + 1 Free → quantity = 3 → Add to Cart Buy 3 + 2 Free → quantity = 5 → Add to Cart

The product itself already exists in Shopify, and the client already has this promotion working on their current Shopify store. I’m migrating the store to Framer + Frameship.

My current idea is to have the custom component control the quantity and then let Frameship's Add to Cart / Cart components handle the actual Shopify cart.

The problem is that I’m not sure what the correct way is to communicate the selected quantity from a custom Framer Code Component to Frameship.

Is there an official Frameship API, event, or recommended approach for this?

I’d really prefer to keep Frameship handling the cart rather than building a separate Shopify cart integration from scratch.

Any help or examples would be massively appreciated! 🙏

Thanks!

Hi everyone! 👋

I’m building a Shopify store in Framer using Frameship, and I’m trying to recreate a volume offer selector like the one in the screenshot.

The UI itself is already built as a custom Framer Code Component:

Buy 1 → 4 masks

Buy 2 + 1 Free → 12 masks

Buy 3 + 2 Free → 20 masks

What I need is for the selection to control the quantity of the same Shopify product added to the cart.

Ideally:

Buy 1 → quantity = 1 → Add to Cart Buy 2 + 1 Free → quantity = 3 → Add to Cart Buy 3 + 2 Free → quantity = 5 → Add to Cart

The product itself already exists in Shopify, and the client already has this promotion working on their current Shopify store. I’m migrating the store to Framer + Frameship.

My current idea is to have the custom component control the quantity and then let Frameship's Add to Cart / Cart components handle the actual Shopify cart.

The problem is that I’m not sure what the correct way is to communicate the selected quantity from a custom Framer Code Component to Frameship.

Is there an official Frameship API, event, or recommended approach for this?

I’d really prefer to keep Frameship handling the cart rather than building a separate Shopify cart integration from scratch.

Any help or examples would be massively appreciated! 🙏

Thanks!