Advanced Design

Store owners interested in displaying their products in a unique, designer fashion, can design templates for product boxes using code (placeholders) set in advance – that the system will know to replace with actual product details for each and every product.

In order to get to “Advanced Design” click on Store>>Manage Store>>Store Settings>>Advanced Design.

General

On this screen you may edit two product page relevant settings:

The "Products per page" setting allows you to set the amount of product boxes appearing on a product category page. If the amount of products exceeds the chosen parameter, the system will know to display page browsing links at the bottom of the category page, in order to browse to additional product pages.
The “Products in a line” setting allows you to choose how many product boxes will be displayed per line on a category page. You should take into account the width and design of the site when choosing this option, because choosing too large a number of boxes may widen the site disproportionally.

Advanced Design for Product Box Display

Here you can find the system’s regular text editor window, a list of editable design templates, and a list of codes for your use.

The main idea is that you can design a template unit for a product box, while using set placeholders – and the system will know to replace the placeholders with actual details for the user.

For example, to display a price you can enter “Price:” #-SiPr-#, design the text style as you wish, and the system will still display the set text “Price:” in all product boxes, while the #-SiPr-# code will be replaced by the actual product price.

Please note that you may use images for the code that represents links, and so, design custom “Add to Cart” and “Additional Information” buttons.

We recommend choosing one of the ready-made templates and testing it and its function out, in order to understand how this tool works.

Remember: both codes that represent links (link to a product and link for adding to a cart) should be placed as a destination for the link, otherwise the links will be displayed as they are in the template.

In order to use the created design template, you must check the “Apply template” checkbox and click on “Apply”. Note that unchecking this box will not delete the designed template – and therefore this is an efficient method for testing, fixing, and comparing design templates, without affecting the products on the site.

When using code for product images, remember that the system displays product images at a maximum size of 133x133 pixels, therefore it is best to build the template so that the code is placed in an area of 133x133 pixels – in order to prevent the possibility of expanding the display.

Here is an illustration of how an example product box template will look:

And here is how a product using this template will look on the site: