Builder

If you need to have the following content: Promo box (Banner), Slick Slider (fastest), Revolution Slider, Instagram, Product column, and custom HTML, a “Builder” should be added.

Add section -> Builder

The “Builder” section on the Home page is a massive section, which allows you to add different content blocks, such as promo boxes (banners), various sliders, pages, product columns, videos, space for a vertical menu, etc. This section can be added to any place on the home page, either straight after the header or before the footer, etc. We will get deeper into each of these blocks in the next sections.

Builder

In this section, you can configure the settings for all content blocks.

Title

Here you can add a Title for your builder section, which will be shown on the page. You can customize its font and add a link if needed:

Content width

This option enables you to choose the width of the content on the desktop. It may be either full or boxed. If it is full the image of this section is displayed in full width on the home page. Once it is boxed, you will see some space between the image and the home page on the left and right sides. In our example, we will show you the boxed width of the content:

Column Settings

Here you can choose how many items should be shown in one row on the desktop, using a dropdown menu “Size of the columns”.

The option “Size of the columns on mobile” allows you to set the number of items in the row on mobile: “1 item in the row” or “2 items in the row”. In our example, we will show you “2 items in the row”:

In the dropdown list of “Margins for the columns”, you can choose the type of margins for the columns. The position of the columns can also be set in this section. Just use a dropdown list of the ”Align of columns” and select the proper option. The option “Disable column paddings” allows you to remove space between the columns in the builder section. In the “Mobile content precedence” you can decide in which order the content blocks should be displayed in the mobile version, by writing the order, e.g.: “2,1,3”.

Customization

Please note, this is an advanced option, you should have developer skills to work with CSS styles, or hire a developer to complete this task for your store.

Customization class

You may add a custom CSS class to the Builder section. It helps if you need to apply custom changes.

Add the Builder section, add content, and configure the section.

In case you need to add additional styles, you may use the customization class option.

Please note, the customization class should be unique, it may include Latin letters, numbers, and dashes. Spaces and other chars are not allowed.

Enable the custom.css file at the Theme settings -> Developer.

Open the source file editor by pressing the dotted [...] button next to the theme name at the top left of the theme editor, then hit “Edit code”.

Find and open the assets/custom.min.css file:

Add your custom CSS class and custom styles.

The example code shows how to add a background color and top padding.

Read more information about the CSS

Please note, if you see the CSS term for the first time, you should hire a person who is familiar with it.

The result.