# Product Block

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FXvaxeqymEkReNJI5DnDV%2Fimage.png?alt=media&#x26;token=be7f73dd-4c8e-4336-96cb-df0e2de64c37" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FkeMek5CAdbDTI5pf3rSB%2Fproduct%20block.gif?alt=media&#x26;token=a47ce33f-2d92-4e0f-9c65-a1c568941e1b" alt=""><figcaption></figcaption></figure>

## 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                   | <p>Select the style for the countdown text.<br>Style 1: The countdown stands beside the title.<br>Style 2: The coundown is below the title.</p> |
| 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.        |
