Builder section

Responsive levels are [1260, 1025, 778, 541]


Builder section options

# Name Value Description
1 Custom class for section text Set custom css class
2 Title text Set section title
3 Title style tag h1-h6 Choose tag for section title
4 Content width Inherit global settings
Full width
Boxed
Set container width.
Use value from "Theme settings -> Layout -> Default content width" or overwrite it.
5 Margin top Choose margin top
6 Responsive margin top Choose responsive margin top
7 Margin bottom Choose margin bottom
8 Responsive margin bottom Choose responsive margin bottom
9 Padding top Choose padding top
10 Padding bottom Choose padding bottom
11 Disable paddings true / false Disable section grid paddings
12 Horizontal align Set horizontal align
13 Vertical align Set vertical align
14 Overflow hidden true / false Enable/disable overflow hidden view
15 Enable 5 columns grid true / false Enable/disable 5 columns grid
16 COLORS: Background color Choose color

Revolution Slider

# Name Value Description
1 Name text Set slider name. Use same name at Slide block to link blocks with slider
2 GRID: Size number Set slider width for all devices devices
3 GRID: Responsive size coma separated list of numbers Set width per each screen size.
Responsive levels are [1260, 1025, 778, 541]
4 GRID: Margin top number Set margin top value
5 GRID: Responsive margin top coma separated list of numbers Set margin top per each screen size.
Responsive levels are [1260, 1025, 778, 541]
6 GRID: Margin bottom number Set margin bottom
7 GRID: Responsive margin bottom coma separated list of numbers Set margin top per each screen size.
Responsive levels are [1260, 1025, 778, 541]
8 SETTINGS: Grid width coma separated list of numbers Set slider grid width per each screen size.
Responsive levels are [1260, 1025, 778, 541]
9 SETTINGS: Grid height coma separated list of numbers Set slider grid height per each screen size.
Responsive levels are [1260, 1025, 778, 541]
10 SETTINGS: Min height Default: 550 Set min height
11 SETTINGS: Image height size Default: 550 Set min height
12 SETTINGS: Preload spacer true / false Enable/disable preload spacer
13 SETTINGS: Arrows true / false Enable/disable slider arrows
14 SETTINGS: Bullets true / false Enable/disable slider bullets
15 SETTINGS: Delay (seconds) number Set time interval to change slide

Slide for Revolution

# Name Value Description
1 For slider (name) text Set slider name, same as at Slider block
2 Type Clean (Without text)
Type #1 (Over the image)
Choose
3 Vertical position (Only for type #1) Top
Center
Bottom
Choose
4 Image image Set slider image
5 Url for image url Set slide ULR
6 - 15 Show Text line 1 - 3
Text line 1 - 3
Show button #1 - #2
Button text #1 - #2
texts - true / false Enter texts - Enable / Disable
16 Show list true / false Enable / Disable list
17 List Choose Set list
18 Custom HTML or Template Enter own html or use Content Builder code html
19 - 23 Url for text line #1 - #3, Url for button #1 - #2 urls Set urls
24 Video Url url Set url
25 Youtube or Vimeo video URL url Set url
26 Video autoplay true / false Enable / Disable Video autoplay
27 Video controls true / false Enable / Disable Video controls
28 - 32 COLORS: Text line 1 - 3, Hover text line 1 - 2 colors Set colors
33 - 36 COLORS: Button style #1 - #2, Transparent background for button #1 - #2 Choose - true / false Choose style - Enable / Disable
37 COLORS: Background color Set color
38 - 42 EFFECTS: Delay
Slide animation
HTML layer animation
Parallax of image
Parallax of content
set effects

Slick Slider

# Name Value Description
1 Name text Set block Name
2 GRID: Size number Set grid size
3 GRID: Responsive size number Set grid responsive size
4 GRID: Margin top number Choose margin top
5 SETTINGS: Responsive margin top coma separated list Set margin top per each screen size.
6 GRID: Margin bottom number Set margin bottom
7 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
8 SETTINGS: Responsive height numbers Enter responsive height
9 SETTINGS: Min height number Enter Min height
10 SETTINGS: Arrows true / false Enable / Disable Arrows
11 SETTINGS: Bullets true / false Enable / Disable Bullets
12 SETTINGS: Speed (seconds) number Enter Speed

Slide for Slick

# Name Value Description
1 For slider (name) text Write slide name (or it will be filled automatically)
2 Type Choose Clean (Without text)
Type #1 (over image)
3 Vertical position (Only for type #1) Top
Center
Bottom
Choose
4 Image image Choose image
5 Url for image text Write url
6 Image size number Choose size
7 Enable format 'pjpg' true / false Enable / Disable format 'pjpg'
8 Disable lazy load true / false Enable / Disable lazy load
9 - 18 Show texts, button - Enable / Disable texts, buttons texts - true / false Enter texts - Enable / Disable
19 Show list true / false Enable / Disable list
20 List Choose Set list
21 Custom HTML or Template html Enter html
22 - 26 Url for text line #1 - #3, Url for button #1 - #2 urls Set urls
27 Video Url url Set url
28 Youtube or Vimeo video URL url Set url
29 Video autoplay true / false Enable / Disable Video autoplay
30 Video controls true / false Enable / Disable Video controls
31 - 35 COLORS: Text line 1 - 3, Hover text line 1 - 2 colors Set colors
36 - 39 COLORS: Button style #1 - #2, Transparent background for button #1 - #2 Choose - true / false Choose style - Enable / Disable
40 COLORS: Background color Set color
41 ANIMATION: Animation text (Only for type #1) None
Scale In
Scale Out
Translate Top
Translate Bottom
Traslate Left
Translate Right
Choose

Instagram

# Name Value Description
1 GRID: Size number Set grid size
2 GRID: Responsive size number Set grid responsive size
3 GRID: Fixed height number Set fixed height size
4 GRID: Margin top number Choose margin top
5 SETTINGS: Responsive margin top coma separated list Set margin top per each screen size.
6 GRID: Margin bottom number Set margin bottom
7 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
8 SETTINGS: User name text Enter your User name
9 SETTINGS: Tag text Enter your Tag
10 SETTINGS: Show post details true / false Enable / Disable post details.
11 SETTINGS: Disable paddings true / false Enable / Disable paddings.
12 SETTINGS: Items limit number Set items limit
13 SETTINGS: Size choose 2/12
3/12
4/12
6/12
12/12
14 SETTINGS: Responsive size number Set size

Instagram block

You don't have to add this block. If you haven't added it posts from your Instagram account will be loaded.

It is developed for optimisation purposes. You can have in your Instagram optimised images which are not loaded from external resources.

# Name Value Description
1 Image Choose image
2 Image size Choose image size
3 Enable format 'pjpg' true / false Enable/disable format 'pjpg'
4 Disable lazy load true / false Enable/disable lazy load
5 Url Paste a link or search
6 Content html code Default demo code see Example html

Promo box

# Name Value Description
1 GRID: Size number Set block width
2 GRID: Responsive size coma separated list Set block width per each screen size.
3 GRID: Visible All
Only desktop
Only mobile
Set visibility
4 GRID: Responsive height number Set Responsive height
5 GRID: Min height number Set MIin height
6 GRID: Margin top number Set margin top
7 GRID: Responsive margin top coma separated list Set margin top per each screen size.
8 GRID: Margin bottom number Set margin bottom
9 GRID: Responsive margin bottom number Set margin bottom per each screen size.
10 GRID: Padding top number Set Padding top
11 GRID: Padding bottom number Set Padding bottom
12 SETTINGS: Type Clean
Text
Type #1
Type #2
Type #3
Type #4
Set Promobox type

13 Vertical position (Only for type #1) Top
Center
Bottom
Choose
14 SETTINGS: Border image on hover true / false Enable / Disable Border image on hover
15 SETTINGS: Image image Set image
16 SETTINGS: Url for image url Set Url for image.
17 SETTINGS: Image size number Set image size
18 SETTINGS: Enable format 'pjpg' true / false Enable/disable format 'pjpg'
19 SETTINGS: Disable lazy load true / false Enable/disable lazy load
20 - 29 SETTINGS: Show texts, button - Enable / Disable texts, buttons texts - true / false Enter texts - Enable / Disable
30 SETTINGS: Show list true / false Enable / Disable list
31 SETTINGS: List Choose Set list
32 SETTINGS: Custom HTML or Template content Enter your own html or use Content Builder
33 - 37 SETTINGS: Url for text line #1 - #3, Url for button #1 - #2 urls Set urls
38 SETTINGS: Video Url url Set url
39 SETTINGS: Youtube or Vimeo video URL url Set url
40 SETTINGS: Video autoplay true / false Enable / Disable Video autoplay
41 SETTINGS: Video controls true / false Enable / Disable Video controls
42 SETTINGS: Enable curtain on hover true / false Enable / Disable curtain on hover. See examples of blocks with curtains in the Skin 10 - Kitchen
43 Custom HTML or Template for Curtain content This content will be seen after hovering block.
If this block is empty main html for promo box will be seen on hover
For example:
Promo box view

HTML on hover

44 SETTINGS: Enable curtain scale effect true / false Enable / Disable curtain scale effect
45 - 66 COLORS: Text line 1 - 3
Image mask
Image mask opacity
Hover text line 1 - 2
Button style #1 - #2

Transparent background for button #1 - #2
Text background
Background (All block)
Curtain text line 1 - 3
Curtain button style #1 - #2
Curtain transparent background for button #1 - #2
Curtain background
Curtain background opacity
content Enter your own html or use Content Builder
67 - 72 ANIMATION: [options] Change options

Products

# Name Value Description
1 GRID: Size number Set block width
2 GRID: Responsive size coma separated list Set block width per each screen size.
3 GRID: Margin top number Set margin top
4 GRID: Responsive margin top coma separated list Set margin top per each screen size.
5 GRID: Margin bottom number Set margin bottom
6 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
7 SETTINGS: Title text Set block title
8 SETTINGS: Collection collection Set product collection
9 SETTINGS: Maximum products in column number Set products limit
9 SETTINGS: Disable lazy load true / false Enable / Disable lazy load.

Custom HTML

# Name Value Description
1 GRID: Size number Set block width
2 GRID: Responsive size coma separated list Set block width per each screen size.
3 GRID: Margin top number Set margin top
4 GRID: Responsive margin top coma separated list Set margin top per each screen size.
5 GRID: Margin bottom number Set margin bottom
6 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
7 SETTINGS: Page content page code Choose page
8 SETTINGS: Content html code Enter html or left empty

Space for vertical menu

# Name Value Description
1 Menu menu Choose existing menu

BUILDER: Spacer

# Name Value Description
1 Custom class for section text Set custom css class
2 Show separator true / false Enable / Disable lazy load
3 Content width Full width
Boxed
Inherit global settings
Choose
4 Margin top Choose margin top
5 Responsive margin top Choose responsive margin top
6 Margin bottom Choose margin bottom
7 Responsive margin bottom Choose responsive margin bottom

# Name Value Description
1 Custom class for section text Set custom css class
2 Title text Set section title
3 Title style tag h1-h6 Choose tag for section title
4 Show top separator true / false Enable/disable top separator
5 Margin top Choose margin top
6 Responsive margin top Choose responsive margin top
7 Margin bottom Choose margin bottom
8 Responsive margin bottom Choose responsive margin bottom
9 Blog blog Select blog
10 Layout #1 (in row)
#2 (in row)
Select layout
11 Show post details true / false Enable/disable post details
12 Button text (layout #2) text Set button text
13 Items per row number Set items per row
14 Autoplay true / false Enable/disable auto scroll
15 Autoplay speed number Set autoplay timeout
16 Is infinite true / false Enable/disable infinite scroll
17 Arrows true / false Show/hide arrows
18 Bullets true / false Show/hide bullets
19 Disable lazy load true / false Enable / Disable lazy load
# Name Value Description
1 Custom class for section text Set custom css class
2 Title text Set section title
3 Title style tag h1-h6 Choose tag for section title
4 Show top separator true / false Enable/disable top separator
5 Margin top Choose margin top
6 Responsive margin top Choose responsive margin top
7 Margin bottom Choose margin bottom
8 Responsive margin bottom Choose responsive margin bottom
9 Layout Slider
Grid
Choose type of carousel
10 Items per row (Only for Slider) number Set items per row
11 Image max width number Chosse image max width
12 Bordered links true / false Enable/disable bordered links
13 Autoplay true / false Enable/disable auto scroll
14 Autoplay speed number Set autoplay timeout
15 Is infinite true / false Enable/disable infinite scroll
16 Arrows true / false Show/hide arrows
17 Bullets true / false Show/hide bullets
18 Disable lazy load true / false Enable / Disable lazy load

Content - Brand block

# Name Value Description
1 Image image Set brand image
2 Link url Set brand URL
# Name Value Description
1 Enable true / false Show/hide the block
2 Custom class for section text Set custom css class
3 Show title true / false Show/hide title
4 Title style tag h1-h6 Choose tag for section title
5 Show top separator true / false Show/hide 1px grey line separator
6 Content width Boxed
Full width
Inherit global settings
Choose
7 Margin top Choose margin top
8 Responsive margin top Choose responsive margin top
9 Margin bottom Choose margin bottom
10 Responsive margin bottom Choose responsive margin bottom
11 Items per row number Set number of products per row
12 Max count number Set products limit
13 Autoplay true / false Enable/disable auto scroll
14 Autoplay speed number Set timeout limit for auto scroll
15 Is infinite true / false Enable/disable infinite scroll
16 Arrows true / false Show/hide arrows
17 Bullets true / false Show/hide bullets
18 Disable lazy load true / false Enable / Disable lazy load
19 Async ajax loading true / false Enable/disable async ajax loading

Content - Products carousel

# Name Value Description
1 Title text Set title
2 Collection Choose collection

Forms


Contact form

# Name Value Description
1 Custom class for section text Set custom css class
2 Title text Set section title
3 Margin top Choose margin top
4 Responsive margin top Choose responsive margin top
5 Margin bottom Choose margin bottom
6 Responsive margin bottom Choose responsive margin bottom

Content

# Name Value Description
1 Page content Select page Choose any page from pages list
2 Content content Make clean if you want to use selected above page

# Name Value Description
1 Custom class for section text Set custom css class
2 Content width Boxed
Full width
Inherit global setting
Choose
3 Margin top Choose margin top
4 Responsive margin top Choose responsive margin top
5 Margin bottom Choose margin bottom
6 Responsive margin bottom Choose responsive margin bottom

Content

# Name Value Description
1 Title text Set title
2 Paragraph text Set paragraph
3 Search design type Type #1
Type #2
Choose search design type
4 Placeholder text Set placeholder
5 Button text text Set button text

Subscription form

# Name Value Description
1 Custom class for section text Set custom css class
2 Show top separator true / false Enable/disable top separator
3 Show bottom separator true / false Enable/disable bottom separator
4 Margin top Choose margin top
5 Responsive margin top Choose responsive margin top
6 Margin bottom Choose margin bottom
7 Responsive margin bottom Choose responsive margin bottom

Content

# Name Value Description
1 Title text Write title text
2 Paragraph text Write text paragraph
3 Placeholder text Write placeholder text
4 Button text text Write button text
5 Subscription button type Type #1 - Type #3 Choose

Information line

# Name Value Description
1 Custom class for section text Set custom css class
2 Title text Set section title
3 Show border true / false Show/hide top border
4 Margin top Choose margin top
5 Responsive margin top Choose responsive margin top
6 Margin bottom Choose margin bottom
7 Responsive margin bottom Choose responsive margin bottom
8 Icon color color Set icon color
9 Title color color Set title color
10 Paragraph color color Set text color
11 Background color color Set background color

Content - Title text

# Name Value Description
1 Icon snippet name html code
theme-116

Open corresponding file in "Edit code" section -> Snippets -> open file: icon-theme-116.liquid
2 Title text Set title
3 Paragraph text Set text

Collections

# Name Value Description
1 Custom class for section text Set custom css class
2 Products per row number Set number of products per row
3 Max count number Set product number per collection
4 Responsive size coma separated list Set block size per each screen size.
5 Margin top Choose margin top
6 Responsive margin top Choose responsive margin top
7 Margin bottom Choose margin bottom
8 Responsive margin bottom Choose responsive margin bottom
9 Disable lazy load true / false Enable / Disable lazy load

Options

# Name Value Description
1 Custom class for section text Set custom css class
2 Products per row number Set number of products per row
3 Max count number Set product number per collection
4 Responsive size coma separated list Set block size per each screen size.
5 Margin top Choose margin top
6 Responsive margin top Choose responsive margin top
7 Margin bottom Choose margin bottom
8 Responsive margin bottom Choose responsive margin bottom
9 Disable lazy load true / false Enable / Disable lazy load

One product

# Name Value Description
1 Custom class for section text Set custom css class
2 Margin top Choose margin top
3 Responsive margin top Choose responsive margin top
4 Margin bottom Choose margin bottom
5 Responsive margin bottom Choose responsive margin bottom
6 GENERAL: Product Choose product
7 GENERAL: Reverse layout true / false Change position of Product image and Product Information
8 GALLERY: Image Choose image from existing images
9 GALLERY: Image size Choose size
10 GALLERY: Arrows true / false Enable / Disable arrows
11 - 21 INFORMATION: [options] true / false Show/hide product elements in block
22 INFORMATION: Description content Enter text or html
23 - 41 INFORMATION: [options] true / false Show/hide product elements in block

Spacer

Image
# Name Value Description
1 Custom class for section text Set custom css class
2 Show separator true / false Enable / Disable lazy load
3 Content width Full width
Boxed
Inherit global settings
Choose
4 Margin top Choose margin top
5 Responsive margin top Choose responsive margin top
6 Margin bottom Choose margin bottom
7 Responsive margin bottom Choose responsive margin bottom

Content builder

This is not usual section. This section is used only to configure text content layout and copy result to needed block.

Some of theme sections has "Custom HTML" field or "Content" field. Where customer may add custom content. But many customers doesn't want to edit HTML code. In content builder you can configure custom content. Section will generate code, which you should paste to "Custom HTML" field or "Content" field.

Workflow

  1. Duplicate your current Shella theme. Give it meaningful name. For example - Shella content builder.

    Image
  2. Add Content builder section.

  3. Image
    Configure content.

    You can build your own content layout or use templates from our demo - https://take.ms/1GssY

  4. Copy result configuration with shortcodes using "Copy with Shortcodes" button
  5. Paste result in PromoBox or Slide content field to main theme
  6. Fill block text and link options. It values will be replaced in shortcodes.

    Image
  7. Save this template in unpublished theme for future editing and usage

What is the difference between "Copy with Shortcodes" and "Copy clean HTML"?

Code with shortcodes is template, which you can reuse in multiple blocks. For example you want to add three banners with same layout. The difference is only in image, text and link. In this case you should build banner template, copy code with shortcodes and replace texts and links at final promobox block.

Code with shortcodes allow you to build banner template one time. And easily update texts and links without changing template.

Code with shortcodes has some limits. You can configure banner layout using up to 4 text lines and up to two buttons. If you need more complex layouts you should use clean HTML code.

Section options

DEVELOPMENT SETTINGS

This options work only at content builder section. And not effect generated code.

Name - to add name for template

Content width and Canvas background - to change canvas preview.

Enable developer mode - to show dotted line around content blocks. Hidden on hover.

Image
SETTINGS

Section setting to configure position, width, margins, paddings, border and background. Section may include multiple content blocks.

Image

You can configure section to have auto width, based on content length.

\

Image

You can configure section width for all available space.

Image
You can also configure section border and background.
Content blocks

You can add next content blocks:

  • Text
  • Button
  • Button group
  • List
  • Cutsom HTML
Image
Content block: Text
Image
You can configure text font options, position, width and color.
Content block: Button
Image
You can configure button font options, position, width and type.
Content block: Buttons group and List

These blocks have same font, width and position options

Content block: Cutsom HTML
Image
List options which you want to show as "Circle color".