Skip to main content

Shop By Category

The Shop By Category component organizes your store's product categories for easy navigation and discovery. It helps customers quickly find relevant product groups, enhancing the shopping experience for stores with diverse catalogs.

Shop By Category ComponentShop By Category Component

Settings

Title, Subtitle and Categories

  • Title: Set the main heading for the section.
  • Subtitle: Add a short description or tagline under the title.
  • Content Alignment: Choose how to align the content within the section.
  • Title Color: Set the color for the title text.
  • Categories: Select which product categories to display in this section.
Shop By Category - Title, Subtitle and Categories Settings

Category Display

info

When you enable the slider, the products will be displayed in a slider layout instead of a grid.

  • Enable Navigation Arrows: Toggle to show/hide navigation arrows on the sides of the section
Shop By Category - Slider Settings

Grid Settings

  • Category Size: Choose the size of the category cards.
  • Columns Count: Set the number of columns for the section.
  • Columns Gap: Adjust the spacing between columns.
  • Rows Gap: Adjust the spacing between rows.
  • Category Alignment: Choose how to align the categories within the section.
Shop By Category - Grid Settings

Category Design

  • Category Shape: Select the shape of the category cards.
  • Image zoom: Enable this option to zoom in on the category images when hovered over.
  • Text Color: Set the color for the category text.
  • Background Color: Set the background color for the category cards.
Shop By Category - Category Design Settings

Borders

  • Enable Borders: Toggle this option to add borders around the category images.
    • Border Color: Set the border color for the category images.
    • Border Width: Adjust the width of the border around the category images.
Shop By Category - Border Settings

Icons

  • Icon Size: Adjust the size of the category icons.
  • Icon Color: Set the color for the category icons.
info

the icons are only shown if the category has no image set.

Shop By Category - Icons Settings