Getting Started

Thank you for purchasing Essence 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@thepapestielliz.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

Essence 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.

Change colors sitewide

NOTES:

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

Typography

Essence Skincare 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 EM as font-size unit. That means that on desktop screens 1EM = 1VW. The font size will automatically adjusts to the width of the screen, hence the template has a more harmonious design, regardless of screen size.

On screen sizes below 991px width 1EM = 16px.

3

Containers

This e-commerce template doesn't have a maximum width. The Container will always take 100% of the ViewPort.This means that the container and elements inside will scale up and down based on the viewport size and the elements will always have the same look no matter if the website has been browed from a smaller or larger screen.

See below example for comparison.

Various

Other things to keep in mind
1

Navigation

The navigation bar in this template is custom made. The 'Shop' Dropdown Menu has 3 different category links: Shop Categories, Shop Latest Products & Shop Bestseller.

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

Shop Bestseller is a static link that needs to be updated manually. This will allow you to quickly change links (even alternate between product and blog post link). What is more the use of CMS Collections is lower, hence the website performance is better.

NOTES:

  • Shop Latest Products is limited to 4 products. The order is based on the date (from newest to oldest) the product has been published.
2

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.

3

Support

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

4

Custom Website Design

The Essence Skincare E-commerce Template has been created to allow you to easily modify it and adjust it to your needs. But if you want a custom website, tailored to your needs and entirely developed in Webflow, check out our website and feel free to get in touch with us for a free consultation.