> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/~/changes/ya8CSeFxwPyu94dBt1WL/sections/all-sections-in-theme/product-block.md). # Product Block

Grid Layout without Image

List Layout without Image

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

Select the style of the countdown.
- Style 1: the countdown is to the bottom of the title.
- Style 2: the countdown is to the right of the title.

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

Select the video style icon to be Style 1 or Style 2.
- Style 1: the play button is a triangle.
- Style 2: the play button is wrapped in a circle.

|