Styling and Design

Styling results to match your design on Smartweb / HostedShop

Styling results to match your design on Smartweb / HostedShop Make results an integrated part of your existing design Stefan Lorenz Olsen

Designs determine how the products should be rendered visually. One Design can be used across multiple Content blocks.

When you have finished the Setup Guide for Smartweb at, you will have 3 Smartweb specific Designs available, which are pre-made with the correct template variables:

These can usually be changed to match your webshops design.

The Website Design language is a modified version of Handlebars. You can read about the Website Design Language here.

Product HTML

The HTML code used to render each single product. Product attributes can be inserted via our templating language and then used as part of the Design. By default, new Designs come with HTML for a simple product design that renders an image and a name.


The HTML code to wrap the products. The container code is raw HTML. The element that products should be injected into must have the class :target as this targets products to that specific element.  

All Design have the variable available in the container. Using this, will render the title specified in your Content block.

By default, the recommendations are rendered as a simple slider. This can be changed by removing the script in the bottom of the editor.


You can use this editor to write custom CSS for use in your templates. Any CSS you write will be injected to the top of the page.


Allows you to write custom JS functions that can be used in the template. An example could be a function that strips HTML from a description, or formats a picture.

Easily Copy Existing Design's embed-codes simply inject everything to your webshop, meaning that all of your existing CSS is available in your Design.

Designing can be very easy, by simply copying the HTML of a product, replace any product-specific data with template variables, and copy any container-specific classes to the Design Container.

This should get you a long way.

Check out the below video for an example of how to do this (notice that it uses the old backend as an example, but the process is the same).

Did this answer your question?