Shopify guide
Sell through Shopify,
keep the Framer site.
Placket’s bag works on its own: Check out opens an order form and you reply with a payment link. Connect a Shopify store and the same button opens Shopify checkout with every piece and size already in the cart. No plugin, no code.
How checkout works
Two ways,
one button.
Out of the box
Pieces go into the bag in the visitor’s browser. Check out opens the Bag page, where the order form sends you the pieces, sizes and address. You reply with a payment link.
With Shopify
Check out opens your Shopify checkout with the same pieces and sizes in the cart, using Shopify cart links. Payment, tax, shipping rates, stock and order emails all happen in Shopify.
Before you start
Set up the store
in Shopify first.
Any Shopify plan that includes the Online Store sales channel. Cart links open Shopify’s own checkout, so payment, tax and shipping are set up there.
Create each piece in Shopify with the same name and price, and add Size as an option so every size is its own variant (XS to XL, 24 to 32, or 36 to 43).
Each product must be active and available on the Online Store sales channel, or the cart link shows an error instead of the checkout.
Turn on Shopify Payments (or another provider) and set your shipping rates in Shopify. The Framer site never sees card details.
Connect it
Six steps,
about twenty minutes.
In Shopify admin, open Settings › Domains and copy the address that ends in .myshopify.com, for example placket-studio.myshopify.com.
2. Add it to the site
In Framer, open the layout template Site, select the Navigation at the top and fill in Shopify address on the right. Do it once: every page uses this layout.
In Shopify admin, open a product and click one size under Variants. The number at the end of the browser address, after /variants/, is that size’s variant ID.
In Framer, open CMS › Products, choose the piece and fill Shopify variants with each size and its ID, separated by commas, for example XS: 44012345678901, S: 44012345678902, M: 44012345678903. For a one-size piece the ID alone is enough.
Pieces in CMS › Looks have their own Variants field. Fill it the same way for every piece you sell, so Add the whole look also checks out in Shopify.
Publish, add two pieces in different sizes, open the bag and press Check out. Shopify’s checkout should open with both pieces, their sizes and quantities.
Good to know
When something
does not add up.
At least one piece in the bag has no variant ID for its size. The size names in Shopify variants must match the Sizes field exactly: S is not Small.
Shopify charges the price set in Shopify. Keep the Price field in Framer the same, or customers see one price on the site and another at checkout.
Shopify counts stock. When a size sells out, add it to Sold out sizes in the Framer CMS and it is struck through on the site.
The site shows the currency set on each component ($ by default). Shopify checkout uses your store’s currency.
Turn on test mode for Shopify Payments under Settings › Payments in Shopify, so no real card is charged while you try it.
Clear Shopify address on the Navigation and Check out opens the built-in order form again.
Other ways to take payment
If Shopify
is not for you.
No account needed. Good for small runs and made-to-order: you receive the pieces, sizes and address and reply with a payment link.
A Shopify sync plugin
Paid plugins in the Framer Marketplace, such as Framer Commerce, sync Shopify products into Framer’s CMS so prices and stock update on their own. More set-up than cart links.
Shopify’s own embed. Paste its code into a Framer Embed on a product page; it opens a Shopify cart in a pop-up.
One link per product and no cart. Put the link on a product’s button if you sell a handful of pieces.