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