Product Block

Grid Layout without Image

List Layout without Image

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".

Section settings

General

Settings	Description
Layout	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 padding of the Full Width layout.
Enable Border Top?	Toggle to show/hide the top border of the section.
Enable Border Top?	Toggle to show/hide the bottom border of the section.
Border Height	Determine the border thickness.
Enable Minus Spacing Top	Toggle to let spacing accepts minus value, so the section will overlap on the top section if any.
Minus Spacing Top	Determine how much the section moves upward.
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile	Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.
Layout	Select the layout of the product card to be in a Grid, Slider or Scroll box.
Background Color - Background Gradient	Set color (or gradient) for the section background.
Background Image	Upload/Select an image as the section background.
Enable Title Border?	Toggle to show/hide the title border/underline.

Countdown

Settings	Description
Countdown Text Font Size	Select the style of the countdown. - Style 1: the countdown is to the bottom of the title. - Style 2: the countdown is to the right of the title.
Countdown	Enter the due date for the countdown with the format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00.

Settings for grid layout

Settings	Description
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.
Enable Spacing Bottom	Toggle to apply the below setting.
Product Card Spacing Bottom	Determine the bottom spacing of the product card.

Settings for slider layout

Settings	Description
Show Dots On Desktop	Toggle the paginating dots on Desktop.
Show Dots On Mobile / Tablet	Toggle the paginating dots on Tablet and Mobile.
Spacing Top Dots	Determine the spacing of the dots from the slider.
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 on desktop.
Position Vertical Arrow - (Unit % or px)	Enter the position of the arrows relative to the top of the slider.

Settings for scroll layout

Settings	Description
Products Per Row	Select the product column count.
Show Half Of A Product Per View	Toggle to show a partial of product at the scroll box's edge.

Settings for block banner

Settings	Description
Position On	Select the position of the banner to be to the Left or Right of the products.
Width	Set the width of the banner. The remaining width is for the products layout.

Settings for block collection

Settings	Description
Enable Block Collection?	Toggle to show the block.
Button Text	Enter the text for the button.
Button Link	Enter URL for the button to redirect to.

BLOCK SETTINGS

[Block] Banner

Settings	Description
Enable Image?	Toggle to show the block.
Image	Upload/Select image for the banner.
Image Height	Select the image height to be Full Height of the section, or Auto to adapt to the Image ratio.
Enable Image Zoom Hover?	Toggle the feature to zoom in image on hovered.
Border Radius	Determine the roundness of the image.
Alignment	Select the horizontal alignment of the text content to be either to the Left, Right or Center.
Content Align Items	Select the vertical alignment of the text content to be either to the Top, Bottom or Center.
Content Spacing Top/Spacing Bottom	Determine the top and bottom spacing of the text content relative to the image's top/bottom based on the alignment.
Content Spacing Left/Spacing Right	Determine the left and right spacing of the text content relative to the image's left/right based on the alignment.
Settings Video - URL	Enter the URL of a YouTube or Vimeo video.
Aspect Ratio(Unit: %)	Enter the aspect ratio to show the video block.
Icon Video Style	Select the video style icon to be Style 1 or Style 2. - Style 1: the play button is a triangle. - Style 2: the play button is wrapped in a circle.