# CMS collections and sync

> The Products, Collections and Vendors collections, what the sync copies from Shopify and why variants and stock stay out, when to sync, metafields copied into CMS fields, the import and the automatic sync, and the URLs of the template pages.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/getting-started/quick-start/create-cms-collections  
URL: https://www.smootify.io/docs/start/cms  
Updated: 2026-10-07

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.

> [!NOTE]
> Every plan can create the collections and import with **Smootify Studio**, the Smootify desktop app. The automatic sync on Smootify's server needs the Server plan. Products, collections and vendors all count as CMS items in your Webflow site plan.

## 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:

| Sync | No need to sync |
|---|---|
| You add a product, a collection or a vendor | Stock changes, or an order comes in |
| You delete a product | You add, remove or rename a variant, or change its options or swatches |
| You change a title, a handle, a description, the featured image or the SEO texts | You change a variant’s image or SKU |
| A product moves into or out of a collection | You change a price, and no Collection list sorts or filters by price: the page shows the live price |
| A metafield you copy into a CMS field changes | A metafield you show with an attribute changes |
| The price of the first variant changes, and a Collection list sorts or filters by **Price** | Selling plans change |

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:

| Field | Type | What the sync writes |
|---|---|---|
| **Name** | built in | the product title |
| **Slug** | built in | the product handle |
| **Shopify ID** | Plain text | the product id |
| **Description** | Rich text | the description |
| **Image** | Image | the featured image |
| **Price** | Number, decimal, format `0.00` | the price of the first variant |
| **Price Formatted** | Plain text | that price, in the store's money format |
| **Compare at Price** | Number, decimal, format `0.00` | the compare-at price of the first variant, `0` when there is none |
| **Compare at Price Formatted** | Plain text | that price, formatted; empty when there is none |
| **Is Gift Card** | Switch | on for a gift card |
| **Vendor** | Reference to Vendors | the vendor |
| **Collections** | Multi-reference to Collections | the collections the product is in |

Optional fields, filled when they exist:

| Field | Type | What the sync writes |
|---|---|---|
| **Product Type** | Plain text | the product type |
| **SEO Title** | Plain text | the SEO title from Shopify, or the title when it has none |
| **SEO Description** | Plain text, multi-line | the SEO description, or the description when it has none |
| **Image URL** | Plain text | the address of the featured image on Shopify, as text; Webflow does not copy the file |
| **Image Alt** | Plain text | the alt text of the featured image |

**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:

| Field | Type | What the sync writes |
|---|---|---|
| **Name** | built in | the collection title |
| **Slug** | built in | the collection handle |
| **Shopify ID** | Plain text | the collection id |
| **Description** | Rich text | the description |
| **Image** | Image | the collection image |

The optional **SEO Title**, **SEO Description**, **Image URL** and **Image Alt** work as for products.

## 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:

| Metafield type in Shopify | Webflow field type |
|---|---|
| True or false | Switch |
| Color | Color |
| Date, Date and time | Date/Time |
| Integer, Decimal | Number (decimal, format `0.00`, for a decimal) |
| Single line text, Multi-line text | Plain text |
| List of single line text | Plain text (the values separated by a vertical bar) |
| Rich text | Rich text |
| URL | Link or Plain text |
| Dimension, Volume, Weight | Plain text (the value and the unit) |
| File: an image | Image |
| File: another file, not a video | File |
| List of files: images | Multi-image |
| Product, Collection | Reference to Products or Collections |
| List of products, List of collections | Multi-reference to Products or Collections |

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](https://www.smootify.io/docs/build/metafields).

## 6. Import and keep in sync

There are two ways to bring Shopify into the CMS:

- **Smootify Studio**, the desktop app (every plan). It imports your products, collections and vendors into the CMS, and shows a detailed log of what happens to each item. Run it again after you add products in Shopify.
- **The CMS sync on Smootify's server** (Server plan). It runs on its own, on Smootify's server, and follows the changes made in Shopify. You set it up in the Smootify dashboard, as below.

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](https://www.smootify.io/docs/features/markets).

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

> [!TIP]
> While you build the site, always sync with Smootify Studio, even on the Server plan. Its log shows each item it writes and why one fails (a missing field, a wrong type, a required field), so you fix the collections before going live. Turn on the server sync once the CMS is final.

## 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](https://www.smootify.io/docs/start/install)):

```html
<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.

```html
<!-- Collection list settings. Source: Products -->
<div class="w-dyn-list">
  <div class="w-dyn-items">
    <div class="w-dyn-item">
      <smootify-product data-id="{Shopify ID}">
        <div product="title">{Name}</div>
        <smootify-price><div data-prop="price">{Price Formatted}</div></smootify-price>
      </smootify-product>
    </div>
  </div>
</div>
```

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](https://www.smootify.io/docs/build/product-page) and [Product cards](https://www.smootify.io/docs/build/product-cards).

## Where people get stuck

> [!STUCK]
> - **The sync finishes but products are missing.** They are not published to the Headless storefront's sales channel, or not available in your markets. See [Set up the Shopify store](https://www.smootify.io/docs/start/shopify-store).
> - **Nothing is imported at all.** Webflow's default locale is not set. Set it in Webflow, under Localization in the site settings.
> - **The sync fails and you do not know why.** Run it from Smootify Studio: its log names the item and the field that failed.
> - **The sync fails.** One of your own fields is set as required. Make it optional.
> - **Prices in the CMS are rounded (11.99 shows as 12).** The number field is not decimal. Set it to decimal, with the format 0.00, and sync again.
> - **A metafield field stays empty.** Its name does not turn into the metafield key, the metafield is not in the `custom` namespace, or its type is not in the table above.
> - **The sync reports a conflict.** The site is published to its `.webflow.io` address and its custom domain at different times. Publish to both together, or unpublish the `.webflow.io` address.
> - **Links in the cart or the search results open a 404 page.** A Collection URL is not the one Smootify expects. Set `productsBase`, `collectionsBase` or `vendorsBase`.
> - **The sync says Smootify lost access to Webflow.** Authorize the same site again from the dashboard: see [Connect the Webflow project](https://www.smootify.io/docs/start/webflow-project).