Design the Product Page

In this video, we're going to go over how we can get started with Smootify and connect your Shopify data to your Webflow-built website. More specifically, we'll focus on getting the add-to-cart functionality working within the product pages.

There are a few things we need to cover, but the Smootify process is designed to be as easy and simple as possible. Let's start with a blank template. I'm using one of Smootify's templates, the unstyled one. It comes with all the CMS structure already set up, so you don't have to figure it out yourself. You've got products, collections, and vendors, and you're pretty much ready to go. Once you've finished your other configuration, you'll be back here.

Next, we need the Smootify app and your project. I already have it installed here, but you can find it in the Webflow apps under e-commerce. If you don't want to install the app, you can still get these components from the documentation. You can copy and paste them from there.

Let's head over to the product template. Open it up, and you'll see it's completely blank. I've created a simple structure for padding and spacing, but you can do this however you want. These elements are empty for now.

Now, let's open the Smootify app and grab the first component, the product wrapper. This component links the Webflow front end with the Shopify CMS data. Copy it and paste it into your hierarchy. You'll see it says 'Smootify product.'

Don't forget to connect the data-id attribute to the CMS. This is how we link and provide Shopify with the information to send the correct data to this product page.

Delete the existing data-id and go to the Smootify products. You'll see a data-id attribute. Click on it, and you'll find the Shopify ID in the list.

The product wrapper is a container. Anything you want to have as dynamic or Shopify data needs to be nested within it.

Next, add the product page element. Copy it and paste it inside the product wrapper. Now you have a more traditional page structure.

When clicking around this structure, you'll notice a few custom HTML elements like compare-at-price and regular-price. They have attributes like data-prop=price and data-prop=compare-price. These attributes identify what needs to be replaced with Shopify data.

Let's link the various elements to our CMS. We'll start with the heading: name. Then, we'll link the image and the slide. For the prices, we'll use compare-at-price-formatted and regular-price-formatted.

If you don't have a product description, you can link it like you would normally.

For the variant swatches and variant selector, you'll see there are three of them. Each has a data-option custom attribute: data-option-1, data-option-2, and data-option-3. These are important if you want to change things around. For example, if you want two variant swatches instead of three, update the data-option values accordingly. Even if your Shopify store doesn't have multiple variants, it's best practice to have three options. Shopify's logic will hide and show them based on your product's configuration.

The other elements are pretty much configured out of the box. You have conditionals for stock labels (condition-out-of-stock and condition-in-stock) and the stock quantity, which is displayed.

For the buy now buttons, the custom attributes are set up, and you just need to copy and paste them.

From a styling standpoint, you're free to do whatever you want, but be respectful of the overarching structure. If you're moving elements around, make sure data is linked correctly. If something isn't working, you can always revert to the standard version and restyle it.

Let's check how this works. I'm going to choose a product with variants. Publish it, go to the site, and see how it looks.

You can see the product variants, prices are updating correctly, and everything is working. If you go to the data, you can see the different variants coming through nicely.

That's the first step to getting this live. I hope you found this helpful, and I'll see you in the next video.

‍