Collection page



Background Image: Set your header background image

Enable header parallax: If the checkbox is checked then your header background image will have parallax scrolling effect

Image alignment: Set background image position if parallax mode is not activated

Background color: Background color will be used if there is no background image

Set header height: Set header height, default is 500px


Display style: Select product card grid display style

Products per row: Set default number of products shown per row on desktop,  however, users can switch view manually on front end

Rows per page: Set number of products row per page


Currently we have 4 sidebar display styles: No sidebar, Left sidebar, Right sidebar and Horizontal sidebar

-> The Horizontal sidebar will only display when users click on the Filter button 

Choose your sidebar layout and add more sidebar content on the [+] Add content button

Sidebar content type

  • Price filter: Enable price filter by checking on the text box: Show price filter
  • Vendor filter (maximum 1): Will display filter by product vendor
  • Type filter (maximum 1): Will display filter by product type
  • Tags filter: Will display filter by product tags (such as: black, blue, S, M, L, etc…)

Tags Filter has varies layout style, you can choose button style, radio style or Color swatch style. Each tag separated by a comma (Ex: black, blue, yellow). Take a note that the color swatch style will display any product matched the product tags. You can learn how to add more custom color swatch by visit here

Was this page helpful?