Collections & Vendor Pages

In this video, we're going to cover how to create your vendor and collection pages. The beauty of working with Smootify is that you can leverage your existing Webflow skills. You just need to add a few elements to make it work.

I've quickly created a sample vendor page that demonstrates how it works. As you can see, it's fully functional and pulls in the various information. If you add a product to the cart, everything comes through.

Because we're working with Webflow, the process is the same as usual. Once you've created your CMS collection pages, you would simply edit the various templates.

For this example, I've created a simple structure. You can design it to your liking using your normal Webflow process.

Let's start with the vendor page. I've created a basic structure with a section, global padding, section padding, and a container. There's nothing hidden or magical here; it's just a simple structure.

Go to the documentation for the vendor page. You'll see the structure is straightforward. We need to include a collection list and the card wrapper, and bind it to the Shopify ID.

Let's add a heading to our vendor page and bind it to the vendor name. Add a spacer, and then add a collection list.

Use the CMS product list to reference the products. You can customize the list style as needed.

Next, filter the collection list based on the vendor data. Use the 'Name is Vendor' filter and set it to the current vendor.

Now, include the product card. Copy the product wrapper and paste it into your collection item. Connect the ID to the Shopify ID.

Copy the product card and paste it into the same place.

You'll need to bind the elements to the CMS fields, just like you would with any other collection list item. Choose the image, heading, brand name, and link it to the collection page.

Save and publish, and you'll see the products loading with the correct pricing.

The pricing is loaded directly from the API, but there might be a slight delay in displaying the price initially. It's best practice to use the formatted price fields for SEO purposes.

For the collection page, it's similar. Duplicate the vendor page, unbind the vendor-specific elements, and adjust the filter to use the 'Collections Contains Current Collection' filter.

That's it! The process is straightforward, and you can customize the design to your liking.