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".
| Setting | Description |
|---|---|
Layout | Select the width layout of the section to be either default to the body's width, 1170px, 1770px or full screen width. |
Padding Container Full Width | Determine the spacing of the left and right sides if the layout 'fullwidth' is selected. |
Disable Padding Content? | The max width of the section will be 100% minus the double of padding Container Full Width |
Enable Border Top | Enable to show top border of the section |
Enable Border Bottom | Enable to show the bottom border of the section |
Border Height | Specify the thickness of the border for the section border. |
Border Color | Set the color of the border of the section. |
Spacing top - Desktop / Tablet / Mobile | Determine the spacing of the section from the top on Desktop, Tablet and Mobile. |
Spacing bottom - Desktop / Tablet / Mobile | Determine the spacing of the section from the bottom on Desktop, Tablet and Mobile. |
Layout | Select the layout for the items of the produ t block to be either Grid or Slider |
Background Color | Set the Background Color for the whole section. |
Background Gradient | Set the Background Gradient for the whole section. If the gradient is none, then the background color will be applied if any. |
Background Image | Upload/choose an image as the background for the section. |
Title Spacing Top | Determine the spacing of the title from the top for Block Header Style 4 only. |
Title | Enter the title for the section. |
Enable Title Border? | Turn on the title border. |
Enable Title Underline | Enable the underline of the section-width if the Block Header Style 2 is selected. |
Title Font Size | Determine the font size of the section title on Desktop ranging from 10px to 50px. |
Title Font Size Mobile | Determine the font size of the section title on Mobile ranging from 10px to 50px. |
Title Margin Bottom | Determine the spacing of the title from the bottom. |
Title Margin Bottom Mobile | Determine the spacing of the title from the bottom on Mobile. |
Title Border Color | Set the color for the title border (line through or underline) |
Title Color | Set the title color for the section. |
View all | Enter the text for the view all link |
View All Alignment | Align the view all link to the left, the right or center of the section. |
View All Font Weight | Select the font weight for the view all link. |
View All Margin Bottom | Determine the spacing of the view all from the bottom. |
View All Margin Bottom Mobile | Determine the spacing of the view all from the bottom on Mobile. |
Enable View All Border? | Underline the view all link |
View All Link | Specify the URL for the view all to redirect to |
View All Color | Set the color for the view all link |
View All Icon | Fill in the icon for the view all link |
Icon View All Color | Set the color for the view all link icon |
Alignment | Align title, description and view all to the left, right or center of the section. |
Button Text | Fill in the text for the Show More Button for the Grid layout. |
Font Size | Determine the font size of the show more button. |
Font Weight | Select the font weight for the button. |
Text Transform | Select the transform for the button text. |
Button Width | Determine the width of the button ranging from 10px to 500px. |
Button Spacing Top | Determine the spacing of the button from the top. |
Button Spacing Bottom | Determine the spacing of the button from the bottom. |
Button Icon | Fill in the text icon (svg) for the show more button. |
Enable Button Shadow | Toggle to show the button shadow. |
Color - Background Color - Border Color | Set the color, background color and border color for both normal and hover states of the button. |
Collection | Select the collection to show its products. |
Maximum Products To Show | Limit the number of products to show at a time. |
Grid Gap | Specify the spacing between each product, ranging from 5px to 30px. |
Countdown text font size | Select the style for the countdown text. Style 1: The countdown stands beside the title. Style 2: The coundown is below the title. |
Countdown | Fill in the time format to set the countdown date. Eg: 2022/12/4 0:0:00 |
Countdown text font size | Determine the font size of the countdown text. |
Countdown Color | Set the color for the countdown text. |
Margin countdown | Determine the spacing bottom of the countdown. |
The settings below are only applied when the Layout: Grid is selected.
| Setting | Description |
|---|---|
Products Per Row | Select the number of products to show per row of the grid. |
Show Infinite Scroll Feature? | Enable to run the Infinite Scrolling Feature for Product Block: more products will be loaded when the viewers scroll to the end of the section. |
Show Swipe On Mobile? | Grid layout will act as a slider on mobile. |
Enable Spacing Bottom? | Toggle to enable custom spacing to the bottom of the product card. |
Product Card Spacing Bottom | Determine the padding of the bottom of the product card. |
The settings below are only applied when the Layout: Slider is selected.
| Setting | Description |
|---|---|
Show Dots | Toggle to show the dots for the slider. |
Spacing Top Dots | Determine the spacing between the products slider and its pagination dots. |
Show Arrows | Toggle to enable the navigation arrows. |
Position Horizontal Arrow - (Unit % or px) | Fill in the desired horizontal position for the arrows relative to its slider. |
Products Per Row | Select the number of products to show per row. |
Position Vertical Arrow - (Unit % or px) | Fill in the desired vertical position for the arrows relative to its slider. |
The settings below are only applied if there is an banner block added.
| Setting | Description |
|---|---|
Position On | Select the position of the banner to the Left or Right |
Width | Determine the percentage of the banner width. |
| Setting | Description |
|---|---|
Enable Block Collection? | Toggle to let the categories blocks to take effect. |
Text Color | Set the color for the category's blocks text. |
Text Hover Color | Set the color for the category's blocks text on hover. |
Background Color | Set the background color of the category's blocks. |
Background Gradient | Set the background gradient of the category's blocks. |
Button Text | Specify the text for to view all categories. |
Button Link | Provide the link for the button to redirect to. |
