Learn more from these resources to help you understand how to kick-start your business using Ecommerce UI Kit.
Most of the layouts you can use to build your website live across the pages of the Prospero UI KIt project. In the project, navigate to each page in the Pages panel to explore the different layouts.
Additional layouts for product pages and category pages can be found on the product and category templates in the Pages panel. Each full layout is wrapped and labeled in a div, and can be seen in the Navigator panel.
To get started, you’ll have two options:
This option will allow for a clean start. In a new project, enable ecommerce by clicking on the cart icon in the left menu.
You can just work from the cloned UI Kit project, though it may be harder to work around the imported assets in the asset manager, and all of the pre-built content. The advantage will be that products and content are already bound to the corresponding design layouts.
Add your products and variants manually, or use our CSV import tool. If you’re working from the UI Kit project, you may have to delete the products that are already featured in the kit. Remember that you’re also able to customize the product content structure by adding custom fields in your product settings.
.png)
Head to the the Products collection in the Ecommerce panel, and click “New Product” to manually add your items.
You can batch import your product information using a downloaded or manually created CSV. Head to Webflow University for a full lesson on how to prepare your CSV.
Note: You will not be able to enable checkout on an Ecommerce site without a hosted subscription. Head to our pricing page to see the various ecommerce plan options.
You can create a new page by opening the Pages panel and clicking on the Create a new page icon.
To use the sections and layouts featured in the Prospero UI Kit, copy and paste between pages or projects. You can copy and paste full sections or layouts, or any element within the kit. Each section is wrapped and labeled in a div, and can be seen in the Navigator panel. Static content will be completely copied over, though only dynamic and elements and styles will be duplicated.
There are 2 ways to add dynamic content into the UI kit. First is for sections with only 1 featured product and the second way is to fill content into section using multiple items such as list of products or blog posts. We will cover all of this in the video below.
To match your brand you can change the typeface in the whole UI kit just by changing one property. In the video below we provide a quick guide.
In this simple walkthrough we will create a simple page using 4 sections and we will take a look at how to work with .div Wrapper and how to use pre-defined spacing using mXXX combo classes.
The author has included a comprehensive guide that lays out all of the CSS styles used throughout the kit. It includes specific directions on using text styles, product cards, and wrappers. Visit the style guide here
If you need a hand in getting started, make use of our ready-to-use templates. These templates, Luma and Grit, can be found in the Webflow template marketplace.