Setup

Design

Your webstore design starts with your theme. Themes of the Sana Commerce webstore control all aspects of the webstore appearance.

The theme editor lets you customize your webstore logo, favicon, fonts, color and size of the texts. You can also change the color of the graphical elements in the webstore. Using the theme editor you can determine the overall look and feel of your webstore without any knowledge in HTML or CSS.

To create new themes and to manage your webstore design in Sana Admin click: Setup > Design.

Themes

Under the Themes tab you can create webstore themes. If you have a multi-store solution the list of themes is shared with all available webstores.

Any of the themes can be applied to your webstore by making it Active.

Refer to the Themes section and see the default webstore theme and all its elements that can be managed.

Store layouts

Sana Commerce contains a powerful page templates and themes system that can be used to completely customize the look and feel of your webstore to meet your needs and to integrate it with an existing webstore design.

In Sana Admin click: Setup > Design > Store layouts.

Under the Store layouts tab you see all custom store layouts that are uploaded with the design packs. A store layout is the master layout that is used to change the overall look and feel of the webstore.

Out of the box Sana Commerce contains only the default store layout.

If a design pack has been installed and it contains the custom store layout it will be available under the Store layouts tab. There you can see the store layout name and the design pack that contains it and you can activate the store layout and apply it to your webstore.

For more information, see 'Design packs'.

If the custom store layout is applied to your webstore you can still use page layouts and webstore themes to manage the look and feel of your webstore.

Page Layouts

Sana Commerce comes with several default content and product page templates that have a different layout and features. For more information about product and content pages, see 'Web Pages'.

Product list page, product details page, search results page and basket page have several page layouts with a predefined set of features that can be changed per customer group.

In Sana Admin click: Setup > Design > Page layouts.

Under the Page layouts tab you select page layout for each page type (Product list page, Product details page, Search results page, Basket page) per customer group (B2C customers, B2B customers, Sales agents).

The tables below provide an overview of features that are available/not available in each page layout.

Product list page

Page layout/ Feature	Order list mode	Variants display mode	Units of measure
List B2C	X	X	X
List B2B	✓	Matrix	✓

Product details page

Page layout/ Feature	Variants display mode	Units of measure	Write a review	Tell a friend	Add to wish list
Details B2C	Dropdown	✓	✓	✓	✓
Details B2B	Dropdown	✓	X	X	✓
Details B2B + matrix	Matrix	✓	X	X	X

Search results page

Page layout/ Feature	Variants display mode	Order list mode	Units of measure
Search B2C	X	X	X
Search B2B	Matrix	✓	✓

Basket page

Page layout/ Feature	Quick order	Units of measure	Add to wish list	Save as template	Variants
Business	✓	✓	✓	✓	Collapsible
Consumer	X	✓	X	X	Each variant as a separate line

Design packs

Developers can create packages containing store layouts and page layouts that can be uploaded from Sana Admin. By uploading such packages the custom layouts become available for selection in Sana Admin and can be applied to your webstore.

This way there is no need to customize your Sana webstore to create some fancy custom design. Design packs can be developed by Sana, design agency, partners or customers. A webstore administrator can easily upload a design pack from Sana Admin and apply the custom layouts to the webstore.

When you upload any design packages you can see the name of the design pack and version, its description and author.

Store layouts installed with the design pack can be seen under the Store layouts tab and applied to your webstore.

Page layouts installed with the design pack can be seen under the Page layouts tab per customers group and on the product list and product details pages.

For information about how to create a design package, see 'Design Pack'.