Product Grid

Modified on Tue, 02 Mar 2021 at 05:47 PM

1. Content

Click Add Big Content to have an outstanding product that you want to set

Big Content

  • Position: Set a position to place the big content of the section (First/ Middle/ Last)
  • Width (1->12): E.g: 4,6,12 (Mobile, Desktop, Fullscreen)
  • Tick to Show Border
  • Content Type: choose the type for display on the section (Product / Image)

- Product: If you choose a product to display on Big Content, then you will select the special one that you want to show attractively. Select the product that is already existed on the data to show on store. 

  • Text align for Item content: choose an option for Text alignment in Big Content

- Image: If in the Content Style you choose Image, then skip the Product section above and scroll down here to customize the content.

  • Image Height: Select the option to set the height for the image (Auto or Fill)
  • Image link: Paste a link or Search to attach it to the image in order to lead customers to the target page when they click the image

- Text Box: Remember to add Title, Subtitle, or Content before modifying the text

  • Drag to set the position of the Text in Horizontal and Vertical

  • Button label: fill the blank to have a button on the image
  • Button link: Paste a link or search to lead customers to the content you want them to see when they click the button

  • Modify the colors for the Title, Subtitle, Content
  • Tick to have Button Rounded Corners
  • Inherit styles from Button: drag to take the default style for button, if you'd like customize the button, drag to 0
  • Customize the color for Button Text, Border, Background (remember to set 0)

2. Settings

  • Section Label: give a name to this section (eg: Product grid)
  • Layout
  • Tick to have Box Layout
  • Customize the Background color
  • or you can set Image Background instead of the color background
  • Background Size: Select the size for background (Auto/ Cover/ Contain)
  • Background Image Repeat: the image will be repeated until cover fully the background of the section
  • Background Image Position: choose the exact position for the image background 
  • Section Padding (in px): modify the margin for background (Order: Top Right Bottom Left)

- Section Heading

  • Give Text to Heading, Subheading, Subheading 2
  • Heading alignment: select the position for the Text
  • Set the colors of Heading, Subheading, and Subheading 2

- Section Button

  • Section label: type the content to display on the button
  • Button Link: Paste a link or search to attach it to the button (Remove link to hide)
  • Horizontal alignment: select the position for the Button (Left/ Center/ Right)
  • Tick to have Button Rounded Corners
  • Inherit Button style: drag to set the button default style, set 0 to customize
  • Alter the colors for Button Text, Border, Background

Note: if the button does not appear, try to upload the products in the Layout Content below. When the button is still hidden even though the Collection item has uploaded, contact us for help.

- Slider Settings: Tick to 

  • Enable Slider
  • Enable Center mode
  • Enable Loop
  • Show Next & Prev arrows
  • Show Dots
  • Change slides every: set the time of the slide movement in seconds

- Layout ContentCollection item: Select the Collection Item that has already uploaded to database 

  • Max number of items per row: E.g: 4,3,2 (respectively fullscreen, Desktop, Mobile)
  • Total items: drag to set the total products in this section
  • Text align for Item content: choose the alignment for the items 
  • Product Styles: select the style for displaying products
  • Tick to have Show Short Description, Spacing items, Border radius
  • Modify the colors for item border, Title product, Price product

  • Progress position
  • Show Product List

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article