Product Block 02

To add this section, please follow below steps:

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Add section and choose "Product Block 02".

Section Settings

General

Settings	Meaning
Section Width	Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width).
Padding Container Full Width	Determine the left and right spacing of the Full Width layout.
Background Color	The background color of the section.
Background Gradient	The background gradient of the section.
Background Image	Upload/Select an image as the section background.
Enable Title Border?	Toggle title border
Title Font Size	Specify the font size of the title on desktop.
Title Font Size Mobile	Specify the font size of the title on mobile.
Title Margin Bottom	Determine the spacing of the title from bottom on Desktop.
Title Margin Bottom Mobile	Determine the spacing of the title from bottom on Mobile.
Title Border Color	Set color for the border/underline of the title.
Title Color	Apply a color to the title.
View All Alignment	Select the alignment of the View all text to be either to the Left, Center or to the Right.
View All Font Weight	Select the font weight of the 'View all' text.
View All Margin Bottom	Determine the top spacing of the "View all" Desktop.
View All Margin Bottom Mobile	Determine the top spacing of the "View all" Mobile.
Toggle "View all" border?	Toggle "View all" border?
View All Icon	Enter the SVG icon for the "View all".
Icon View All Color	Apply a color to the icon.
Alignment	Select the alignment of the header text to be either to the Left, Center or to the Right of the section.
Button Width	Determine the width of the button.
Button Text	Enter the text for the button.
Button Icon	Enter the SVG icon for the button.
Color	The text color of the button.
Background Color	The background color of the button.
Border Color	The border color of the button.
Maximum Products To Show	Limit the number of products display on this block.

Settings For Collection 01

Settings	Meaning
Title	Enter in the title for the block.
View all	Enter the text for the "View all" link.
View All Link	Set URL for the "View all" to redirect to if the "Redirect To URL" is selected.
Collection	Select Collection to display

Settings For Grid Layout

Settings	Meaning
Products Per Row	Select the column count for the grid.
Show Infinite Scroll Feature?	Toggle the feature to automatically load more products when user scrolls to the bottom of the grid.
Show Swipe On Mobile?	Turn the grid to built-in slider on mobile device.

Settings For Slider Layout

Settings	Meaning
Show Dots On Desktop	Toggle the paginating dots on Desktop.
Show Dots On Mobile / Tablet	Toggle the paginating dots on Tablet and Mobile.
Show Arrows On Desktop	Toggle the navigation arrows on Desktop.
Show Arrows On Mobile / Tablet	Toggle the navigation arrows on Mobile.
Products Per Row	Select the slides to view count.
Position Vertical Arrow - (Unit % or px)	Enter the position of the arrows relative to the top of the slider.

Settings For Collection 02

Settings	Meaning
Title	Enter in the title for the block.
View all	Enter the text for the "View all" link.
View All Link	Set URL for the "View all" to redirect to if the "Redirect To URL" is selected.
Collection 02	Select Collection to display

Layout Special Card

Settings	Meaning
Enable Special	Toggle special layout card
Background Color	Set the color for the card item's background.
Padding	Determine the padding of the card from its top, right, bottom, left.
Border Radius	Determine the roundness of the card item.
Border Layout:	Select the border layout: Full border: Displays a border on 4 sides around the product card. Bottom border: Displays a border on the bottom of the product card.
Border Width	Determine the width of the border.
Border Color	Set the border color for the card item.

Spacing Top

Settings	Meaning
Desktop	Determines the spacing of the section from its top sections on Desktop.
Tablet	Determines the spacing of the section from its top sections on Tablet.
Mobile	Determines the spacing of the section from its top sections on Mobile.

Spacing Bottom

Settings	Meaning
Desktop	Determines the spacing of the section from its bottom sections on Desktop.
Tablet	Determines the spacing of the section from its bottom sections on Tablet.
Mobile	Determines the spacing of the section from its bottom sections on Mobile.