Sell with Shopify.
Checkout in six steps.
How it works.
Three hand-offs.
01
The bag, as it is
Shoppers add pieces to the bag from any product page, the home floor or a room. Nothing on the site changes.
02
One link to Shopify
Check out builds a Shopify cart link from each item’s variant ID and quantity, like your-store.myshopify.com/cart/45012345678:1,45012345690:2.
03
Shopify checkout
The shopper lands on your Shopify checkout with every piece in it. The order arrives in your Shopify admin like any other.
Set it up.
About an hour for a small shop.
01
Pick a Shopify plan and turn off the storefront password in Online Store, Preferences. A cart link cannot get past a password, so a locked store sends shoppers to a login page.
02
Create each product with the same name and price as in Framer. Keep it active and on the Online Store sales channel, which Shopify ticks by default.
03
In Shopify admin, open the product. If it has variants, such as fabrics, click the one you sell: the long number at the end of the address is its ID, as in /products/8123456789/variants/45012345678. If it has none, add .json to the end of the product’s address in admin and copy the id listed under variants.
04
In the CMS, open Products, pick the product and paste the number into Shopify Variant. For rooms, open Rooms and fill Shopify Variant on each row of Pieces. Use the variant ID, never the product ID.
05
Open the layout template Site, select the Navigation and type your store address into Shopify address, for example your-store.myshopify.com, with no https or slash. Then publish.
06
On the live site, add two pieces to the bag and press Check out. You should land on Shopify checkout with both, at the right quantities. Use Shopify Payments test mode, or the Bogus Gateway, to finish an order without a real card.
Good to know.
Before you switch it on.
Mixed bags
Shopify checkout is used only when every item in the bag has a variant ID. If one is missing, Check out falls back to the order form on Checkout, so nothing is lost while you are part way through.
Prices
Shoppers pay the price set in Shopify. Keep Price in Framer the same, or the bag and the checkout will disagree.
Fabrics and finishes
Each product page sells one variant. For a sofa in three fabrics, add each fabric as its own product in Framer, or sell the most popular one and name the others in the summary.
Stock, tax and shipping
All worked out by Shopify at checkout. The bag shows the subtotal only, before delivery.
Discount codes
Shoppers type them on the Shopify checkout page. Nothing to set up in Framer.
The order form
Keep the Checkout page as a fallback while you set up. Once every product has a variant ID, no one will reach it from the bag.