Product Block
Last updated
Last updated
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".
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
Select the style for the countdown text. Style 1: The countdown stands beside the title. Style 2: The coundown is below the title.
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.
The settings below are only applied when the Layout: Grid is selected.
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.
The settings below are only applied when the Layout: Slider is selected.
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.
The settings below are only applied if there is an banner block added.
Position On
Select the position of the banner to the Left or Right
Width
Determine the percentage of the banner width.
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.
