Showcasing products & styling your pages in Webflow

Now that you’ve created your product pages and added the CartGenie page templates to them, its time to customize your store!

(note: if you’re pretty familiar with Webflow’s designer, you can skip this article.)

Adding Products to Your Homepage (or another page)

In the Webflow designer, go to your homepage and drag a “Collection List” block on the page.

Double click the block and select the “Products” collection. Then, set your preferred column layout configuration.

Be sure you’ve published a few products or else Webflow will say that no items are in the collection (even if they are saved as draft)

Next, drag a Link Block into one of the Collection Item slots

In the Link Settings, click the purple page icon and from the “Page” dropdown select “Current Product”

This will ensure that if someone clicks on of your items, they will go to the product’s detail page so they can purchase the item.

You can now add an image, heading, and text block inside of the link block.

One by one, select an element and connect it to the corresponding CMS field by clicking the purple dot in the popup settings and selecting the desired field.

• Image: Connect to “Main image”

• Heading: Connect to “Name”

• Text Block: Connect to “Price”

Now its time to style the elements to fit your design preference!

How to Style Store Pages & Blocks

It is very important to not remove any CartGenie blocks on the product, checkout, or confirmation page. Feel free to style them or move them around as needed though!

With Webflow, the possibilities are endless! Almost anything you can think of, you can do.

I’m going to just show a quick example of how I created this product grid layout for my homepage. These same principles can be used to style the product, checkout, and confirmation pages.

I then selected each layer and then went to my “style” settings on the right of Webflow’s designer and edited these bits:

Collection Item

• Background: White

• Border radius: 10px

• Box Shadow: 0px 0px 15px 0px rgba (0, 0, 0, 0.1)

Link Block

• Width: 100%

• Height: 100%

• Padding: 30px

• Decor: none (so the text won’t be underlined)

Image:

• Max-Width: 200px (depends on your site)

• Max-Height: 200px (depends on your site)

• Fit: Contain

Heading:

• Font: Montserrat Bold

• Size: 30px

• Line Height: 37px

• Color: #616161

Text Block

• Font: Montserrat Medium

• Size: 19px

• Line-Height 20px;

• Color: #b3b3b3

Feel free to get creative and style the elements on the other store pages as well! If you make a mistake on a CartGenie page, we recommend deleting the CartGenie section and using our Designer Extension to re-paste the template back in.