Getting Started

Thank you for purchasing Ceramika 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.

Webflow University

2

Styleguide

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.

Styleguide

Styling

How to manage the main stylings of this template

1

Colors

Ceramika 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 dark beige by simply adding the combo class 'BCG 2'.

2

Products Color Swatches

Ceramika e-commerce Template has color swatches for the products available. This is a separate CMS collection named Color Product Variants. Here's a quick guide on how to add new colors and connect them to a specific product:

Step 1

The first step is to create a new Color Product Variant in the CMS.

Create a NEW Color Variant in the CMS

Step 2

Once created, open the product (Ecommerce CMS) you want to assign the created color to - scroll down to the Custom Fields section and inside the Color Variations Reference Field select the color you want to assign to the product.

Assign Color Variant to product

Note

  • At the moment there is no possibility to link the CMS colors to product variant buttons without the use of external code. Here's a quick solution to follow from a Webflow user in the Webflow Forum. Otherwise the color swatches will only represent the colors without the possibility to change between them by clicking on the swatches.

3

Typography

Ceramika 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 with width between 991px and 1920px, 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.

4

Containers

This ecommerce template has a maximum width of 1800px for the Container size. This means that the container and elements inside will scale down if the viewport size is smaller but will never go above 1800px-width.

Various

Other things to keep in mind

1

Global Classes

Ceramika e-commerce template uses some global classes to additionally customize the look of the website in the best way possible. Here is a list of the main global classes used:

  • Inner Spacing - adds 5em of padding left & padding right to the element
  • Inner Padding Left - adds 5em of padding left to the element
  • Inner Padding Right - adds 5em of padding right to the element
  • Desktop Only - Element is visible for Desktop only

2

Navigation

The navigation bar in this template is custom made. Different links are visible for the desktop version and the mobile version of the navigation.

Edit Navigation for desktop

The navigation bar in this template is a symbol which means that every change you make to it will apply to all the navigations throughout the template.

To edit the navigation for desktop simply double click on the navigation element to make the symbol editable and make all the changes you'd like.

Edit Navigation for touch screens

For touch screens (tables, mobile landscape & mobile portrait) you can add additional links to the navigation bar that are not visible in the desktop version. To edit the navigation for touch screens follow the next steps:

Step 1

Select the Tablet View Mode and double click on the Navigation so you can edit the main symbol

Step 1 - Edit main symbol from Tablet View

Step 2

Once you are inside the symbol, open the navigation from the settings tab in the right panel and edit/add links to the Div Block with a class name of Nav Mobile Menu Links

Step 2 - edit/add links visible for touch screens only

3

Magazine (featured blog posts)

In the Magazine V1 page and Magazine V2 page, there is a featured article on the left and other articles on the right.

You can change the featured articles from the Magazines CMS fields. At the end of this CMS collection there is a switch named Main Featured Article. Turn the switch ON for the article you want featured.

Attention! Only 1 article can be featured, so having the switch turned ON for multiple articles might result in some articles not to be present on the page.

Main Featured Article for Magazine V.1

The Main Featured Article in the Magazine V.1 page is on the left side of the screen. Whereas the rest of the articles are put in 2 columns on the right side of the screen. Each column represents a different Magazine Category.

Main featured article for Magazine V.2

Secondary featured article for Magazine V.2

In the Magazine CMS collection there is another Switch named 'Secondary Featured article'. The Secondary featured article is present in the Magazine V.2 Page. Turn the switch ON for the 2 articles you want to be featred as secondary.

Attention! Only 2 articles will be featured. Having the Switch ON for more than 2 articles might result in some of the articles to not be present on the page.

4

Reviews

The Reviews section in the Products Page is a static section which means that all the 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 the reviews if 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.

5

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!

6

Custom Website Design

This template has been created in a way 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.