Multiboxes

Configure the multiboxes

Select the customize theme option. Click on the dropdown menu at the top to select the Home page template.

From the left side menu, select Multiboxes.

Customize the multiboxes section by utilizing the settings on the right side of the theme editor, as described below:

General

Section visibility Select from the options to select the visibility of this section: -Always -Small devices only(On selecting this, the section will be visible on mobile devices only.) -Large devices only Enable fullwidth Select the checkbox to enable the full width of the section. Column gap Adjust the range bar to determine the column's gap. Desktop row height Adjust the range bar to determine the grid's row height on the desktop view. Mobile row height Adjust the range bar to determine the grid's row height on the mobile view.

Colors

Color scheme Select the color scheme.

These can be managed from Theme settings> Color >Schemes. Enable gradient Select this check box to enable the gradient color specified in the color scheme assigned above.

Section padding

Top spacing (desktop)

Adjust the range bar to add spacing at the top of the section for desktop view.

Bottom spacing (desktop)

Adjust the range bar to add spacing at the bottom of the section for desktop view.

Top spacing (mobile)

Adjust the range bar to add spacing at the top of the section for mobile view.

Bottom spacing (mobile) Adjust the range bar to add spacing at the bottom of the section for mobile view.

Block settings: Text with image

Heading

Add heading text.

Heading size

Select the heading size from the H1-H6 options.

Heading tag

Specify heading code types for SEO and search engines for crawling purposes.

Heading alignment

Select the heading alignment from the following options: -Left -Center -Right

Layout

Column Adjust the range bar to determine the column width.

Background

Show background Select this checkbox to show the background of the items. Style Select the background style from solid or gradient. Solid Select any solid color. Gradient Select any gradient for the background. Background image Choose an image for the background. (Note: This image has a higher priority than the background colors.) Overlay color Choose any color for the overlay. Overlay opacity Adjust the range bar to determine the overlay opacity.

Card 1-12

Image Select an image from your library. Text Add text to highlight the image. Link Add a link to the card.

Colors

Heading Select any color for the heading. Card background Select any color for the card background. Background hover Select any color for the background on hover. Text Select any color for the text. Text hover Select any color for the text on hover.

Block settings: Filters

Heading

Add heading text.

Heading size

Select the heading size from the H1-H6 options.

Heading tag

Specify heading code types for SEO and search engines for crawling purposes.

Heading alignment

Select the heading alignment from the following options: -Left -Center -Right

Layout

Column Adjust the range bar to determine the column width. Menu Select a menu with three-level navigations. These menus will be populated one by one in the below category fields. For more info, go through https://help.shopify.com/en/manual/online-store/menus-and-links/understanding-navigation Category one text Add category one text for the select box's placeholder. Category two text Add category two text for the select box's placeholder. Category three text Add category three text for the select box's placeholder.

Button

Text Add text for the button.

Background

Show background Select this checkbox to show the background of the items. Style Select the background style from solid or gradient. Solid Select any solid color. Gradient Select any gradient for the background. Background image Choose an image for the background. (Note: This image has a higher priority than the background colors.) Overlay color Choose any color for the overlay. Overlay opacity Adjust the range bar to determine the overlay opacity.

Colors

Heading Select any color for the heading. Button background Select any color for the button background. Button text Select any color for the button text. Button border Select any color for the button border. Button background hover Select any color for the button background on hover. Button text hover Select any color for the button text on hover. Button border hover Select any color for the button border on hover.

Block settings: Slideshow

Layout

Column Adjust the range bar to determine the column width. Slides Auto rotate slides Tick this checkbox to auto-rotate the slideshow. Change slides every Adjust this range bar to determine the auto-rotation delay time of the slides. Pagination style Select the pagination style from the following options: -Arrows -Dots

Slide 1-3

Image (desktop) Select an image to show in the desktop view. Image (mobile) Select an image to show in the mobile view. Background video Select any video to show as a background video in slides. (Note: It supports only .mp4 videos.) Content Heading

Add heading text. Heading size Select from H1-H6 to determine the heading size. Heading tag Specify heading code types from H1-H6 for SEO and search engines for crawling purposes. Description Add description text. Button Text

Add text to the highlight button.

Link

Add a link to your button. Note: If the button text is blank, then the link will be applied to the whole image. Apply link to the slide

Select this check box to apply the button link to the slide. (Note: Using this, the button will not be visible.) Show button as link Tick this checkbox to make the button as a link. Size Select from the various options to determine the button size. Content Alignment Select the content alignment from the following options: -Left -Center -Right Position Select the content position from the following options: -Top left -Top center -Top right -Centre-left -Center -Center right -Bottom left -Bottom center -Bottom right

Colors

Heading

Select any color of heading text.

Highlight text Select any color of highlighted text. (Note: This setting will work when text is 'bold.')

Description

Select any color of description.

Button background

Select any color for the button background.

Button text

Select any color for the button text.

Button border

Select any color for the button border. Button hover background Select any hover color for the button background. Button hover text Select any hover color for the button text. Button hover border Select any hover color for the button border. Overlay background Select any color for overlay on the slideshow image. Opacity Adjust the range bar to determine the slideshow image overlay opacity.

Block settings: Media grid

Layout

Column Adjust the range bar to determine the column width. Content Show image content on hover only Tick this checkbox to show the image content on hover only.

Grid 1-3

Image Choose any image for the grid. Video autoplay Choose any video for the grid. Content Heading Add heading text. Heading size Select from H1-H6 to determine the heading size. Heading tag Specify heading code types from H1-H6 for SEO and search engines for crawling purposes. Description Add description text. Content alignment Select the content alignment from the following options: -Left -Center -Right Content position Select the content position from the following options: -Top left -Top center -Top right -Centre-left -Center -Center right -Bottom left -Bottom center -Bottom right Button Text

Add text to the highlight button.

Link

Add a link to your button. Note: If the button text is blank, then the link will be applied to the whole image. Show button as link Tick this checkbox to make the button as a link. Size Select from the various options to determine the button size. Apply link to the slide

Select this check box to apply the button link to the slide. (Note: Using this, the button will not be visible.)

Colors

Heading

Select any color of heading text.

Card background Select any color of the card background. Description

Select any color of description.

Highlight text Select any color of highlighted text. (Note: This setting will work when text is 'bold.')

Button background

Select any color for the button background.

Button text

Select any color for the button text.

Button border

Select any color for the button border. Button hover background Select any hover color for the button background. Button hover text Select any hover color for the button text. Button hover border Select any hover color for the button border. Overlay background Select any color for overlay on the slideshow image. Opacity Adjust the range bar to determine the slideshow image overlay opacity.

Last updated