All Collections
Product Recommendations
Multi column recommendations widget item layout
Multi column recommendations widget item layout

How to use columns in widget designer to achieve any widget item layout.

Nir avatar
Written by Nir
Updated over a week ago

Barilliance recommendation widget items can be easily designed to fit any desired layout. Including any combination of top level and internal columns.

For example in the widget below there are two divisions into columns. One on the top level of the widget (1,2) and the other in the prices sections (3,4):

Using columns

Columns are defined in the Widget Item section of the widget editor. To split any part of the widget into columns follow these steps:

Step 1 - add column section
Add a column separation click Add section and in the type select Columns. Give it a name such as 'Top level columns'

Step 2 - Drag the columns section above the items you want to effect
The position of the columns section defines which items are affected. So if you want for example to split only old and new price sections, the columns section should be positioned just above them.

Step 3 - Define how many columns and how many sections in each column
you have full flexibility in defining the number of columns and number of sections that go into each column as well as relative width of each column.

In the example above the top level columns section has 2 columns, one of them include 1 section (which is the product image as you can see in step2) and take 40% of the width and the other column has 4 sections (title, price, discount, rating) and takes 60% of the width.

Example

Consider the following widget layout:

The sections list is:


Note the top level columns which is located on top of all the sections and includes all other sections dividing them into two columns:

And the Prices Columns section which only divides the two price sections into columns.

Did this answer your question?