Design Pack

Sample Pack

This chapter provides an example of two packages, one containing the page layouts ('PageLayoutsSamplePack') and the other one store layout ('StoreLayoutSamplePack').

These design packs can be used as a starting point for building your own packages with a 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 can be downloaded on the Sana Community web site.

Page Layouts Sample Pack

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

To explore the contents of the package, open it in the NuGet Package Explorer.

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 page layouts sample pack. When you upload the design pack from Sana Admin, the package contents is integrated into the Sana Commerce solution.

For example, check the '\Views\Default\Basket' directory of the Sana Commerce frontend. If the page layouts sample pack 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.

Note, that if you are using 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 the 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, open it in the NuGet Package Explorer.

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 page layouts sample pack. When you upload the design pack from Sana Admin, the package contents is integrated into the Sana Commerce solution.

If the store layout sample package 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.

Note, that if you are using 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 the 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 from Sana Admin containing 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.