Take payment with Shopify.
Or not: the bag works without it.

How the bag works

Add to bag, the lanes on the home page and the monthly box all put items in one bag, kept in the visitor’s browser. The bag opens from the navigation, adds up the total and shows how far the visitor is from free delivery.

Checkout does one of two things. If every item in the bag has a Shopify variant id, it opens your Shopify cart with those items already in it. If not, it opens the Checkout page on this site, where the visitor sends the order to you as a form.

Connect a Shopify store

  1. In Shopify, add each product with the same name and price as in the Framer CMS.

  2. Open a product in Shopify, choose a variant and copy the number at the end of the address bar. That is the variant id.

  3. In Framer, open CMS, Products, and paste it into Shopify Variant. For products with sizes, write the sizes in Size as S: 4401, M: 4402, L: 4403.

  4. Select the Bag in the navigation and type your store address in Shopify store, for example your-store.myshopify.com.

  5. Publish. Checkout now opens your Shopify cart, and Shopify takes payment, tax and shipping.

Without Shopify

Leave Shopify store empty. Checkout opens the Checkout page, which sends the order, the total and the visitor’s details to you. Select the form on that page and choose where submissions go: email, Google Sheets or a webhook.

The monthly box

Start this box adds one item from each lane to the bag with the box discount shown. To charge it every few weeks, use a Shopify subscriptions app and give each box item its subscription variant id.

Create a free website with Framer, the website builder loved by startups, designers and agencies.