Levi

The Levi theme has three different pre-sets: full width, framed and boxed. Each pre-set has the same elements, but they are positioned or designed differently for each pre-set. This means that you can choose the pre-set that suits you best.

Pre-set 1 – Full width

Pre-set 2 – Framed

Pre-set 3 – Boxed

Pre-set 1 – Full width

This pre-set contains elements for the full width as well as boxed elements. The elements for the full width are limited, however, to a maximum width of 2000 pixels.

The following elements are displayed across the entire width:

• Header background
• Slider
• Product
• Sales block
• Newsletter
• Footer background

Pre-set 2 – Framed

The elements in this pre-set are contained within a frame. The design of this pre-set is a design frequently used in websites and webshops.

Pre-set 3 – Boxed

The design of this pre-set is framed, just like pre-set 2. The difference lies in the design of the elements. The latter are designed as blocks with a small shadow, which brings the element to the fore.

Header design: 

With the Levi theme, it is possible to set up the header itself. There are 3 bars in the settings for this theme: "My Webshop > Settings > Webshop themes > Levi theme > Modify settings > “Header design” tab.

Top webshop bar: 

In this block you can set up the top bar. You can add 0 to 3 elements in the top bar. If you choose not to put any elements in the top bar, that bar will not be visible. The elements you can place there are as follows:

• Page menu
• Webshop USP
• Language choice and login
• Image
• Own HTML Header #1
• Own HTML Header #2
• Empty (no elements)

You can choose from the same elements in this position as the ones available in the "Top bar left”.

Top bar right: 

• Language choice and login
• Image
• Own HTML Header #1
• Own HTML Header #2
• Empty (no elements)

Middle webshop bar left: 

• Webshop logo
• Search function
• Shopping cart & wish list
• Own HTML Header #1
• Empty (no elements)

Middle webshop bar centre: 

• Webshop logo
• Search function
• Shopping cart & wish list
• Show all categories
• Own HTML Header #1
• Own HTML Header #2
• Empty (no elements)

Middle webshop bar right: 

• Search function
• Shopping cart & wish list
• Own HTML Header #1
• Own HTML Header #2
• Empty (no elements)

Menu Bar: 

In this block you can choose from among 3 views for the menu bar. In addition, you can change the background colour and text colour. 

You can choose from among the following views;

• Show all categories
• All categories shown in a drop-down and pages on the right
• All pages shown in a drop-down and categories on the right

Header Design: 

In this block you can set up all the elements. You can display these elements by giving them a position as described above. The position where the element can be displayed is also described above.

Webshop Styling:

"My Webshop > Settings > Webshop themes > Levi theme > Modify settings > “Webshop styling” tab.

Font & Colour 

In this block you can choose from among various fonts and you can change the colours so as to give the theme the effect that fits best with your webshop. It is important to know that the primary colour is also used for the most important element (call-to-action, for example) on a page. The secondary colour is used for (somewhat) less important elements.

Own CSS 

In this block you can add your own CSS without having to switch the theme to a ProTOM theme.

Please note: fill in this block only if you are familiar with CSS. If used incorrectly, the theme may not work properly.

Content:

Various elements have been designed for the Levi theme in order to make it unique. The design of the elements is adjusted to the selected pre-set. The elements can be set up in the Content tab "My Webshop > Settings > Webshop themes > Levi theme > Modify settings > “Content” tab). How you can display each of these elements is explained below. 

Unique selling points 

In this block you can enter the USPs of your webshop. You can add a maximum of 3. For each USP you can enter a text and select an icon.

The USPs can be displayed in these positions of the header:

Top bar left 
Top bar centre 

Contact 

In this block you can enter your contact details, as well as your opening hours, for example. In addition, it is possible to show Google Maps with your own icon and a Google pin can be added. If you don't wish to display this element, make sure you leave these fields empty.

This element will appear on the home page. 

About us 

In this block you can enter a title, text, image and a button. The title, text and image are self-explanatory. For the button, you have space to enter text that is to appear on the button, and a URL. If you don't wish to use this element, make sure you leave these fields empty. his element will appear on the home page. 

Payment methods

In this block you can add up to 6 images. They will appear on the home page. If you don't wish to use this element, make sure you leave these fields empty.

Extra block for categories on the home page. 

With the Levi theme, the modular "Specific categories" element has a unique design on a modular page. It looks like this, for example:

The extra block in the centre can be displayed and changed via the theme settings.

Images for the categories

The images used are those that are uploaded for a category: "My Products > Manage categories > Change category > General information tab > Photos. For the best result, a square image has to be used with a minimum size of 360x360 pixels.

Sales block 

In this block you can change the sales block. This block is intended as a call-to-action block. You can add a title, text field and button, and you can also change the background colour and text colour. This element will appear on the home page. If you don't wish to display this element, make sure you leave these fields empty.

Example of the sales blocks: 

Newsletter: 

In this block you can enter a title and text. If you fill in this element, it will appear on the home page If you don't wish to display this element, make sure you leave these fields empty.

Product layout

In this block you have two options as regards the layout of products on a modular or category page. 

Show stock

If the “Show stock” option is set to “Show”, then below a product's block you will see whether or not a product is in stock.

Product image

Here you have two options: filled or freestanding. See the examples below:

Example of filled: 

Example of Freestanding: 

Product on sale. 

In this block you can opt whether or not to display the products on sale on the home page. The products that are shown here depend on the setting "Show product in the website layout if the window ‘On sale’ is present". This setting can be found here: "My Products > Manage products > Change product > Options tab. It is possible to check this setting for several products. In that case, the products appear in a slider, and the user can browse through the products. If this setting is checked for up to 25 products, the products will be shown in the following order. If this setting is checked for more than 25 products, the products will be shown in random order.

Show blogs on the home page

In this block you can opt whether or not to show the blogs on the home page. It will look as follows:

Load product images

In this block you have the option of loading the product images only once they are being displayed. This helps speed up the loading time of the page.

Before loading: 

After loading: 

Slider settings 

The Levi theme also has its own slider for the home page. You can add up to 6 slides. The slider's design depends on the pre-set selected. For the best results, use a high-resolution image. The maximum height of an image is 425 pixels.

Slider for the Full width pre-set

Slider for the Framed pre-set

For the best results, use a high-resolution image. The maximum height of an image is 425 pixels.

Slider for the Boxed pre-set

For this pre-set, the slides are shown in square blocks. For the best results, you will thus need to keep a square format, such as 400x400 pixels.

Footer 

In this tab you can set up your footer as you wish. This works in the same way as the header, which means you can place elements in a specific position.

Footer 

In this block you can fix the positions. For each position, you have the following options:

• No content
• Text area
• Webshop navigation
• Webshop categories
• Own HTML Footer #1
• Own HTML Footer #2
• Own HTML Footer #3
• Facebook feed

Footer content:

In this block you can change the footer's style and you can also enter a title and text field to be used in the text area element. In addition, you also have the option of entering the name of your Facebook page, so that you can use the Facebook feed element.

Bottom footer bar: 

In this block you can change the style of the bottom footer bar. You can also change the background colour and text colour.

Own HTML: 

In this block you can use your own HTML. You can add up to 3 elements. If you wish to show this, then opt for a position for "Own HTML Footer (1, 2 or 3)" in the Footer block.

Product Views 

The Levi theme has four different product views. Two block views and two list views. The block views focus more on the images, whereas the list views highlight the product description. Depending on your situation, you can decide which view best suits your webshop.

Block view 1

This view focuses on the product images. Moreover, this view has a number of new effects to give it a more trendy appearance.

Effects

If you hover over a product with the mouse, you see an overlay with a number of options. Depending on your settings, various options will appear. If you add several product photos, the option "SHOW IMAGES" will appear.

If you click "SHOW IMAGES", the product turns around and you can view all images by clicking on the arrows. By clicking on the "x", you can return to the normal view. In addition, by clicking on the heart, you can place a product on your wish list.

If you click "QUICK VIEW", a pop-up will open with the accompanying information. This provides additional information about the product. The text shown here is the regular product description. In addition, you have the option of accessing the detailed information page for the product.

Tip: If a product has attributes, there is no "Order" button. This is because another pop-up will appear for products with an attribute, and this would not be very practical.

Block view 2
This view contains the same elements as block view 1 but in a different design. Instead of an overlay, you can see the buttons immediately.

List view 1
The list views are more focused on the description of a product rather than on images. You have more space here to add a product description.

List view 2
This view has no product images and is intended only for product information. If you sell products for which there are no images, then this view would be the most suitable for you.

Product view settings
All views come with a number of settings, including "Show stock" and "Product image". Showing stock is self-explanatory, allowing you to choose whether to show the text "in stock" on your product views.

The "Product image" setting determines whether you want to have your image filled or freestanding.

Filled (Recommended format 260x330)             
The "filled" setting is intended for images that are filled in across the entire block.

Freestanding (Recommended format 260x260)
The freestanding setting applies to images that have a transparent background.
If you opt for this setting, the images have more space along the edges.

Category views 

The Levi theme has two different product views. A block view and a list view.

Block view

This view has been given a unique design. If the "Extra block in the categories on the home page" setting (the black block shown below) is filled in, the first 5 categories are shown as indicated below. This setting can be found in:

"My Webshop > Settings > Webshop themes > Levi theme > Change settings > “Content” tab.

List view 
In the list view, the blocks are placed next to each other. The categories are always spread across the entire width. If you have 4 or more categories, these are spread across 4 blocks.

If you have 3 categories, the blocks are larger since they are likewise spread across the entire width.

Even where there are only one or two categories, the blocks are spread across the entire width.