Getting Started

Thank you for purchasing The Canvas Club Ecommerce Webflow Template. We can't wait to see your business grow with it. Use this page to get familiar with the basics and learn how to edit pages and components. If you have any questions, reach out to us at support@mammamiastudio.com

Basics

Webflow basics to help you get started with the template.
1

Webflow Crash Course

To use this template in the best way possible, we recommend a basic to intermediate level of understading how Webflow works. If you are a beginner, check out the resources below that will help you get the best out of this Ecommerce Template.

2

Style Guide

The Style Guide page will help you ensure a continuous brand experience and the possibility to quickly change the styles of the main components all over the template.

Styling

How to manage the main stylings of this template
1

Colors

The Canvas Club e-commerce Template uses color swatches, which means it is very easy to update the colors site-wide to your liking.

In order to do this, you just need to go to the Style tab in the right sidebar, then scroll to Colors in Typography section, and if you click the color, you will be able to see all color swatches and edit them to be updated site-wide to any color needed.

NOTES:

  • Change the color of Headings and Paragraphs to white, simply by adding the combo class 'Text Light' to the element.
  • Change the color of Section element to Beige, Light Green or Dark Green by simply adding the combo class 'Bg Beige', 'Bg Light Green', and 'Bg Dark Green' respectively.
2

Typography

The Canvas Club Print Shop Ecommerce Webflow Template uses typography formatted with search engines and accessibility in mind.
There are two fonts site-wide in this template, and the main one is set up in the Body (All Pages) selector. Changes to this selector (like the font) will pass down to all your text. This is a great way to set defaults so the font can match your brand.

This template uses REM as font-size unit. Using REM sizes accross the template will allow for a more accessible website.

To make changes to font sizes, keep in mind that the default sizing is 1REM = 16px.

3

Containers

This e-commerce template has a maximum width of 108REM or 1728px - if the user's document's font-size is set to default i.e. 16px. This means that the container and elements inside will scale down if the viewport size is smaller but will never go above 1728px-width.

Various

Other things to keep in mind
1

Navigation

The navigation bar in this template is custom made. The 'Shop' Dropdown Menu has 2 different category links: Shop Categories andShop Bestsellers

The Shop Categories and Shop Bestsellers are part of a CMS collection. This means that the links will be automatically updated.

NOTES:

  • Shop Bestsellers is limited to 4 products. The products to be featured in this dropdown section can be manually selected. To feature product here you need to switch 'ON' the Navigation | Feature Product in Navigation Bar? switch field in the Products CMS Collection List.
2

Featured Products

In this e-commerce template, you can manually choose which products to feature in different sections site-wide.

1. Feature Products in Trending Section on Homepage

To manually select which products to feature in the 'Trending Section' switch 'ON' the Homepage | Feature in Trending Section? switch field in the Products CMS Collection List

Switch 'ON' to feature the product in Trending Section

2. Feature Products in 'Artist's Favorites' Section on Homepage

To manually select which products to feature in the 'Artist's Favorites' Section, switch 'ON' the Homepage | Feature in Artist's Favorites Section? switch field in the Products CMS Collection List

Switch 'ON' to feature the product in Artist's Favorites Section

3. Feature Products in Top Section on Shop Page

To manually select which products to feature in theSection, switch 'ON' the Shop Page | Feature at Top? switch field in the Products CMS Collection List.

Switch 'ON' to feature the product in Top Section

4. Feature Products in Bestsellers on Shop Page

To manually select which products to feature in the Bestsellers Section on Shop Page, switch 'ON' the Shop Page | Bestseller? switch field in the Products CMS Collection List.

In this section products are also divided by categories, where each tab is the different product category.

Switch 'ON' to feature the product in Top Section

5. Feature Products in Product Slider on Shop Page

The products featured in the product slide on the Shop Page are manually selected. Each slide is a separate Collection List. You can add more sliders, based on your needs.

To manually select a product to feature in the Product Slider, follow these steps:

  • Select the Collection List element in the slide you want to edit/customize
  • In the right side panel, go in the Collection List Settings
  • Scroll to the Filters Section
  • Filter the product by name - add the name of the product you want to feature in that slide
    *NOTE: pay attention to not make any typos as it would result in an empty collection list
Edit Product Slide on Shop Page
3

Reviews

The Reviews section in the Product Page is a static section. This means that all reviews inserted will be the same accross all products. That's why the Review Section is designed as a mere presentation on how you can style them in case you decide to insert a Testimonial Widget. At the moment, Webflow doesn't offer native testimonial widget but there are other third-party services that do.

4

Support

For any issues, question and difficulties you might have, or if you simply want to say Hi, you can reach out at support@mammamiastudio.com. We will be happy to help you!

5

Template Customization

The Canvas Club Print Shop E-commerce Template has been created to allow you to easily modify it and adjust it to your needs. But if you want us to customize this template and make it match your brand and needs, get in touch with us for a free consultation.