✨Collection with product

Configure the section

Select the customize theme option. At the top of the page, click on the dropdown menu to select the Home page template. From the left side menu, select Collection with product.

Customize the 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 (On selecting this, the section will be visible on mobile devices only.) -Large (On selecting this, the section will be visible on large devices only.) Color scheme Select any color scheme defined in the theme settings>Colors>Schemes. Section background Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme. Separator line Choose the separator line visibility from below options: - Top - Bottom - Both - None Structure Choose the style from the following options: - Grid - Carousel
Carousel settings	Show pagination Select this checkbox to show pagination- arrows in section. Column gap Adjust the range bar to determine the gap between columns.
Grid settings	Row gap Adjust the range bar to determine the gap between the rows. Column gap Adjust the range bar to determine the gap between the columns.
Appearance	Image ratio Choose from image's ratio in the grid from the following options: - Auto - Square - Landscape - Portrait Products count to show Adjust the range bar to determine the maximum number of products to display in the section. Number of columns on desktop Adjust the range bar to determine the maximum number of columns on the desktop. Content alignment Choose the content alignment from the following options: - Left - Center - Right
Product card	Visibility options Choose options from: - Always - On hover Variants details - Sizes only - Colors only - Sizes & Colors - No variants Sizes visibility Choose the visibility of size options: - Always - On hover On hover: Enable shadow Select this checkbox to show shadow on product card. Always/On hover options Border style Choose style from: - With border - Without border Quick view Display mode Choose the visibility of quick view: - Always - On hover - Disabled Badges Badges visibility Choose the visibility of badges : - Always - On hover Media Media fit style Choose the media fit style from : - Cover - Contain Show second image on hover Select this checkbox to show second image on hover.
Content	Heading Add heading text. (Note: Use '++' to add a line break , '[]' for text underline, '[[]]' for text oval underline and '()' for highlighted text & background. Make text bold to show markers font. Leave blank to use the collection title.) Heading size Select the font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large SEO tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Markers font family Choose the markers text font family from the following options: - Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Highlight text Text Choose the text color for highlight text. Background Choose the background color for highlight text. Content alignment Choose the content alignment from the following options: - Left - Center - Right
Button	Label Enter the button label. (Note: Leave the label blank to hide the button.) Link Add the button link to redirect it. Button type Choose the button type from the following options: - Animated - Classic Button style Choose the button style from the following options: - Solid - Outlined - Link Button size Select from the following options to determine the button size. - Small - Regular - Large
Section spacing	Desktop top space Adjust the range bar to add spacing at the top of the section for desktop view. Desktop bottom space Adjust the range bar to add spacing at the bottom of the section for desktop view. Mobile top space Adjust the range bar to add spacing at the top of the section for mobile view. Mobile bottom space Adjust the range bar to add spacing at the bottom of the section for mobile view.

Block settings:

Collection	Choose any collection.
Custom title	Enter a custom title. Note: Leave blank to use the collection title
Custom content	Custom image Choose any image. Note: It will replace with the original collection image Desktop height Choose height from custom or auto. Desktop custom height Adjust the range bar to determine the section height on desktop. Mobile height Choose height from custom or auto. Mobile custom height Adjust the range bar to determine the section height on mobile.