Design Pack [Sana 9.1.4 & later]

Sample Pack

This chapter provides an example of two design packs, one contains page layouts ('PageLayoutsSamplePack') and another one contains store layout ('StoreLayoutSamplePack').

These design packs can be used as a starting point for building your own design packs with the custom page and store layouts.

Use these packages only to start building your own design packs or for learning purposes. Do not use these packages on the live environment. You should have either the test environment of Sana Commerce or the Sana Commerce SDK solution.

Sample design packs are available on the Sana Community web site. Only registered Sana partners have access to Sana Community and can download sample design packs. If you are a customer and you want to check sample design packs, please contact your Sana partner or Sana project manager.

Page Layouts Sample Pack

This is a sample package that contains three page layouts - basket page layout, product page layout and product list page layout. For more information, see 'Page Layouts'.

To explore the contents of the package, change extension to .zip and extract the archive contents to a folder.

For more information about package contents and structure, see 'Design Pack Contents and Structure'.

Open Sana Admin and click: Setup > Design > Design packs. Upload the sample design pack which contains page layouts. When you upload the design pack in Sana Admin, the package contents will be integrated into the Sana Commerce solution.

For example, check the '\Views\Default\Basket' directory of the Sana Commerce frontend. When the sample design pack with page layouts is uploaded, you will see the 'SampleBasketDetails.cshtml' file. This is the customized view of the basket page. Only the header is added to this customized view of the basket page. This is done for demo purposes.

All other custom page layouts uploaded with the sample pack can be also seen in the corresponding folders of the Sana Commerce frontend directory.

    If you use Sana Commerce SDK, the files uploaded with the design pack are not added to the Visual Studio solution automatically. This can be done manually, if needed.

Now, you can edit the uploaded custom page layout files and see your changes on the frontend.

When all changes are done and your custom page layouts are ready, you can create your own design pack or update the existing sample pack.

For more information, see 'Create a Design Pack'.

Store Layout Sample Pack

This is a sample package that contains only one store layout. For more information, see 'Store Layouts'.

To explore the contents of the package, change extension to .zip and extract the archive contents to a folder.

For more information about package contents and structure, see 'Design Pack Contents and Structure'.

Open Sana Admin and click: Setup > Design > Design packs. Upload the sample design pack which contains a store layout. When you upload the design pack in Sana Admin, the package contents will be integrated into the Sana Commerce solution.

If the sample design pack with the store layout is uploaded, check the 'Views' and '\content\css' folders of the Sana Commerce frontend. There you will see the 'SampleStoreLayout' folder. This is the customized store layout uploaded with the design pack.

This way you can replace any standard page view from the 'Default' folder of the Sana Commerce solution with your custom implementation.

You can copy any page view from the 'Default' folder of the Sana Commerce frontend to the corresponding folder of your custom store layout and modify it. The same can be done with the CSS files and any other files from the 'content' directory of the Sana Commerce frontend that you want to use for your custom store layout.

When you copy any default views, CSS files or any other files to your custom store layout folder and modify them you can see your changes on the frontend.

    If you use Sana Commerce SDK, the files uploaded with the design pack are not added to the Visual Studio solution automatically. This can be done manually, if needed.

When all changes are done and your custom store layout is ready, you can create your own design pack or update the existing sample pack.

For more information, see 'Create a Design Pack'.

When you upload the design pack in Sana Admin which contains the custom store layout and make it active, at first Sana checks whether there is any custom store layout (custom page views, CSS files or any other files). If there is any custom store layout, it will be used. If there are no custom files, the default ones will be used.