Category Navigation

Updated 1 month ago

The Category Navigation helps you highlight key collections or categories in a visually engaging way. It makes navigation easier for users by giving them quick access to important sections of your app. Use it when your store has multiple categories and you want users to quickly find what they’re looking for.

Header Title

Use the eye icon to enable or disable the header.

Customization Options:

  • Text – Add a title like “Shop by Category” or “Explore Collections”

  • Font – Choose a font that matches your brand

  • Size – Adjust how prominent the title appears

  • Line Height – Control spacing between lines

  • Letter Spacing – Fine tune spacing between characters

  • Text Color – Choose a color that stands out clearly

  • Alignment – Position the text (left, center, or right)

  • Capitalization – Set how the text appears

Feature Title

This is the title displayed for each category item.

Text Style:

  • Font – Choose the style of the text

  • Size – Adjust how large the title appears

  • Line Height – Control spacing between lines

  • Letter Spacing – Adjust spacing between characters

  • Text Color – Set the color for readability

  • Alignment – Position the text within the card

  • Capitalization – Choose how the text appears

Background:

Padding – Adjust inner spacing to keep the layout clean and balanced 

Card Settings

This section controls how each category card appears.

Customize how category images are displayed:

  • Layout – Choose between grid or slider view

  • Shape – Select round or square cards

  • Height – Set the size of each category card

  • Radius – Adjust corner roundness

  • Image Scale – Choose whether images fill or fit the container

Card Background

  • Color – Set the background color for each card

  • Radius – Adjust how rounded the card edges appear

  • Padding – Control spacing inside the card

Card Border

  • Color – Choose the border color

  • Width – Adjust how thick or subtle the border appears

Background and spacing

Background

  • Color – Set the section background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the section

  • Margin – Manage spacing outside the section

Border

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Benefits:

  • Simplifies navigation thus giving better user experience

  • Reduces friction in browsing leading to faster product discovery

  • Helps users reach relevant products quickly 

  • Especially useful for large catalogs