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

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

In Sana Admin you can download and import themes. A theme is stored in the XML file. A webstore theme can be added to the design pack, so it will be a part of the custom webstore design. For more information see, 'Design Packs'.

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.

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

On 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 a design pack containing store layouts, page layouts and themes that can be uploaded to Sana Admin. By uploading a design pack to Sana Admin, the custom layouts and themes become available 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 to Sana Admin and apply the custom layouts and theme to the webstore.

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

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

Page layouts installed with the design pack can be seen on the Page layouts tab per customer type and on the product list and product details pages.

Themes installed with the design pack can be seen on the Themes tab and applied to your webstore.

Sana delivers a few design packs which are available on the Sana Community web site.

For information about how to create a design package, see 'Design' on Sana Community. Only registered Sana partners can access this documentation.