# Product Block
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
| 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. |
| | |
#### SETTINGS FOR GRID LAYOUT
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. |
#### SETTINGS FOR SLIDER LAYOUT
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. |
#### SETTINGS FOR BLOCK BANNER
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. |
#### SETTINGS FOR BLOCK COLLECTION
| 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. |
