Hyvä Jewellery ThemeHyvä Jewellery Theme
Live Demo
Buy Now
Support
Live Demo
Buy Now
Support
  • Getting Started

    • Introduction
    • Requirements
    • Installation
    • Activate the Theme
  • Build storefront

    • Homepage Configurator

      • Overview
      • Section Types
      • Hero Banner
      • Category Grid
      • Product Carousel
      • Collection Banners
      • Split Content
      • Promo Banner
      • Luxury Grid
      • CTA Banner
      • Instagram Feed
      • Trust Badges
    • Header, Footer & Mega Menu

      • Overview
      • Building the Menu
      • Submenu Templates
      • Header & Footer Settings
      • Agent Readiness
    • Storefront Pages

      • Category Page
      • Search Results
      • Product Page
      • Cart & Checkout
  • Help

    • Troubleshooting
    • FAQ

Category Grid

The Category Grid section helps shoppers open the right category quickly. Use it for items like Rings, Earrings, Necklaces, Bracelets, Watches, or Gifts.

You can show categories as a grid or as a slider.

Add a Category Grid

  1. Go to Content -> Homepage Configurator -> Sections.
  2. Click Add New Section.
  3. Enter a Title, for example Shop by Category.
  4. Set Section Type to Category Grid.
  5. Set Enabled to Yes.
  6. Use a Sort Order such as 20, so it shows below the hero banner.
  7. Fill the Category Grid Configuration fields.
  8. Click Save.

Magento Admin Edit Section page for Category Grid

Main settings

SettingWhat it does
Display ModeChoose Grid View for fixed tiles, or Slider View for a moving row.
Category SourceChoose Select from Catalog to use Magento categories, or Manual to add your own tiles.
Select CategoriesChoose categories from your catalog when using catalog source.
Number of Items to ShowLimit how many tiles show. Use 0 to show all selected items.
SubtitleSmall text under the section title.

Magento Admin Category Grid main settings

Layout settings

SettingWhat it does
Columns DesktopNumber of category tiles per row on desktop.
Columns MobileNumber of category tiles per row on mobile.
Image ShapeChoose Square, Rounded, or Circle.
Show Product CountShows how many products are in the category.
Show Image OverlayAdds a soft overlay on the image so text is easier to read.

Magento Admin Category Grid layout settings

Manual category tiles

Use Manual when you want full control over image, label, and link.

Click Add Category, then fill:

FieldWhat to enter
Category ImageUpload a clear image. Maximum file size is 2 MB.
LabelCategory name, such as Rings.
URLCategory page link, such as /rings.html.

Magento Admin Category Grid manual category items

View All button

Turn on Show "View All" Button if you want one button below the category section.

Use View All URL for the link. Example: /jewellery.html.

Storefront result

Shop by Category grid on the storefront

Good practice

  • Use 4 to 6 categories on the homepage.
  • Keep labels short.
  • Use the same image style for all category tiles.
  • Check mobile view after saving.
Prev
Hero Banner
Next
Product Carousel