Home Page Collection Grid

Versions 1.0.0-1.7.3

---

Use this section to group up to 6 similar collections to share a story about the products

Recommended reading

• Collections

In this section...

• Banner
• Options
• Collection Content Blocks

Banner

Heading

Title of the section or feature

Subheading

Secondary title of the section or feature

Alignment

All section text can be aligned to the left, right or centered to the container

Show image

Include a background image

Image

The background image dimensions depend on 2 options:

• Whether full width or container width.  Refer to 'Full width' below
• The height will depend on your 'Height' settings below

Image position

Set the focus of the image to ensure consistency regardless of the height setting, content height or screen width

White text

When an image is chosen, you can uncheck this setting if you want the overlaid text to be the default color

Full width

The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:

Setting	Desktop Width	Minimum Image Width
Full width checked	100%	1900px
Full width unchecked	1200px	1200px

Height

The overall height of the banner in relation to the height of the screen. 5% is the minimum, and it steps up by 5 to a maximum of 100%

Overlay

A color may be applied to background images to help the text clarity

Opacity

When an 'Overlay' color has been selected, control the opacity with the slider.  0% is the minimum, and it steps up by 5 to a maximum of 100%

Background color

If an image is not used as a background, you can choose between None, Primary & Secondary. The Primary & Secondary colors are set in the Theme Settings Color section

Options

Show first product image

If a collection has a featured image, by default this image will be displayed.  You can override the default and choose to display the first product image.

Image fit

There are 2 choices for how the image will fit into the container:

• Fill space: The image container will be squared and the image will occupy the full width of the container regardless of the height. Use this like a background image, ie textures
• Fit to space: The image will occupy the full width of the container & the height will proportionally fit to the width. Use this like a stand alone image, ie logos

Outline buttons

Invert the button to use a frame with no background

Use slider for collections

Enable a slider for the collections. If left disabled, the collections will remain in a grid

Collection Content Blocks

Collection

Select the collection

Custom image

Replace the collection image or first product image with a seperate image

Text

A text block for basic formatting including bold, italic & linked text

Button

Customize the text for the button.  By default 'Shop' is used, but the link can be removed by not including text