Product Block 02

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

Section settings

General

SettingsMeaning

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 spacing of the Full Width layout.

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.

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

Title Font Size

Specify the font size of the title on desktop.

Title Font Size Mobile

Specify the font size of the title on mobile.

Title Margin Bottom

Determine the spacing of the title from bottom on Desktop.

Title Margin Bottom Mobile

Determine the spacing of the title from bottom on Mobile.

Title Border Color

Set color for the border/underline of the title.

Title Color

Apply a color to the title.

View All Alignment

Select the alignment of the View all text to be either to the Left, Center or to the Right.

View All Font Weight

Select the font weight of the 'View all' text.

View All Margin Bottom

Determine the top spacing of the "View all" Desktop.

View All Margin Bottom Mobile

Determine the top spacing of the "View all" Mobile.

Toggle "View all" border?

Toggle "View all" border?

View All Icon

Enter the SVG icon for the "View all".

Icon View All Color

Apply a color to the icon.

Alignment

Select the alignment of the header text to be either to the Left, Center or to the Right of the section.

Button Width

Determine the width of the button.

Button Text

Enter the text for the button.

Button Icon

Enter the SVG icon for the button.

Color - Background Color - Border Color -

Set the text color, background and border color for the normal states of the buttons.

Maximum Products To Show

Limit the number of products display on this block.

Settings For Collection 01

SettingsMeaning

Title

Enter in the title for the block.

View all

Enter the text for the "View all" link.

View All Link

Set URL for the "View all" to redirect to if the "Redirect To URL" is selected.

Collection

Select Collection to display

Settings For Grid Layout

SettingsMeaning

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.

Settings For Slider Layout

SettingsMeaning

Show Dots On Desktop

Toggle the paginating dots on Desktop.

Show Dots On Mobile / Tablet

Toggle the paginating dots on Tablet and Mobile.

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.

Position Vertical Arrow - (Unit % or px)

Enter the position of the arrows relative to the top of the slider.

Settings For Collection 02

SettingsMeaning

Title

Enter in the title for the block.

View all

Enter the text for the "View all" link.

View All Link

Set URL for the "View all" to redirect to if the "Redirect To URL" is selected.

Collection 02

Select Collection to display

Layout Special Card

SettingsMeaning

Enable Special

Toggle special layout card

Background Color

Set the color for the card item's background.

Padding

Determine the padding of the card from its top, right, bottom, left.

Border Radius

Determine the roundness of the card item.

Border Layout:

Select the border layout: Full border / Bottom border.

Border Width

Determine the width of the border.

Border Color

Set the border color for the card item.

Last updated