Shop Categories of Front is built using Gutenberg. It has 4 blocks.
Overview
The Details
1. Alert Block
Block Settings
| Field | Type | Description | Default |
|---|---|---|---|
| Background Type | Select | Choose the type of background | Single |
| Background Color | Select | Choose the background | primary |
| Additional CSS Class | Text | Enter additional class name. | none |
Block Output
2. Hero Block
Block Settings
| Field | Type | Description | Default |
|---|---|---|---|
| Layout | Select | Choose the style version | Style v4 |
| Enable Parallex Effect | Toggle | Enable or disable parallex effect | Enable |
| Enable Container | Toggle | Enable or disable container | Enable |
| Enable Subtitle | Toggle | Enable or disable subtitle | Enable |
| Enable Button | Toggle | Enable or disable button | Enable |
| Enable Separator | Toggle | Enable or disable separator | Disable |
| Title Color | Select | Choose color for title | dark |
| Subtitle Color | Select | Choose color for subtitle | dark |
| Background Type | Select | Choose background type | image |
| Background Image | Media | Upload background image | image |
| Button Design | Select | You can select design for button. | Default |
| Button Background Color | Select | Select background color for button. | white |
| Button Size | Select | You can select size for buttons. | Small |
| Is Wide? | Toggle | Enable or disable the button wide | Enable |
| Button Border radius | Select | Select border style for button | Pill |
| Button Icon | Select | Select the icon to displayed before or after the button text | none |
| Is icon aftertext? | Toggle | You can enable or disable icon after text. | Disable |
| Is icon button? | Toggle | You can enable or disable icon is button. | Disable |
| Enable transition? | Toggle | You can enable or disable button transition. | Enable |
| Additional CSS Class | Text | Enter additional class name. | none |
Block Output
3. Products Category Content Block
Block Settings
| Field | Type | Description | Default |
|---|---|---|---|
| Layout | Select | You can select layout style verion. | Style 1 |
| Limit | Range Control | Drag the slider to set the total number of products category to be displayed | 3 |
| Order By | Select Control | Choose the order of your category, either by Title, Date, Id. | ID |
| Order | Select Control | Choose the order of your category to be displayed either in Ascending or Descending Order. | ASC |
| Hide Empty | Checkbox | Check to select hide empty categories | Uncheck |
| Choose Category | Select Control | Choose the categories to be displayed | T-shirts, Tech Cover and Caps |
Block Output
4. Cards Block
Block Settings
| Field | Type | Description | Default |
|---|---|---|---|
| Enable Container | Toggle | Enable or disable container | Enable |
| Display Section Header | Toggle | Enable or disable section header | Enable |
| Enable Section Padding | Toggle | Enable or disable section padding | Enable |
| Display Image | Toggle | Enable or disable image | Enable |
| Display Title | Toggle | Enable or disable title | Enable |
| Display Description | Toggle | Enable or disable description | Enable |
| Display Button | Toggle | Enable or disable button | Enable |
| Limit | Range Control | Choose number of cards to be displayed. | 4 |
| Column( lg ) | Range Control | You can choose width of column for the screen greater than 1200px wide. | 4 |
| Button Design | Select | You can select design for button. | Default |
| Button Background Color | Select | Select background color for button. | white |
| Button Size | Select | You can select size for buttons. | Small |
| Button Border radius | Select | Select border style for button | Pill |
| Button Icon | Select | Select the icon to displayed before or after the button text | none |
| Is icon aftertext? | Toggle | You can enable or disable icon after text. | Disable |
| Is icon button? | Toggle | You can enable or disable icon is button. | Disable |
| Enable transition? | Toggle | You can enable or disable button transition. | Enable |
| Additional CSS Class | Text | Enter additional class name. | none |
Block Output
5. Hero Block
Block Settings
| Field | Type | Description | Default |
|---|---|---|---|
| Layout | Select | Choose the style version | Style v4 |
| Enable Parallex Effect | Toggle | Enable or disable parallex effect | Enable |
| Enable Container | Toggle | Enable or disable container | Enable |
| Enable Subtitle | Toggle | Enable or disable subtitle | Enable |
| Enable Button | Toggle | Enable or disable button | Enable |
| Enable Separator | Toggle | Enable or disable separator | Disable |
| Title Color | Select | Choose color for title | dark |
| Subtitle Color | Select | Choose color for subtitle | dark |
| Background Type | Select | Choose background type | image |
| Background Image | Media | Upload background image | image |
| Button Design | Select | You can select design for button. | Default |
| Button Background Color | Select | Select background color for button. | white |
| Button Size | Select | You can select size for buttons. | Small |
| Is Wide? | Toggle | Enable or disable the button wide | Enable |
| Button Border radius | Select | Select border style for button | Pill |
| Button Icon | Select | Select the icon to displayed before or after the button text | none |
| Is icon aftertext? | Toggle | You can enable or disable icon after text. | Disable |
| Is icon button? | Toggle | You can enable or disable icon is button. | Disable |
| Enable transition? | Toggle | You can enable or disable button transition. | Enable |
| Additional CSS Class | Text | Enter additional class name. | bg-img-hero-center |
Block Output
