Product Block
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Product Block".
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 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.
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.
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.
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.
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.
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.
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.
