Products grid
Last updated
Last updated
Displays products from a selected collection in an engaging and attractive section.
Steps
In the theme editor (Customize), click Add section
Locate Products grid
Save
Section width: You can choose among Fluid container, Full width, Stretch width for the banner layout.
Color scheme: Set text color and background color with preset scheme
Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.
Adjust the text alignment (left/center/right) along with the font size.
Determine the total number of products to showcase, configure how many products should appear in each row, and adjust the spacing between adjacent products for a neat and organized presentation.
Show banner: Activating this will display the banner on desktop devices while ensuring it remains hidden on tablets and mobile for a tailored viewing experience.
Sticky banner: Make the banner sticky, allowing it to remain visible as the user scrolls.
Position: Adjust the placement of the banner in relation to the products, ensuring it complements the product display effectively and aligns with the overall layout design.
Content Style: Choose between overlaying content on the image or positioning it below the image for varied visual presentation.
Content Horizontal: Specify the horizontal placement of the content as either at the top or bottom of the image or section.
Text Alignment: Adjust the alignment of the text to the left, center, or right, catering to design preferences and readability.
Banner link: Assign a link for the banner that users can click to be directed to a specific page.
Banner type: Specifies the type of media, such as an image or video, used for the banner, allowing for precise content selection.
After choosing banner type, the appropriate media source will be utilized:
Image: Choose an image to display as the banner.
Video URL: Input a video URL to display a video on the banner.
Local Video: Takes higher priority over the Video URL if both are provided.
Items per row: In mobile view, the number of items displayed on each row in the grid layout can be customized to suit your preferences and the overall design of your site.
Section padding allows you to specify the space between this section and the preceding or following sections, or both.
