CMS collections and sync

Webflow builds one page per product from the CMS. Smootify works with three CMS collections, Products, Collections and Vendors, and a sync that fills them from Shopify. This page lists the fields to create, explains how the import and the sync work, and how the URLs of the template pages must match.

What the CMS is for

The CMS holds what Webflow needs to build pages and to filter or sort Collection lists: the name, the slug, the description, a price for sorting, the collections. It also gives search engines text in the page before Smootify loads.

The live data does not come from the CMS. Prices, stock, variants, images and metafields load from Shopify each time a visitor opens a page, so the page always shows what Shopify has now.

What the sync copies, and what stays in Shopify

The sync writes one CMS item per product, one per collection and one per vendor, with the fields listed below and the metafields you choose to copy (step 5). It does not copy:

• the variants, their options, prices, SKUs and images;
• the stock;
• selling plans, and the metafields you do not copy into a field.

The variants stay out on purpose. Every CMS item counts against your Webflow site plan, which caps them at a few thousand, or a few tens of thousands on the larger plans, while Shopify allows up to 2,048 variants on a single product. One item per variant would fill the CMS with a handful of products: a shirt in 8 colours and 6 sizes alone would take 48 items. The stock changes with every order, so a copy in the CMS would always be behind. Smootify reads variants and stock from Shopify on the page instead, and the CMS keeps only what Webflow needs to list and sort products.

Products the sync leaves out

The sync skips a product, or a collection, that you mark in Shopify with a metafield set to 1:

• seo.hidden: the product is hidden from search engines and from the store’s search, Smootify’s included, and the sync leaves it out of the CMS. Use it for products customers never browse, such as an add-on or a gift wrap.
• sync.hidden: the product stays in search, but the sync leaves it out of the CMS.

To set them in the admin, add a product (or collection) metafield definition with that namespace and key, type integer, and keep its Storefronts access on: Smootify Studio reads Shopify through the Storefront API and does not see a metafield the storefront cannot read. A value set without a definition, or with the Storefronts access off, still hides the product from search, but Studio imports it into the CMS anyway. The server sync skips it either way, because it reads Shopify through the Admin API. The sync also skips products whose handle contains untitled. Studio’s sync log lists what it left out, and why.

An item imported before you set the metafield:

• with Smootify Studio, a full sync (Sync now) removes it from the CMS, as it does with anything Shopify no longer has, and its log names each item it removes, with its slug, per collection (filter the log by the delete operation to find them). The automatic sync never deletes, and its log says how many removals it skipped;
• with the server sync, it stays until you delete it in Webflow.

When to sync

With the server sync (Server plan) there is nothing to do: Shopify tells Smootify about each change and the CMS follows. With Smootify Studio, sync when Shopify changes something the CMS holds:

Studio can also sync every five minutes on its own, so the CMS follows Shopify while the app runs.

1. Create the three collections

Smootify Studio, the desktop app, creates the three collections for you, with every field below and its settings. It is the quickest way, and the one that avoids a wrong field type.

To create them by hand, add three collections in the Webflow CMS: Products, Collections and Vendors. Set their Collection URL to products, collections and vendors: these are the URLs Smootify 2.0 expects. If you choose others, see step 7.

Then add the fields below. The sync finds each field by its name, so use these names exactly (capital letters do not matter) and the field type shown.

2. Products fields

The fields of the Products collection, with their type in Webflow:

Shopify ID matters most: it connects each page and each card to the live product (see step 8).

The number fields must be decimal, with the format 0.00 (two decimals) in their settings. A number field that is not decimal makes Webflow round the price: 11.99 is saved as 12.

3. Collections fields

The fields of the Collections collection:

4. Vendors fields

A vendor in Shopify is only a name, so the Vendors collection needs only Name and Slug. The sync creates a vendor item the first time a product with that vendor arrives. The slug is the name in lower case, with dashes.

You can add fields of your own, such as a logo or a text, and fill them in Webflow.

5. Your own fields and metafields

You can add more fields to any of the three collections.

• Do not make them required. The sync cannot fill a required field it knows nothing about, and the item then fails to save.
• A field whose name matches a metafield is filled from it. The sync turns the field’s name into a metafield key in snake case and reads it from the custom namespace. A field named Care Instructions is filled from custom.care_instructions.
• Any other field is left alone. Fill it by hand in Webflow.

Only these metafield types are copied, and only into the matching field type:

Other types are not copied. Copy a metafield into the CMS only when a Collection list must filter or sort by it. To show a metafield on the page, an attribute reads it straight from Shopify: see Metafields on the page.

6. Import and keep in sync

There are two ways to bring Shopify into the CMS:

To set up the server sync, open the CMS sync of the project in the Smootify dashboard:

1. Tell Smootify which of your Webflow collections holds the products, the collections and the vendors.
2. Choose to import everything first, or, if the CMS is already filled, only to follow the changes from now on.

From then on, Shopify tells Smootify when a product or a collection is created, changed or deleted, and the CMS follows. A product deleted in Shopify is removed from Webflow. You can turn the sync off at any time: the items already in Webflow stay.

Languages. If the site uses Webflow Localization, the import writes every enabled locale, with the translations you made in Shopify. Webflow’s default locale must be set. See Markets, currencies and languages.

Change products in Shopify, not in the Webflow CMS: the next sync writes over every field it fills.

7. Match the URLs of the template pages

Webflow gives each collection a template page at /<Collection URL>/<slug>. Smootify writes links to these pages itself, in cart lines, in search results and on links with product="url". In 2.0 it builds them as:

• /products/<handle> for products;
• /collections/<handle> for collections;
• /vendors/<vendor> for vendors.

When your Collection URLs are products, collections and vendors, there is nothing to set. When one is different, tell Smootify in its options, set in the head code before the loader (see Install Smootify 2.0):

<script>
  window.SmootifyUserOptions = {
    productsBase: "product",
    collectionsBase: "collection",
    vendorsBase: "vendor",
  };
</script>

Each value is the Collection URL of that collection. Smootify also uses productsBase to know that a page is a product page. With Webflow Localization, the language folder, such as /fr/, is added before it for you.

The slug is the Shopify handle, and Smootify’s links use the handle. Do not edit slugs in Webflow: change the handle in Shopify, then sync.

8. Bind the Shopify ID

On the template page of Products, and in every Collection list of products, a smootify-product element takes its data-id from the Shopify ID field. In the element settings of the Custom element, add the custom attribute data-id and bind its value to the field.

In purple, the values bound to a CMS field. Binding the texts too (Name, Price Formatted) gives the page its content before Smootify loads, which search engines read; Smootify then writes the live values from Shopify.

The layout of the card is up to you. More in Build the product page and Product cards.

Where people get stuck