Categories on the Home Page

CC Documentation Categories on PrestaShop Home Page.

Comprehensive documentation for PrestaShop home page category display module (cc_ps_home_categories) with advanced styling options, multiple display modes and full control over category appearance.

Table of contents

1. Introduction
2. Installation
3. License activation
4. Management panel
5. General settings
6. Display styles
7. Configuration of images
8. Category selection
9. Customization of appearance
10. Responsiveness
11. Troubleshooting
12. FAQ

1. introduction

CC PrestaShop Categories Home is an advanced module that allows you to elegantly display categories on your store's homepage. The module offers a wide range of display styles, from classic grids to modern sliders, giving you full control over the appearance and functionality.

Main functions of the module:

• 7 different grid styles (classic, modern, minimalist, colorful, elegant, dark mode, light bordered)
• Slider with navigation and touch gesture support
• 3 list modes (horizontal, vertical, compact)
• Full control over category selection
• Advanced image options
• Responsive design
• COCOS licensing system
• Multilingual service
• Animations and transition effects
• Can be placed in different hookups

2 Installation

System requirements

• PrestaShop 1.7.0.0 or later
• PHP 7.2 or later
• MySQL 5.6 or later
• Permission to install modules
• Minimum 256 MB RAM (512 MB recommended)
• GD extension for image processing

Installation process

1. Download the ZIP file of the module from the official store cocos.codes
2. Log in to your PrestaShop admin panel
3. Go to: Modules > Module Manager > Add New Module
4. Click "Add Module" and select the downloaded ZIP file
5. When the installation is complete, click "Configure"
6. The module will automatically register with the displayHome hookup

3. license activation

It is necessary to activate the license before using the full functionality of the module:

1. After installation, go to configure the module
2. Select the "License" tab
3. Enter the license key you received after purchase
4. Click "Activate License"
5. The system will check the validity of licenses on COCOS servers
6. After successful activation, you will see a confirmation message

4. management panel

The module management panel consists of several tabs for full configuration:

Main tabs:

• Settings - main module configuration (available only with a valid license)
• Documentation - link to full online documentation
• Support - link to COCOS technical support page
• Plugins - list of available COCOS extensions
• License - module license management

The system automatically redirects to the license tab if the key is not active, providing an intuitive setup process.

5. general settings

In the general settings section you will find the basic options that control the operation of the module:

Setup	Description	Default value
Enable the module	Global display on/off	Enabled
Show section title	Displaying the header above the categories	Enabled
Section title	Multilingual header text	"Our Categories".
Category limit	Maximum number of categories (1-50)	6

Functionality of the main switch

• Enabled - categories are visible on the homepage according to the configuration
• Turned off - module does not display any categories

6. display styles

The module offers 11 different category display styles, divided into 3 main groups:

Grid styles (Grid)

Style	Description	Recommended use
grid_classic	Classic cards with frames and shadows	Universal stores
grid_modern	Background gradient with overlay on images	Modern Brands
grid_minimal	Clean, minimalist cards	Premium stores
grid_colorful	Colorful frames with animations	Stores for children/youth
grid_elegant	Elegant cards with gold accents	Luxury brands
grid_dark	Dark theme with lighting effects	Gaming/electronics
grid_light_bordered	Bright cards with clear borders	Corporate stores

List styles (List)

Style	Description	Recommended use
list_horizontal	Horizontal picture cards on the left	Main category pages
list_vertical	Vertical cards in columns	Narrow sections
list_compact	Compact list with small images	Sidebar, footer

Slider styles (Slider)

• slider_classic - Elegant slider with navigation and hover overlay

7. configuration of images

The module offers full control over the display of category images:

Container sizes

Size	Height	Recommended for
small	150px	Compact systems
medium	250px	Standard display
large	350px	Impressive presentations

Types of images
The system automatically detects available image types defined in PrestaShop for categories:

• category_default - standard type for the category

Fallback images
If a category does not have an assigned image, the system automatically displays a default replacement image no-image-category.jpg.

8 Category selection

The module offers two modes for selecting categories to display:

Automatic mode
The system automatically selects the main categories according to their position:

• Omits root category (ID: 1)
• Skips the main category of the store
• Sorts by position in the category tree
• Selects only active categories
• Respects the set limit

Manual mode
The administrator can manually select specific categories:

• List of category IDs separated by commas
• Example: 2,5,8,12
• The system checks that categories exist and are active
• Display order in the list
• Automatic skipping of non-existent categories

Category validation
Regardless of the mode, the system checks:

• Does the category exist in the database
• Is the category active
• Does the category have a name in the current language
• Does the user have permission to view it

9. adjusting the appearance

Content control

Option	Function	By default
Show category names	Displaying category titles	Enabled
Show category descriptions	Display of descriptions (abbreviated)	Enabled
Number of columns	Grid division (1-6 columns)	3

Responsive behavior
The system automatically adjusts the number of columns:

• Desktop - full number of columns
• Tablet - 2-3 columns maximum
• Mobile - always 1 column

Effects and animations

• Fade-in during page load
• Hover effects on cards
• Smooth transitions
• Scroll reveal animations
• Loading states for images

Responsiveness of the slider
Slider automatically:

• Adjusts the number of visible elements
• Supports gestyswipe on touch devices
• Shows/hides navigation as needed
• Maintains aspect ratio on different screens

10 Responsiveness

The module is fully responsive and automatically adjusts to different screen sizes:

Breakpoints

Device	Width	Columns	Behavior
Desktop	> 768px	Full configuration	Standard display
Tablet	481-768px	A maximum of 2-3	Simplified layout
Mobile	< 480px	1	Vertical layout

Mobile optimizations

• Automatic reduction of padding and margin
• Responsive typography
• Touch-friendly navigation
• Optimized image sizes
• Simplified animations

Mobile styles for each mode

• Horizontal list - transforms into a vertical
• Compact list - pieces stack one under the other
• Slider - reduces element widths and spacing

11 Troubleshooting

Categories don't display on home page

1. Check if the module is enabled in the general settings
2. Make sure the license is active
3. Check if the selected categories are active in PrestaShop
4. Clear PrestaShop and browser cache
5. Check that the displayHome hook is supported by the template

CSS styles are not loaded

1. Check if the file views/css/front.css there is
2. Make sure you are on the home page (controller: IndexController)
3. Check for conflicts with other modules
4. Disable CSS Cache in PrestaShop settings.
5. Check permissions to read module files

Slider not working properly

1. Check your browser console for JavaScript errors
2. Make sure that the file views/js/front.js is loaded
3. Check for conflicts with jQuery
4. Disable other slider modules for testing
5. Check that the elements have the correct HTML structure

Images are not displayed

1. Check if categories have images assigned
2. Make sure that the selected image type exists in the system
3. Check directory permissions img/c/
4. Check if the file no-image-category.jpg there is
5. Clear image cache

License errors

1. Check that the license key is correct
2. Make sure the domain is compatible with the license
3. Check the connection to the COCOS servers
4. Clear the module cache
5. Contact support if you have problems with activation

12 FAQS.

Can I use several styles at the same time?
No, the module only allows you to select one display style at a time. However, you can easily change the style in the settings.

How to add a custom display style?
The new styles require modification of CSS and PHP files. We recommend that you copy the existing style and customize it to your needs.

Can I display subcategories?
Currently, the module supports only main categories. Displaying subcategories requires modification of the source code.

How to change the position of a module on the page?
The module is automatically placed in the displayHome hookup at the first position. You can change the order in the Position menu in the modules panel.

Does the module work with caching?
Yes, the module is compatible with PrestaShop cache systems and requires no special configuration.

How to translate the section title?
The "Section title" field supports all active languages in the store. Switch the language in the admin panel and enter the translation.

Can I hide category descriptions for certain styles?
The "Show category descriptions" option works globally for all styles. Some styles (like grid_modern) display descriptions in overlay.

Why does the slider show navigation arrows when they are not needed?
JavaScript automatically hides arrows when all elements fit in the view. Check that the elements have the correct dimensions.

How does lazy loading of images work?
Images are loaded automatically when they become visible in the viewport. This saves bandwidth and speeds up page loading.

Can I change the hover animations?
Animations are defined in CSS for each style. You can modify them by editing the file front.css.

Why are some categories not displayed?
The system skips inactive categories, categories without a name and those to which the user does not have permissions.

How to change the default category image?
Replace the file views/img/no-image-category.jpg own image with the same dimensions.

Does the module support RTL (right-to-left)?
The module uses standard Bootstrap classes that support RTL. You may need to customize some of the styles.

How to turn off animations?
You can remove or comment out the CSS animations in the file front.css or add animation: none; to the appropriate selectors.

Can I change the count of category descriptions?
Descriptions are automatically shortened to 80-120 characters depending on the style. You can change this in the template file home_categories.tpl.

Why doesn't the module work after PrestaShop upgrade?
Check the version compatibility in the module file. It is possible that you need to update the module to the latest version.

How to optimize performance for a large number of categories?
Use manual category selection mode and limit the number to a maximum of 12 items. Enable lazy loading and image caching.

Can I use the module on category pages?
The module is intended for the home page. Placement on other pages requires modification of hookew in the source code.

How to check which hookups are available in my template?
Use the "Hook displayer" module or check the template files in the template directory. Not all templates support all hooks.

Why are dark mode styles not displaying correctly?
Dark styles require a special wrapper. Check that the template does not overwrite background colors and that there are no conflicts with other styles.

How to export the module configuration?
The configuration is stored in a table ps_configuration prefixed CC_PS_HC_. You can export these records through phpMyAdmin.

If you are running a store on PrestaShop and want to improve the presentation of categories on the homepage, we recommend using the CC PrestaShop Module Categories on the Home Page., which will provide a professional look and full control over how product categories are displayed.