How Shelfferry works

1. Get a Storefront token from Shopify

Headless channel (easiest): in Shopify admin, add the free Headless sales channel, create a storefront, and copy its public access token. Make sure your products are published to that channel (Products > select all > Include in sales channels).

Or a custom app: Settings > Apps and sales channels > Develop apps > Create an app. Under Storefront API scopes, turn on product listings, product inventory (for stock counts) and checkouts. Install it and copy the Storefront API access token.

The token is 32 letters and digits. It's the token Shopify made for websites: it reads what your online store shows and creates carts, nothing else. Never paste an Admin API token (it starts with shpat_); Shelfferry refuses it.

2. Connect

Open Shelfferry from Framer's Plugins menu, paste your store address (your-store.myshopify.com, or just copy the URL of your Shopify admin) and the token, and click Connect. You'll see your store's name, currency, the countries in its markets, and whether the token can read stock counts.

3. Create synced collections

Pick what a collection holds and click Create collection:

• Collections: your Shopify collections. Sync these first so products can link to them.
• Products: one item per product, with a Collections field linking to the Collections collection.
• Variants: one item per size, color and so on, with a Product field linking to the Products collection. Sync Products first.

You can also start from Framer's CMS: add a collection, choose Shelfferry, and set it up there.

4. Fields

Switch fields on or off and rename them. Renaming never loses data. Add metafields by namespace and key (custom.material); Shelfferry works out each one's type from your store (text, number, toggle, link, date, color, rich text or image). In Shopify, a metafield only reaches the Storefront API once you turn on Storefront access for it under Settings > Custom data. Add up to 8 markets to get a price field per country in that market's currency, and choose whether sold-out items become drafts.

5. Dry run and sync

The dry run reads your store and shows what a sync will add, update, leave alone and remove, plus anything worth a look (metafields with no values, the Framer plan item limit, embedded videos in descriptions that Framer's rich text can't hold). Download it as a CSV. Nothing is written until you click Sync; removals ask first.

After the first sync, anyone on the project can press Sync on the collection in Framer's CMS. Shelfferry then reads only the products that changed in Shopify since the last sync (all of them when you've changed the fields or use market prices, since a market's prices can change on their own), skips items that didn't change, and removes products you deleted in Shopify or took off the sales channel.

6. Store components

The Components tab adds five components to your project as one code file, Shelfferry.tsx:

• Buy button: adds the product to the cart (and opens it), or with Action set to Buy now, goes straight to Shopify checkout.
• Cart: a button with a count that opens a side panel with the items, quantities, subtotal and a Check out button to Shopify.
• Price: the live price in the visitor's market and currency, with the compare-at price struck through.
• Product options: size, color and other options as buttons. The Buy button and Price on the same page follow the choice; sold-out options are crossed out.
• Country picker: lets visitors pick their country. Prices and the cart switch to that market.

On a Products CMS page, select the Buy button, Price and Product options and connect Handle to the synced Handle field. On a Variants page, connect Variant ID too. Put the Cart in your navigation. Colors, font, radius and labels are properties on the canvas.

The components run in your visitors' browsers and talk to Shopify directly. Nothing in them checks your Shelfferry license, so a published store keeps working if your license ends. If you connect another store or Shelfferry updates the components, the Components tab offers Update the components; instances on your pages keep their settings.

Limits

• Up to 250 variants per product are synced.
• Framer's Pro plan holds 2,500 CMS items; the dry run warns before a sync would go over.
• Checkout, payments, taxes, shipping and discount codes are on Shopify's checkout. Customer accounts, subscriptions and reviews aren't part of Shelfferry.

License

Paste the license key from your email in the Plan tab. One seat works on two Framer accounts and every project, store and product count. Support: hello@greatwork.company.