# Product Block

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FrKq8Zs4ScTCXu3ToFuWQ%2Fproduct%20block.jpg?alt=media&#x26;token=7cd17f7b-dcfd-48bd-96e0-a9a58449a6ab" alt=""><figcaption><p>Grid Layout without Image</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FcmSAmiMzrZAzpIBUncms%2Fproduct%20block%20slider.jpg?alt=media&#x26;token=d0f6cc27-2a87-4018-bb10-278880c03d1f" alt=""><figcaption><p>List Layout without Image</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FOwGozmLJ345jFirr0lnj%2Fproduct%20block%2003.jpg?alt=media&#x26;token=2ea93eac-1a38-49c0-9962-8bec528e2b49" 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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FVv2jp0UGVG8L0FTbFI1J%2Fproduct%20block.gif?alt=media&#x26;token=a47ce33f-2d92-4e0f-9c65-a1c568941e1b" alt=""><figcaption></figcaption></figure>

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

#### COUNTDOWN

| Settings                 | Description                                                                                                                                                     |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Countdown Text Font Size | <p>Select the style of the countdown.<br>- Style 1: the countdown is  to the bottom of the title.<br>- Style 2: the countdown is to the right of the title.</p> |
| 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 FOR GRID LAYOUT

| 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 FOR SLIDER LAYOUT

| 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 FOR SCROLL LAYOUT

| 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 FOR BLOCK BANNER

| 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 FOR BLOCK COLLECTION

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

## BLOCK SETTINGS

### \[Block] Banner

| 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                   | <p>Select the video style icon to be Style 1 or Style 2.<br>- Style 1: the play button is a triangle.<br>- Style 2: the play button is wrapped in a circle.</p> |
