Product Block
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
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), 1170px, 1770px, Full Width (the 100% of the viewport width). |
Padding Container Full Width | Determines the left and right padding of the Full Width layout. |
Disable Padding Content? | Sets the width of the padding area on the right of an element is 0 on tablet and desktop devices. |
Enable Border Top? | Toggle to show/hide the bottom border of the section. |
Enable Border Bottom? | 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 Minus Spacing Top | Toggle to let spacing accepts minus value, so the section will overlap on the top section if any. |
Minus Spacing Top | Determines how much the section moves upward. |
Layout | Select a layout for the product block: - Grid: Show products as a grid - Slider: Show product as slider - Scroll: Show product as 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. |
Block 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 Spacing Top | Determines the spacing of the title from the line on the its top. (Use for Block Header Style 4) |
Title | The title for the section. |
Enable Title Border? | Allows displaying the top or bottom border of the title depending on the style of the Header Block. |
Enable Title Underline? | Enables the display of underlines of title text. (Use for Block Header Style 2) |
Title Font Size | Determines the font size of the title on the tablet and desktop devices. |
Title Font Size Mobile | Determines the font size of the title on the mobile devices. |
Title Margin Bottom | Determines the spacing of the title from the bottom content on the tablet and desktop devices. |
Title Margin Bottom 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. |
View All | Enter the text for the view all link. (Leave the field blank to hide this 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. The options are:
|
View All Margin Bottom | Determines the spacing bottom of the View All link on the tablet and desktop devices. |
View All Margin Bottom Mobile | Determine the spacing bottom of the View All button on the mobile devices. |
Enable 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 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. Go to this link Find your Icon. Find the icon you want, then copy the SVG code and paste it here. |
Icon View All Color | Sets the color for icon of the View All link. |
Alignment | The alignment of the title within container of the Header Block:
|
Button Text | Enter the text for the Show More button. (Applies to Grid layout only) |
Font Size | The font size of the Show More button text. |
Font Weight | The font weight of the Show More button text. The options are:
|
Text Transform | Specifies how to capitalize of the Show More text. |
Button Width | Determines the width of the Show More button. |
Button Top Padding | Determines the height of the top inner space of the Show More button. |
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. Go to this link Find your Icon. Find the icon you want, then copy the SVG code and paste it here. |
Button Spacing Top | Adjust the space between the top edge of the Show More button and the elements or content above it. |
Enable Button Shadow? | Enables the shadow of the Show More button. |
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. |
Hover / Active Color | Sets the color of the Show More button on hover states. |
Hover / Active Border Color | Sets the border color of the Show More button on hover states. |
Hover / Active Background Color | Sets the background color of the Show More button on hover states. |
Hover / Active Background Gradient | Sets the background gradient of the Show More button on hover states. |
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 | Select a style for the product block: - Style 1 - Style 2 - Style 3 Style 3 is only used for 'Products Per Row is 1' |
Countdown
Settings | Description |
---|---|
Countdown Style | Select the style of the countdown. - Style 1: show the countdown block with a border. - Style 2: show countdown items with a background. |
Countdown | Enter the due date for the countdown with the 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. |
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 'Product Card Spacing Bottom' setting. |
Product Card Spacing Bottom | Determines 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 | Determines 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. |
Show Progress 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 Counter Number | Displays the number of products on the current slide compared to the total number of products on the slide. |
Show Arrows On Hover | Show arrows when hovering over this section. |
Enable Infinite | Enables infinite looping of the carousel slides and scrolling through them continuously. It automatically restarts from the beginning when it reaches the end. |
Products Per Row | The number of product columns per row. |
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 | The number of product columns per row. |
Show Half Of A Product Per View | Toggle to show a partial of product at the scroll box's edge. |
Scrollbar Height | Determines the height of the scroll bar. |
Scrollbar Track Background | Sets the color for the background of the scrollbar, which is generally fixed regardless of the scrolling position. |
Scrollbar Thumb Background | Sets the background color for the moving part of the scrollbar, which usually floats on top of the track. |
Scrollbar Thumb Hover Background | Sets the background color on hover states for the moving part of the scrollbar. |
Enable Hover Drag Icon | Enable mouse effects when hovering over the product slider. |
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. |
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 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 image. |
Image | Upload/Select image for the banner block. |
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 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. |
Text | The title of the banner. |
Text Font Size | The font size of the title on the tablet and desktop devices. |
Text Font Size Mobile | The font size of the title on the mobile devices. |
Text Spacing Bottom | Determines the bottom spacing of the title. |
Text Color | Sets the color of the title. |
Sub Text | The sub title of the banner. |
Sub Text Font Size | The font size of the sub title on the tablet and desktop devices. |
Sub Text Font Size Mobile | The font size of the sub title on the mobile devices. |
Sub Text Spacing Bottom | Determines the bottom spacing of the sub title. |
Sub Text Color | Sets the color of the sub title. |
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 Text | The text that displays on the button. |
Button Link | The URL that you want the button to link to. |
Color | Sets the color of the button text. |
Border Color | Sets the border color of the button. |
Background Color | Sets the background color of the button. |
Background Gradient | Sets the background gradient of the button. |
Hover / Active Color | Sets the color of the button on hover states. |
Hover / Active Border Color | Sets the border color of the button on hover states. |
Hover / Active Background Color | Sets the background color of the button on hover states. |
Hover / Active Background Gradient | Sets the background gradient of the button on hover states. |
Custom Position Content | Customize the position of the content. (This settings only use for Desktop) |
Horizontal Position | The horizontal position of the content on desktop. Calculated in % of banner width. |
Vertical Position | The vertical position of the content on desktop. Calculated in % of banner height. |
[Banner Block] Settings Video
Settings | Description |
---|---|
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. |
Color Icon | Sets the color of the video icon. |
Background Color Icon | Sets the background color of the video icon. |
Custom Icon Position | Customize the position of the video icon. |
Horizontal Position | The horizontal position of the video icon on desktop. Calculated in % of banner width. |
Vertical Position | The vertical position of the video icon on desktop. Calculated in % of banner height. |
Horizontal Position on Mobile | The horizontal position of the video icon on mobile. Calculated in % of banner width. |
Vertical Position on Mobile | The vertical position of the video icon on mobile. Calculated in % of banner height. |
Last updated