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
### General
| Settings | Description |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Section width |
Select the layout width of the whole section. The options are:
Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width).
|
| Padding for 'full width' option on desktop | Determines the left and right padding of the full width layout. |
| Remove content right padding | Sets the width of the padding area on the right of an element is 0. |
| Show top border | Toggle to show/hide the bottom border of the section. |
| Show bottom border | Enable to displays a horizontal line to separate sections |
| Border height | Determines the border thickness. |
| Border color | Sets the color of the bottom border. |
| Enable negative top margin |
Toggle to let spacing accepts minus value, so the section will overlap on the top section if any.
Note: Move this section to overlap the section above.
|
| Negative top margin | Determines how much the section moves upward. |
| Layout |
Select a layout for the product block:
Grid Slider Scroll
|
| Background color | Sets the background color of the section background. |
| Background gradient | Sets the background gradient of the section background. |
| Background image | Upload/Select an image as the section background. |
| Collection | Select a collection that you want show in this section. |
| Maximum products to show | The number of products from the collection to display. Minimum: 1. Maximum: 20. |
| Grid gap | Determines the gap between each product item. |
| Product block style |
Select a style for the product block:
Style 1 Style 2 Style 3
Note: Style 3 is only used when 'products per row' is 1
|
| **Section header** | |
| Style |
Select a layout for the header block:
Style 1 (When there is a banner, this style will appear inside the products container) Style 2 Style 3 (When there is a banner, this style will appear across the entire section's container) Style 4
|
| Title | The title for the section. |
| Show title border | Allows displaying the top or bottom border of the title depending on the style of the Header Block. |
| Show title underline |
Enables the display of underlines of title text.
Note: Only applicable for style 2.
|
| Title font size | Determines the font size of the title on the tablet and desktop devices. |
| Title font size on mobile | Determines the font size of the title on the mobile devices. |
| Title top margin |
Determines the spacing of the title from the line on the its top.
Note: Only applies to style 4 and the title has a top border.
|
| Title bottom margin | Determines the spacing of the title from the bottom content on the tablet and desktop devices. |
| Title bottom margin on mobile | Determines the spacing of the title from the bottom content on the mobile devices. |
| Title border color | Sets the color of the title border. |
| Title color | Sets the color of the title. |
| Alignment | Select the position of the title to be either to the left, right or center of its container on desktop. |
| Alignment on mobile | Select the position of the title to be either to the left, right or center of its container on mobile. |
| View all | Enter the text for the view all link. |
| 'View all' alignment | The alignment of the view all link within container of the Header Block. |
| 'View all' font weight | Select the font weight of the view all link text to be either Normal, Medium, Semibold, Bold, Extra bold, or Black. |
| 'View all' bottom margin | Determines the spacing bottom of the view all link on the tablet and desktop devices. |
| 'View all' bottom margin on mobile | Determine the spacing bottom of the view all button on the mobile devices. |
| Show 'view all' border | Enables the display of underlines of the view all link text. |
| 'View all' link | Specify the link for the view all link to redirect to. |
| 'View all' link color | Sets the color of the view all link text. |
| 'View all' icon |
Enter the SVG icon that stands next to the view all link text.
Note: Go to this linkfind your icon. Find the icon you want, then copy the SVG code and paste it here.
|
| 'View all' icon color | Sets the color for icon of the View All link. |
| **Show more button** | |
| Button label |
Enter the text for the Show More button.
Note: Only applicable for grid layout.
|
| Font size | The font size of the Show More button text. |
| Font Weight | Select the font weight of the Show More button text to be either Normal, Medium, Semibold, Bold, Extra bold, or Black. |
| Text style | Specifies how to capitalize of the Show More text. |
| Button width | Determines the width of the Show More button. |
| Top padding | Determines the height of the top inner space of the Show More button. |
| Bottom padding | Determines the height of the bottom inner space of the Show More button. |
| Button icon |
Enter the SVG icon that stands next to the Show More button text.
Note: Go to this linkfind your icon. Find the icon you want, then copy the SVG code and paste it here.
|
| Top margin | Adjust the space between the top edge of the Show More button and the elements or content above it. |
| Show button shadow | Enables the shadow of the Show More button. |
| Label color | Sets the color of the Show More button text. |
| Border color | Sets the border color of the Show More button. |
| Background color | Sets the background color of the Show More button. |
| Background gradient | Sets the background gradient of the Show More button. |
| Label hover color | Sets the color of the Show More button on hover states. |
| Border hover color | Sets the border color of the Show More button on hover states. |
| Background hover color | Sets the background color of the Show More button on hover states. |
| Background hover gradient | Sets the background gradient of the Show More button on hover states. |
### Countdown
| Settings | Description |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Countdown style |
Select the style of the countdown. There are 2 styles:
Under the title Beside the title
|
| Countdown end date |
Enter the due date for the countdown.
Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00.
|
| Countdown text font size | The font size of the coundown text. |
| Countdown color | Sets the color of the coundown. |
| Countdown bottom margin | Adjust the space between the bottom edge of the countdown block and the elements or content below it. |
### 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. |
| Enable swipe on mobile | Turn the grid to built-in slider on mobile device. |
| Enable bottom padding for product card | Toggle to apply the below 'Product Card Spacing Bottom' setting. |
| Bottom padding for product card | Determines the bottom spacing of the product card. |
### Slider layout
| Settings | Description |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show navigation dots on desktop | Toggle the paginating dots on Desktop. |
| Show navigation dots on mobile/tablet | Toggle the paginating dots on Tablet and Mobile. |
| Top margin of the navigation dots | Determines the spacing of the dots from the slider. |
| Show navigation arrows on desktop | Toggle the navigation arrows on Desktop. |
| Show navigation arrows on mobile/tablet | Toggle the navigation arrows on Mobile. |
| Show navigation arrows on hover | Show arrows when hovering over this section. |
| Show scroll bar |
Show the progress bar for the slider.
Progress bars give visitors a visual indicator of how much product is left on the current slide. As the slide, the bar will gradually fill up.
|
| Show slide counter | Displays the number of products on the current slide compared to the total number of products on the slide. |
| Enable infinite looping for slider | Enables infinite looping of the carousel slides and scrolling through them continuously. It automatically restarts from the beginning when it reaches the end. |
| Autoplay on mobile | Toggle slides to auto-play on mobile. |
| Enable custom positioning of navigation arrows on desktop | Toggle to enable custom positioning of navigation arrows on the desktop. |
| Vertical position (unit % or px) | Enter the position of the arrows relative to the top of the slider. |
| Use special arrow position | Toggle to use special position for arrow on destkop. |
| Spacing bottom | Determines the right distance of the arrows. |
| Spacing right | Determines the bottom distance of the arrows. |
| Products per row | The number of product columns per row. |
| Button label | Enter the text for the button. |
| Button link | Specify the link for the button to redirect to. |
| Button width | Determines the width of the button. |
| Button top margin | Determines the top distance of the button. |
### Scroll layout
| Settings | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Products per row | The number of product columns per row. |
| Show a part of product on the right side | Toggle to show a partial of product at the scroll box's edge. |
| **Scrollbar** | |
| Height | Determines the height of the scroll bar. |
| Track background color | Sets the color for the background of the scrollbar, which is generally fixed regardless of the scrolling position. |
| Thumb background color | Sets the background color for the moving part of the scrollbar, which usually floats on top of the track. |
| Thumb background hover color | Sets the background color on hover states for the moving part of the scrollbar. |
### Banner color
| Settings | Description |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Desktop position |
Select the position of the banner to be to the Left or Right of the products.
Note: Position is automatically optimized for mobile.
|
| Width on desktop | Set the width of the banner. The remaining width is for the products layout. |
| Show image on mobile | Toggle to show or hide the image on mobile. |
### Categories block
| Settings | Description |
| --------------------- | --------------------------------------------------------- |
| Show categories block | Toggle to show the block. |
| Text color | Sets the color of the text on this block. |
| Text hover color | Sets the color on hover states of the link on this block. |
| Background color | Sets the background color of this block. |
| Background gradient | Sets the background gradient of this block. |
| Button label | Enter the text for the button. |
| Button link | Enter URL for the button to redirect to. |
### Section top padding
Settings
Meaning
Desktop
Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
### Section bottom padding
Settings
Meaning
Desktop
Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
## Block settings
### \[BLOCK] Banner
| Settings | Description |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image | Upload/Select image for the banner block. |
| Link | Enter the URL for the banner. |
| Image height |
Select the image height:
Auto: adapt to the Image ratio. Full Height: Set the height of the image to the height of the product block.
|
| Enable image zoom on hover | Toggle the feature to zoom in image on hovered. |
| Corner radius | Determine the roundness of the image. |
| Content alignment | Select the horizontal alignment of the text content to be either to the Left, Right or Center. |
| Content position | Select the vertical alignment of the text content to be either to the Top, Middle or Center. |
| Content top/bottom padding |
Determine the top and bottom spacing of the text content relative to the image's top/bottom based on the alignment.
Note: Only applies when the 'content position' setting is set to top or bottom.
|
| Content left/right padding |
Determine the left and right spacing of the text content relative to the image's left/right based on the alignment.
Note: Only applies when the 'content alignment' setting is set to left or right.
|
| Heading | The heading of the banner. |
| Heading font size | The font size of the heading on the tablet and desktop devices. |
| Heading font size on mobile | The font size of the heading on the mobile devices. |
| Heading bottom margin | Determines the bottom spacing of the heading. |
| Heading color | Sets the color of the heading. |
| Subheading | The subheading of the banner. |
| Subheading font size | The font size of the subheading on the tablet and desktop devices. |
| Subheading font size on mobile | The font size of the subheading on the mobile devices. |
| Subheading bottom margin | Determines the bottom spacing of the subheading. |
| Subheading color | Sets the color of the subheading. |
| Description | The description for the banner block. |
| Description font size | The font size of the description. |
| Description color | Sets the color of the description. |
| Button label | The text that displays on the button. |
| Button label color | Sets the color of the button text. |
| Button border color | Sets the border color of the button. |
| Button background color | Sets the background color of the button. |
| Button background gradient | Sets the background gradient of the button. |
| Button label hover color | Sets the color of the button on hover states. |
| Button border hover color | Sets the border color of the button on hover states. |
| Button background hover color | Sets the background color of the button on hover states. |
| Button background hover gradient | Sets the background gradient of the button on hover states. |
| Customize button position |
Customize the position of the content.
Note: These settings are only used for desktop.
|
| Button horizontal position (unit %) | The horizontal position of the content on desktop. Calculated in % of banner width. |
| Button vertical position (unit %) | The vertical position of the content on desktop. Calculated in % of banner height. |
| **Video** | |
| A video from youtube or vimeo on desktop | Enter the URL of a YouTube or Vimeo video. |
| Aspect ratio (unit %) | Enter the aspect ratio to show the video block. |
| Icon |
Select the video style icon.
Style 1: the play button is a triangle. Style 2: the play button is wrapped in a circle.
|
| Icon color | Sets the color of the video icon. |
| Icon background color | Sets the background color of the video icon. |
| Customize icon position (unit %) | Customize the position of the video icon. |
| Icon horizontal position (unit %) | The horizontal position of the video icon on desktop. Calculated in % of banner width. |
| Icon vertical position (unit %) | The vertical position of the video icon on desktop. Calculated in % of banner height. |
| Icon horizontal position on mobile (unit %) | The horizontal position of the video icon on mobile. Calculated in % of banner width. |
| Icon vertical position on mobile (unit %) | The vertical position of the video icon on mobile. Calculated in % of banner height. |
#### \[BLOCK] Categories
| Settings | Description |
| ------------ | ----------------------------------------------- |
| Image | Upload/Select the image for the block. |
| Text | Enter text for the block title. |
| Button label | Enter the text for the button. |
| Button link | Specify the link for the button to redirect to. |
