Categories Highlights

Description

Categories Highlights is a banner which shows two or four categories in a highlighted position in the store. This Component can be imported and used by any VTEX App.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

To import it into your code:

1
import CategoriesHighlights from 'vtex.store-components/CategoriesHighlights'

You can use it in your code like a React component with the jsx tag: <CategoriesHighlights />.

1
2
3
4
5
6
<CategoriesHighlights
    categoriesHighlighted={ 
        categoryX: { name: 'X', image: 'Image X' }, 
        categoryY: { name: 'Y', image: 'Image Y' } 
    }
/>

Configuration

Prop nameTypeDescriptionDefault value
categoriesHighlightedObject!Categories highlighted in the department{}
showCategoriesHighlightedBoolean!Flag which indicates if the categories highlighted should be displayed or notfalse
quantityOfItemsNumber!Number of categories highlighted to be displayed (it should be 2 or 4)2
boxShapeString!Shape of the card box which wraps each category (it should be 'squared' or 'rectangular')squared

Category Highlight:

Prop nameTypeDescription
nameString!Name of the category
imageStringImage of the category

Styles API

This app provides some CSS classes as an API for style customization. You should follow the Styles API instruction in the main README.

CSS namespaces

Below, we describe the namespaces that are defined in the categories highlights.

Class nameDescriptionComponent Source
squaredCategoriesHighlightsThe properties to be applied to a squared containerindex
rectangularCategoriesHighlightsThe properties to be applied to a rectangular containerindex
rectangularCardThe properties to be applied to a rectangular card containerCategoryCard
squaredCardThe properties to be applied to a squared card containerCategoryCard
squaredCardImageThe properties to be applied to the image inside a squared cardCategoryCard
rectangularCardImageThe properties to be applied to the image inside a rectangular cardCategoryCard