# 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:

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>General</td><td><strong>Section visibility</strong><br>Select from the options to select the visibility of this section:<br>-Always<br>-Small devices only(On selecting this, the section will be visible on mobile devices only.)<br>-Large devices only<br><br><strong>Enable fullwidth</strong><br>Select the checkbox to enable the full width of the section.<br><br><strong>Column gap</strong><br>Adjust the range bar to determine the column's gap.<br><br><strong>Desktop row height</strong><br>Adjust the range bar to determine the grid's row height on the desktop view.<br><br><strong>Mobile row height</strong><br>Adjust the range bar to determine the grid's row height on the mobile view.</td></tr><tr><td>Colors</td><td><p><strong>Color scheme</strong><br>Select the color scheme. </p><p>These can be managed from <strong>Theme settings> Color >Schemes.</strong> <br><br><strong>Enable gradient</strong><br>Select this check box to enable the gradient color specified in the color scheme assigned above.</p></td></tr><tr><td>Section padding</td><td><p><strong>Top spacing (desktop)</strong> </p><p>Adjust the range bar to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Bottom spacing (desktop)</strong> </p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view. </p><p> </p><p><strong>Top spacing (mobile)</strong> </p><p>Adjust the range bar to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Bottom spacing (mobile)</strong> <br>Adjust the range bar to add spacing at the bottom of the section for mobile view. </p></td></tr></tbody></table>

### Block settings: Text with image

<table data-header-hidden><thead><tr><th width="281"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Heading</td><td>Add heading text. </td><td></td></tr><tr><td>Heading size</td><td>Select the heading size from the H1-H6 options.</td><td></td></tr><tr><td>Heading tag</td><td>Specify heading code types for SEO and search engines for crawling purposes.</td><td></td></tr><tr><td>Heading alignment</td><td>Select the heading alignment from the following options:<br>-Left<br>-Center<br>-Right</td><td></td></tr><tr><td>Layout</td><td><strong>Column</strong><br>Adjust the range bar to determine the column width.</td><td></td></tr><tr><td>Background</td><td><strong>Show background</strong><br>Select this checkbox to show the background of the items.<br><br><strong>Style</strong><br>Select the background style from solid or gradient.<br><strong>Solid</strong><br>Select any solid color.<br><strong>Gradient</strong><br>Select any gradient for the background.<br><strong>Background image</strong><br>Choose an image for the background.<br><em>(Note: This image has a higher priority than the background colors.)</em><br><strong>Overlay color</strong><br>Choose any color for the overlay.<br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.</td><td></td></tr><tr><td>Card 1-12</td><td><strong>Image</strong><br>Select an image from your library.<br><br><strong>Text</strong><br>Add text to highlight the image.  <br><br><strong>Link</strong><br>Add a link to the card.  </td><td></td></tr><tr><td>Colors</td><td><strong>Heading</strong><br>Select any color for the heading.<br><br><strong>Card background</strong><br>Select any color for the card background.<br><br><strong>Background hover</strong><br>Select any color for the background on hover.<br><br><strong>Text</strong><br>Select any color for the text.<br><br><strong>Text hover</strong><br>Select any color for the text on hover.</td><td></td></tr></tbody></table>

## **Block settings: Filters**

<table><thead><tr><th width="284"></th><th></th></tr></thead><tbody><tr><td>Heading</td><td>Add heading text. </td></tr><tr><td>Heading size</td><td>Select the heading size from the H1-H6 options.</td></tr><tr><td>Heading tag</td><td>Specify heading code types for SEO and search engines for crawling purposes.</td></tr><tr><td>Heading alignment</td><td>Select the heading alignment from the following options:<br>-Left<br>-Center<br>-Right</td></tr><tr><td>Layout</td><td><strong>Column</strong><br>Adjust the range bar to determine the column width.<br><br><strong>Menu</strong><br>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 <a href="https://help.shopify.com/en/manual/online-store/menus-and-links/understanding-navigation">https://help.shopify.com/en/manual/online-store/menus-and-links/understanding-navigation</a> <br><br><strong>Category one text</strong><br>Add category one text for the select box's placeholder.<br><br><strong>Category two text</strong><br>Add category two text for the select box's placeholder.<br><br><strong>Category three text</strong><br>Add category three text for the select box's placeholder.</td></tr><tr><td>Button</td><td><strong>Text</strong><br>Add text for the button.</td></tr><tr><td>Background</td><td><strong>Show background</strong><br>Select this checkbox to show the background of the items.<br><br><strong>Style</strong><br>Select the background style from solid or gradient.<br><strong>Solid</strong><br>Select any solid color.<br><strong>Gradient</strong><br>Select any gradient for the background.<br><strong>Background image</strong><br>Choose an image for the background.<br><em>(Note: This image has a higher priority than the background colors.)</em><br><strong>Overlay color</strong><br>Choose any color for the overlay.<br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.</td></tr><tr><td>Colors</td><td><strong>Heading</strong><br>Select any color for the heading.<br><br><strong>Button background</strong><br>Select any color for the button background.<br><br><strong>Button text</strong><br>Select any color for the button text.<br><br><strong>Button border</strong><br>Select any color for the button border.<br><br><strong>Button background hover</strong><br>Select any color for the button background on hover.<br><br><strong>Button text hover</strong><br>Select any color for the button text on hover.<br><br><strong>Button border hover</strong><br>Select any color for the button border on hover.</td></tr></tbody></table>

**Block settings: Slideshow**

<table><thead><tr><th width="293"></th><th></th></tr></thead><tbody><tr><td>Layout</td><td><strong>Column</strong><br>Adjust the range bar to determine the column width.<br><br>Slides<br><strong>Auto rotate slides</strong><br>Tick this checkbox to auto-rotate the slideshow.<br><br><strong>Change slides every</strong><br>Adjust this range bar to determine the auto-rotation delay time of the slides.<br><br><strong>Pagination style</strong><br>Select the pagination style from the following options:<br>-Arrows<br>-Dots</td></tr><tr><td>Slide 1-3</td><td><p><strong>Image (desktop)</strong><br>Select an image to show in the desktop view.<br><br><strong>Image (mobile)</strong><br>Select an image to show in the mobile view.<br><br><strong>Background video</strong><br>Select any video to show as a background video in slides.<br><em>(Note: It supports only .mp4 videos.)</em><br><br><strong>Content</strong><br><strong>Heading</strong> </p><p>Add heading text. <br> <br><strong>Heading size</strong><br>Select from H1-H6 to determine the heading size.<br><br><strong>Heading tag</strong><br>Specify heading code types from H1-H6 for SEO and search engines for crawling purposes.<br><br><strong>Description</strong><br>Add description text.<br><br><strong>Button</strong><br><strong>Text</strong> </p><p>Add text to the highlight button.  <br> </p><p><strong>Link</strong> </p><p>Add a link to your button.  <br><em>Note: If the button text is blank, then the link will be applied to the whole image.</em> <br><br><strong>Apply link to the slide</strong></p><p>Select this check box to apply the button link to the slide. <br><em>(Note: Using this, the button will not be visible.)</em><br><br><strong>Show button as link</strong><br>Tick this checkbox to make the button as a link.<br><br><strong>Size</strong><br>Select from the various options to determine the button size.<br><br>Content<br><strong>Alignment</strong><br>Select the content alignment from the following options:<br>-Left<br>-Center<br>-Right<br><br><strong>Position</strong><br>Select the content position from the following options:<br>-Top left <br>-Top center <br>-Top right <br>-Centre-left <br>-Center <br>-Center right <br>-Bottom left <br>-Bottom center <br>-Bottom right </p></td></tr><tr><td>Colors</td><td><p><strong>Heading</strong></p><p>Select any color of heading text.  </p><p>  <br><strong>Highlight text</strong><br>Select any color of highlighted text.  <br>(Note: This setting will work when text is 'bold.')<br></p><p><strong>Description</strong></p><p>Select any color of description. </p><p>  </p><p><strong>Button background</strong></p><p>Select any color for the button background.    </p><p>  </p><p><strong>Button text</strong></p><p>Select any color for the button text.  </p><p>  </p><p><strong>Button border</strong>  </p><p>Select any color for the button border. <br><br><strong>Button hover background</strong><br>Select any hover color for the button background.    <br><br><strong>Button hover text</strong><br>Select any hover color for the button text.  <br><br><strong>Button hover border</strong><br>Select any hover color for the button border.<br><br><strong>Overlay background</strong><br>Select any color for overlay on the slideshow image.<br><br><strong>Opacity</strong><br>Adjust the range bar to determine the slideshow image overlay opacity.</p></td></tr></tbody></table>

**Block settings: Media grid**

<table><thead><tr><th width="296"></th><th></th></tr></thead><tbody><tr><td>Layout</td><td><strong>Column</strong><br>Adjust the range bar to determine the column width.<br><br>Content<br><strong>Show image content on hover only</strong><br>Tick this checkbox to show the image content on hover only.</td></tr><tr><td>Grid 1-3</td><td><p><strong>Image</strong><br>Choose any image for the grid.<br><br><strong>Video autoplay</strong><br>Choose any video for the grid.<br><br>Content<br><strong>Heading</strong><br>Add heading text. <br><br><strong>Heading size</strong><br>Select from H1-H6 to determine the heading size.<br><br><strong>Heading tag</strong><br>Specify heading code types from H1-H6 for SEO and search engines for crawling purposes.<br><br><strong>Description</strong><br>Add description text.<br><br><strong>Content alignment</strong><br>Select the content alignment from the following options:<br>-Left<br>-Center<br>-Right<br><br><strong>Content position</strong><br>Select the content position from the following options:<br>-Top left <br>-Top center <br>-Top right <br>-Centre-left <br>-Center <br>-Center right <br>-Bottom left <br>-Bottom center <br>-Bottom right <br><br><strong>Button</strong><br><strong>Text</strong> </p><p>Add text to the highlight button.  <br> </p><p><strong>Link</strong> </p><p>Add a link to your button.  <br><em>Note: If the button text is blank, then the link will be applied to the whole image.</em> <br><br><strong>Show button as link</strong><br>Tick this checkbox to make the button as a link.<br><br><strong>Size</strong><br>Select from the various options to determine the button size.<br><br><strong>Apply link to the slide</strong></p><p>Select this check box to apply the button link to the slide. <br><em>(Note: Using this, the button will not be visible.)</em></p></td></tr><tr><td>Colors</td><td><p><strong>Heading</strong></p><p>Select any color of heading text.  </p><p><br><strong>Card background</strong><br>Select any color of the card background.  <br><br><strong>Description</strong></p><p>Select any color of description. </p><p> <br><strong>Highlight text</strong><br>Select any color of highlighted text.  <br>(Note: This setting will work when text is 'bold.')<br></p><p><strong>Button background</strong></p><p>Select any color for the button background.    </p><p>  </p><p><strong>Button text</strong></p><p>Select any color for the button text.  </p><p>  </p><p><strong>Button border</strong>  </p><p>Select any color for the button border. <br><br><strong>Button hover background</strong><br>Select any hover color for the button background.    <br><br><strong>Button hover text</strong><br>Select any hover color for the button text.  <br><br><strong>Button hover border</strong><br>Select any hover color for the button border.<br><br><strong>Overlay background</strong><br>Select any color for overlay on the slideshow image.<br><br><strong>Opacity</strong><br>Adjust the range bar to determine the slideshow image overlay opacity.</p></td></tr></tbody></table>