# 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. |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://halosoft.gitbook.io/bonnita-documentation/sections/all-sections-in-theme/product-block.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.