Grid view

Announcement Bar
Benefits product
Brands
Collage
Collection feature
Collection list
Feature collection
Featured navigation
Features banner
Grid view
Header
Image banner
Image with text
Image with video
Logo banner
Lookbook
Multicolumn
Newsletter with image
Parallax section
Rich text with image
Shoppable image
Shoppable video
Shoppable video reels
Slideshow

What is the Grid view section?

The "Grid view" section offers a neatly organized layout to present a series of images, products, or promotions. With its structured design, it provides a clear and consistent browsing experience for your customers.

Main Settings

Heading

  • Heading: Set the title for the grid view section to introduce the grid layout of products or content.

Enable Swipe on Mobile

  • Enable swipe on mobile: Enable this setting to allow users to swipe through the grid view on mobile devices.

Make Section Full Width

  • Make section full width: Enable this setting to make the grid view section span the full width of the container.

Image Ratio

  • Image ratio: Select the image ratio for the grid view (e.g., Adapt to image).

Colors

  • Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
  • Background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.

Section Spacing

  • Distance from the top: Adjust the spacing from the top of the section.
  • Distance from the bottom: Adjust the spacing from the bottom of the section. ​

Customize column blocks

  • Heading: Set a clear and concise title for the grid block that directs attention to the content.
  • Text: Provide descriptive text to give more context or details about the image.
  • ‍Button: Include a call-to-action button, customizing the label and linking it to relevant pages or products.‍
  • Heading Scale: Adjust the heading size for large screens and mobile devices to balance prominence with design.‍
  • Image Selection: Upload an engaging image for both desktop and mobile versions that complements the block's content.‍
  • Text Alignment: Align your text to the top, center, or bottom, and to the left, center, or right to enhance the layout's visual appeal.‍
  • Custom Text Color: Select a color for the text to ensure it stands out against the background and the image.‍
  • Background Color: Choose a background color and adjust its opacity to suit the overall design theme of the block.‍
  • Disable on Mobile: If necessary, choose to disable the heading or text on mobile devices to streamline the presentation.

Mobile view example

Back