# Alysum

> Explore the Alysum Premium Prestashop AMP Theme documentation. Learn how to use the Prestashop Page Builder, customization options, and AMP integration.

import { Video } from '../components/Video';

## Child theme

A child theme allows you to customize the Alysum theme without modifying its core files. It inherits all templates, styles, and functionality from the parent theme while letting you override only the files you want to change.

:::info
This feature is useful only for making slight modifications to a theme, such as adding a block. If you need to make more extensive changes to the markup, modify the theme directly instead of creating a child theme.
:::

### How to install the child theme

Installation process is the same as for the main theme.

<Video id="PrfB02YLLi8" title="Alysum Prestashop Theme - Child theme" />

Find more technical details on the [official prestashop page](https://devdocs.prestashop-project.org/9/themes/reference/template-inheritance/parent-child-feature/)


import { Image } from '../components/Image';
import { Video } from '../components/Video';

## Frequently Asked Questions (FAQ)

Welcome to our FAQ page! Here, you’ll find answers to the most common questions about our theme, installation, customization, and usage. Whether you’re getting started or looking for specific solutions, this page is designed to help you resolve any issues or doubts quickly.

Browse through the questions below to find helpful information and guidance. If you can’t find what you’re looking for, feel free to reach out to our support team – we’re here to help!

### There is no menu appearing when I click it on mobile devices

1. Open your header template in the CE editor
2. Click on the Menu widget
3. Go to the General section
4. Make sure the option “Use this menu in mobile sidebar” is enabled
5. Save the template and clear the cache if needed

### Empty search results

Go to "Shop Parameteres" → "Search" and click "Add missing products to the index"

<Image src="../images/search-index.webp" alt="Alysum Prestashop Theme Empty search" />

### Prestashop Product Types

`New`\
By default, all newly added products are considered **New** You can change the number of days a product remains **New** in `Shop Parameters` → `Product Settings`.

`Featured`\
To make the product **Featured**, go to `Catalog` → `Products` and in Associations field of a product add it to Home category

`Special`\
To make the product **Special**, go to `Catalog` → `Products` and add a discount.

`Bestseller`\
It's a product which was sold many times

`Cross-sellings`\
Are those products which were sold in the same cart with the currently viewed product

### How to edit contact page details?

Go to Back Office → Shop Parameters → Contact. You’ll find two tabs: Contacts and Stores. Navigate to the Stores tab to view all available contact details

### Empty Contact Page

Please make sure the module "Contact form (by PrestaShop)" is installed and enabled

### Where to find subscribers list

Go to "Modules" → "Installed Modules", find there "Newsletter subscription". Click on "Configure"

### Categories List disappear

Go to "Modules" → "Installed Modules", find there "Category tree links". Click on "Configure". Set "Category root" to "Home category"

### How to configure Google Maps on Contact Page

1. Go to "Modules" → "Theme Settings" → "General Tab", locate Google API Key, and enter your API key. [Read more about API keys here.](https://developers.google.com/maps/documentation/javascript/get-api-key)
2. Go to "Theme Settings" → "Contact Page", enter your store’s coordinates, and save.

### My Translation doesn't apply

If your translation isn’t applying, try modifying it, save the changes, then revert it back and save again

### Add custom Font to the Theme Settings fonts list

###### **Step 1: Download the font**

Find the custom font you want to use on your website, and then download the font file.

***

###### **Step 2: Create a WebFont Kit for cross-browsing**

Upload your font file to the [Webfont Generator](https://transfonter.org) and then convert it.

***

###### **Step 3: Upload the font files to your website**

Using your FTP or file manager, upload all the font files found within your Web Font Kit to your website into the folder `/themes/alysum/assets/fonts/`. Typically this kit will include multiple file extensions such as (.woff), (.woff2), (.ttf) and (.svg).

Your kit will also include a Cascading Style Sheet (.css) that you will need to update and upload in step 4.

***

###### **Step 4: Update your CSS file**

Open downloaded CSS file in a text editor

Replace the existing source URL with the new URL you created by uploading each file.

Here’s a quick example:

**Before update:**

```css
@font-face {
    font-family: 'CustomFont';
    src: url('CustomFont.woff2') format('woff2'),
         url('CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
```

**After update:**

```css
@font-face {
    font-family: "CustomFont";
    src: url('../fonts/CustomFont.woff2') format('woff2'),
         url('../fonts/CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
```

Now copy that code and paste it to the beginning of the file `/themes/alysum/assets/css/theme.css`

***

###### **Step 5: Add your font to the Theme Settings Font List**

Open the file `/modules/pkthemesettings/config/fonts.json` and add the name of your font to the list. Here’s an example:

```json
[
    'CustomFont',
    'ABeeZee',
    'Abel',
    'Arial',
    ...
```

###### **Step 6 (Optional): Add your font to the Creative Elements Font List**

To add the font to Creative Elements font list, open the file:

`/modules/creativeelements/includes/fonts.php`

### Revolution slider autoplay video

Select your slider and click Slide Editor. Choose a slide that contains a YouTube video. Then, go to Source Settings → YouTube Arguments and add the following parameters:
`&autoplay=1&mute=1"`

### How to add Google Analytics/Tag Manager's Code

1. Get your code from Google
2. Open the file `/themes/alysum/templates/_partials/javascript.tpl`
3. Add your code to the end of the file
4. add `{literal}` tag around yor code like this:

```html
<script src="https://www.googletagmanager.com/gtag/js?id=UA-39464434"></script>
<script>
{literal}
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-39464434-1');
{/literal}
</script>
```

### How to Add Price Countdown

<Video id="pYYRlvCo3hk" title="Alysum Prestashop Theme - Special Price Countdown" />

### Updating an old theme version that doesn't have pklib

If you're updating from an older (\< 9.1.0) theme version released before the [Promokit Library](/modules/pklib) (`pklib`) module existed, you need to install `pklib` manually **before** running the theme update.

Almost all other Promokit modules depend on `pklib` for shared functionality such as caching, file management, and admin tab registration. If `pklib` isn't installed first, the update or module installation will fail with errors like "module is not valid and cannot be loaded" or "Class Promokit\Module\Pklib... not found".

**Steps:**

:::steps
#### Install pklib

1. Download the latest theme archive and locate the `pklib` module folder inside `modules/`.
2. Upload it to your `/PRESTASHOP_ROOT/modules/` folder via FTP.
3. In the Back Office, go to `Modules` → `Module Manager`, search for "Promokit Library", and install it.
4. Once `pklib` is installed and enabled, proceed with the regular [theme update](/updates) steps.

#### Hook Theme Settings onto ActionFrontControllerSetVariables

1. Go to `Design` → `Positions`, find the `Hook a Module` button, and click it.
2. On the next page, select the Theme Settings module you wish to attach.
3. Select the hook `ActionFrontControllerSetVariables` to which you will attach the module.
4. Confirm your changes by clicking on the save button.

#### Verify all module hooks

1. Go to `Theme Settings` → `Modules`.
2. Make sure every module is hooked in all of its required hooks.
3. If a module isn't fully hooked, click its "Fix" button to hook it automatically.
:::


import { Image } from '../components/Image';

## Images Settings

Prestashop can accept images of (almost) any size. It automatically reformats the images you upload and saves them according to it’s default image size. Prestashop also resizes the images to generate smaller thumbnails. So the best image size is the largest size that Prestashop uses (for zoomed up images), then the smaller images will be taken care of later.

### Understanding Image Aspect Ratios

The aspect ratio determines the proportional relationship between an image's width and height. For example:

* 10:13 (Alysum default) = Portrait orientation, taller than wide
* 1:1 (Square) = Equal width and height, popular for Instagram-style layouts
* 4:3 = Slightly wider, classic photography ratio
* 3:4 = Portrait orientation, common for fashion products

#### Avoid White Gaps: Match Your Proportions

:::tip
If your source images don't match your configured aspect ratio, PrestaShop will add white padding bars to fill the space.
:::

**The fix:** Always upload images that exactly match your configured aspect ratio. If your theme is set to 1:1, upload square images. If set to 10:13, upload portrait images with that exact ratio.

### How to Change Image Proportions

1. Navigate to **Design → Image Settings**
2. Click the **edit button** of an image type you want to change
3. Set updated **width/height** values to match your desired ratio
4. Save changes
5. **Regenerate existing images** (scroll to bottom of Image Settings page)
   * Select the image types to regenerate
   * Check "Erase previous images"
   * Click "Regenerate thumbnails"

:::info
Regeneration can take several minutes depending on the number of products in your store.
:::

#### Example: Changing from 10:13 to 1:1 (Square)

Current Alysum defaults (10:13 ratio):

```
small_default: 80 × 104
medium_default: 500 × 650
large_default: 1000 × 1300
```

New square dimensions (1:1 ratio):

```
small_default: 80 × 80
medium_default: 500 × 500
large_default: 1000 × 1000
```

### Tips to get nice looking images:

**Images Settings**

* **All product images should have the same aspect ratio.** Consistency is key. Don't mix square images with rectangular ones.
* **Maintain proportion across all image types** If you use 1:1 for large\_default, use 1:1 for small\_default and medium\_default too.

**Source Images**

* **Source images should match your chosen aspect ratio** If using 1:1 ratio, upload square images (1000×1000px). PrestaShop will crop incorrectly proportioned images.
* **Source images should not be smaller than large\_default** Upload images at least as large as your largest image type. Recommended minimum: 1000×1000px for 1:1 ratio.

### Default Image Sizes Reference

Here's a screenshot of the default Alysum image sizes (10:13 ratio):

<Image src="/images/settings.webp" alt="Alysum Prestashop Theme Image Configuration" />


import { Image } from '../components/Image';
import { Video } from '../components/Video';

## Installation

### Installation via browser

Follow the steps below to set up your site template:

* Unzip downloaded archive and find installation .zip file in the `Theme` folder. "Installation zip" file is called `alysum-v.X.X.X.zip`
* Log in to your PrestaShop Back Office and navigate to `Design` → `Theme & Logo`.
* Click the Add new theme button, then browse and upload the zipped theme file.

<Image src="../images/step-1.webp" alt="Alysum Prestashop Theme Image Installation" />

* select .zip file in the "Import from your computer" section

<Image src="../images/step-2.webp" alt="Alysum Prestashop Theme Image Installation" />

Once Prestashop has unpacked and installed the theme, just click to Use this theme button

<Image src="../images/step-3.webp" alt="Alysum Prestashop Theme Image Installation" />

### Installation video tutorial

<Video id="PrfB02YLLi8" title="Alysum Prestashop Theme - Installation Video Tutorial" />

### Install through FTP

<Video id="SFBTEJ31ut8" title="Alysum Prestashop Theme - Installation through FTP" />


import { Video } from '../components/Video';

## The Menu

In Alysum, the main menu is managed entirely through the `Navigation` widget in Creative Elements.

The `Navigation` widget allows you to:

* Add, edit, and remove menu items
* Assign dropdown templates
* Configure layout and alignment
* Control display settings and behavior (hover, click, mobile view, etc.)

### Managing the Dropdown Menu Content

The dropdown menu content is managed using Creative Elements templates. This allows you to fully customize the layout and design of each dropdown item.

:::steps
#### Create a Dropdown Template

1. Go to Creative Elements → Templates
2. Click Add New
3. Create a new template that will contain the content of your dropdown menu (e.g. banners, links, categories, custom layout)
4. Save and publish the template

#### Assign the Template to a Menu Item

1. Open your Header template in Creative Elements
2. Add the Navigation widget (or click on the existing one)
3. Select the menu item you want to modify (or create a new one)
4. In the dropdown template selector, choose the template you created earlier
5. Save the template
:::

Once assigned, the selected template will be displayed as the dropdown content for that specific menu item.

#### Video Tutorial

<Video id="ZgY5V6ya3q4" title="Alysum Prestashop Theme - Menu configuration" />


## Modules

:::info
PrestaShop uses modules to add features or customize how it works. These small programs modify or extend PrestaShop’s functionality, making it easier to use and better suited to a merchant’s needs.
:::

### Modules status overview

| Symbol | Meaning                                             |
| -----: | :-------------------------------------------------- |
|     🟢 | Symfony Form                                        |
|      ❎ | No back office configuration                        |
|     💾 | External Author. Not updatable                      |
|     🔄 | Legacy form. Planning an update of the admin forms. |

| Status | Module Name                                         | Technical Name      |
| :----- | :-------------------------------------------------- | :------------------ |
| 💾     | [Creative Elements](/modules/creativeelements)      | creativeelements    |
| 🔄     | [Promokit AMP](/modules/pkamp)                      | pkamp               |
| 🟢     | [Promokit Captcha](/modules/pkcaptcha)              | pkcaptcha           |
| 🟢     | [Promokit Compare](/modules/pkcompare)              | pkcompare           |
| 🟢     | [Promokit Cookies](/modules/pkcookies)              | pkcookies           |
| ❎      | [Promokit Elements](/modules/pkelements)            | pkelements          |
| 🟢     | [Promokit Extended Product](/modules/pkextproduct)  | pkextproduct        |
| 🟢     | [Promokit Facebook](/modules/pkfacebook)            | pkfacebook          |
| 🟢     | [Promokit Favorites](/modules/pkfavorites)          | pkfavorites         |
| 🟢     | [Promokit Front Panel](/modules/pkfrontpanel)       | pkfrontpanel        |
| 🟢     | [Promokit Instagram](/modules/pkinstagram/)         | pkinstagram         |
| ❎      | [Promokit Library](/modules/pklib)                  | pklib               |
| 🔄     | [Promokit Lookbook](/modules/pklookbook)            | pklookbook          |
| 🟢     | [Promokit Popup](/modules/pkpopup)                  | pkpopup             |
| 🔄     | [Promokit Product Tabs](/modules/pkproducttabs)     | pkproducttabs       |
| 🔄     | [Promokit Size Guide](/modules/pksizeguide)         | pksizeguide         |
| 🟢     | [Promokit Theme Settings](/modules/pkthemesettings) | pkthemesettings     |
| 💾     | [Revolution Slider 6](/modules/revsliderprestashop) | revsliderprestashop |
| 💾     | [Simple Blog](/modules/ph_simpleblog)               | ph\_simpleblog      |


## Pages

### Home

The home page is the first impression visitors have of your store.
Setting it up is straightforward with Creative Elements:

#### Quick Setup

1. Create your template: Use the `Creative Elements` module to design your home page layout with widgets like sliders, product showcases, banners, and more.
2. Assign the template: Navigate to `Theme Settings` → `Home Page` and select your newly created template from the dropdown list.
3. Save and preview: Click save and view your store's front page to see the changes in action.

#### Mobile Home Page

To provide an optimal mobile experience, you can create a separate mobile-specific home page:

1. Create a mobile-optimized template in Creative Elements
2. Go to `Theme Settings` → `Home Page` → `Mobile Home Page Template`
3. Select your mobile template from the list

### Category

The category page displays your products organized by category. You have full control over how this page looks and functions.

#### Layout Options

Choose between two approaches based on your needs:

##### Option 1: Native Theme Layout

Use the theme's built-in category page design with pre-configured product grids and filters.

Setup:

1. Go to `Theme Settings` → `Category Page`
2. Select `Native Theme Layout` for the `Category Page Template` field
3. Click `Save`

##### Option 2: Custom Layout with Creative Elements

Build a completely custom category page using drag-and-drop widgets for unique layouts, custom banners, product showcases, and more.

Setup:

1. Go to `Theme Settings` → `Category Page`
2. Select a template from the list of available options in the `Category Page Template` field
3. Click `Save`

### Product

The product page is where customers view product details, images, prices, and make purchase decisions. You have full control over how this page looks and functions.

#### Layout Options

Choose between two approaches based on your needs:

##### Option 1: Native Theme Layout

Setup:

1. Go to `Theme Settings` → `Product Page`
2. Select `Native Theme Layout` for the `Product Page Template` field
3. Click `Save`

##### Option 2: Custom Layout with Creative Elements

Build a completely custom product page using drag-and-drop widgets for unique layouts, custom tabs, enhanced image galleries, and more.

Setup:

1. Go to `Theme Settings` → `Product Page`
2. Select a template from the list of available options in the `Product Page Template` field
3. Click `Save`


import { Image } from '../components/Image';

## Performance

:::info
This section contains tips to help improve your shop’s server performance. We recommend enabling these cache options only after completing all necessary configuration steps.
:::

The settings below are recommended for use in a production environment.

### Smarty settings

<Image src="../images/smarty.webp" alt="Alysum Prestashop Theme Smarty Settings" />

* `Template cache` - "Never recompile template files". This setting prevents PrestaShop from checking and recompiling template files on every request, improving performance.
* `Cache` - "Enabled"
* `Clear cache` - "Never clear cache files". Do not check if a file has changed, which improves performance

### Debug settings

<Image src="../images/debug.webp" alt="Alysum Prestashop Theme Debug" />

* `Debug Mode` - No.\
  By enabling this option, technical error messages will be visible. It is useful when you are being helped by someone who does not have access to your shop but who needs to know what is going on technically.

### Media. Combine, Compress and Cache (CCC)

<Image src="../images/CCC.webp" alt="Alysum Prestashop Theme CCC Settings" />

* `Smart cache for CSS` - On. Combine and compresse CSS files
* `Smart cache for JavaScript` - On. Combine and compresse JS files
* `Apache optimization` - On. This setting will change your web server's configuration file in order to make it more efficient for CCC.

### Technical details

[Performance detailed description](https://devdocs.prestashop-project.org/9/scale/optimizations/)

### Additional Optimization

[Optimize your PrestaShop performance](https://medium.com/@lmeyer./optimize-prestashop-performance-again-798166ac5515)


import { Image } from '../components/Image';

## Requirements

To install the theme, you must have a working version of PrestaShop already set up. For detailed instructions on installing PrestaShop, please refer to the [Prestashop Documentation](https://doc.prestashop.com/display/PS17/PrestaShop+1.7+documentation)

:::info
The theme’s requirements are the same as those of the Prestashop platform.
:::

### PHP configuration

* `PHP version` : min 7.4 for PS8. min 8.1 for PS9
* `memory_limit` : should be at least 256M (512M recommended)
* `post_max_size` : should be at least 1M
* `file_max_upload_size` : 16M
* `allow_url_fopen` : ON
* `allow_url_include` : OFF
* `register_globals` : OFF

### Apache modules

* `mod_rewrite` : ON
* `mod_security` : OFF
* `mod_auth_basic` : OFF

### [Must-have PHP extensions](https://devdocs.prestashop.com/1.7/basics/installation/system-requirements/)

* `CURL` The [Client URL extension](https://php.net/manual/en/book.curl.php) is used to download remote resources like modules and localization packages.
* `DOM` The [DOM extension](https://php.net/manual/en/book.dom.php) is needed to parse XML documents. PrestaShop uses it for various functionalities, like the Store Locator. It is also used by some modules, as well as the pear\_xml\_parse library.
* `Fileinfo` The [File information extension](https://php.net/manual/en/book.fileinfo.php) is used to find out the file type of uploaded files.
* `GD` The [GD extension](https://php.net/manual/en/book.image.php) is used to create thumbnails for the images that you upload.
* `Iconv` The [ICONV extension](https://www.php.net/manual/en/book.iconv.php) is used to convert character sets.
* `Intl` The [Internationalization extension](https://php.net/manual/en/book.intl.php) is used to display localized data, such as amounts in different currencies.
* `JSON` The [JSON extension](https://www.php.net/manual/en/json.installation.php) is used to manage JSON format.
* `Mbstring` The [Multibyte string extension](https://www.php.net/manual/en/book.mbstring.php) to perform string operations everywhere.
* `OpenSSL` The [OpenSSL extension](https://www.php.net/manual/en/book.openssl.php) is used to improve security.
* `PDO` The [PHP Data Objects extension](https://www.php.net/manual/en/book.pdo.php) is used to connect to databases.
* `PDO (MySQL)` The [PDO\_MYSQL driver](https://www.php.net/manual/en/ref.pdo-mysql.php) is used to connect to MySQL databases.
* `SimpleXML` The [SimpleXML extension](https://www.php.net/manual/en/intro.simplexml.php) is used to manage XML files.
* `Zip` The [Zip extension](https://php.net/manual/en/book.zip.php) is used to expand compressed files such as modules and localization packages.

### Permissions

* Permissions for all `files` should be set to `644`
* Permissions for all `folders` should be set to `755`

### How to Ensure Your Server Meets PrestaShop’s Requirements

**1.** If you have already installed the Alysum theme, navigate to the `Theme Settings` → `Welcome` tab and check the `System Status`

<Image src="../images/ts-status.webp" alt="Alysum Prestashop Theme Server Requirements" />

**2.** You can use Prestashop's official [system requirements tool](https://github.com/PrestaShop/php-ps-info/) to easily check if your environment fulfills PrestaShop’s requirements. Here’s how:

* Download the [latest version from GitHub](https://github.com/PrestaShop/php-ps-info/releases).
* Extract the zip file.
* Upload the `phppsinfo.php` file to your server and put it inside your current shop’s directory or the one where you intend to install it.
* Open it up on your browser (`http://your-domain.com/phppsinfo.php`).
* Type in the login and password if prompted (use `prestashop` for both).

**3.** Please also check the `Information` section under `Advanced Parameters` in your BO. All parameters should be marked as `OK` as shown below:

<Image src="../images/ps-status.webp" alt="Alysum Prestashop Theme Server Requirements" />


## Support

If this documentation doesn’t answer your questions, please contact us via the Support Helpdesk on the [Theme's Support Page](https://support.promokit.eu/index.php?project=3)

We are located in the GMT +1:00 time zone and respond to all inquiries within 24 hours on weekdays. In rare cases, the response time may extend to 48 hours. Please note that during holiday seasons, response times may be longer.

:::info
While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.
:::

### Rate our theme

:::success
If you’re enjoying our theme and service, we’d really appreciate your support! 🌟\
Head over to your [Themeforest Profile](https://themeforest.net/downloads) and feel free to leave a rating and review for our template. Your feedback means the world to us! 😊\
Thank you so much in advance!
:::


import { SVGIconsList } from '../components/SVGIconsList'

## SVG Icons

SVG Sprite is a technique used to improve the performance of web pages by combining multiple SVG images into a single file. This file is then referenced to display different icons or images from within the sprite.

### Change an icon

For example you want to change "facebook" icon.

* Open the file `/themes/alysum/assets/img/lib.svg`
* find `facebook` icon, it looks like this:

```
<symbol id="facebook" viewBox="0 0 288.861 288.861">
    <path d="M167.172,288.861h-62.16V159.347H70.769v-59.48h.....">
</symbol>
```

* Find a new icon from a source like: flaticon.com
* Download the icon and open the SVG file in any text editor.
* Copy the content inside the `<svg>`...`</svg>` tags
* Paste the copied code into the `lib.svg` file inside the corresponding `<symbol>` tag, e.g.:\
  `<symbol id="facebook" viewBox="0 0 288.861 288.861">...</symbol>`
* Copy SVG dimensions\
  `<svg viewBox="0 0 27.965 27.965">`
* Update the viewBox dimensions:\
  `<symbol id="facebook" viewBox="0 0 27.965 27.965">`

Now you can use the icon code anywhere in the theme, like this

```html
{include file='components/svg-icon.tpl' id='facebook'}
```

### Icons List

<SVGIconsList />


import { Button } from 'vocs/components'
import { Image } from '../components/Image';
import { Video } from '../components/Video';

## Theme and Modules Translation

### Translation Catalog

:::info
Translation Catalog lists all wordings in the theme with their translation domains, helping you quickly find and modify translations in PrestaShop.
:::

<Button href="https://alysum.promokit.eu/promokit/documentation/translations" variant="accent">Translation Catalog</Button>

On that page you will be able to find translation domain like this "Modules.Pkelements.Shop". That means the phrase belongs to the module Pkelements and available to translate in the `Modules` → `Pkelements`.

### General overview

The main tool on the `Translations` page is found in the `Modify translations` section.
There, you can add translations and fully customize any text as needed. To access it, go to `International` → `Translations`.

<Image src="../images/trans-settings.webp" alt="Alysum Prestashop Theme Translation" />

Select the section of the current translation you wish to edit:

1. `Back Office Translations` : Text visible to you and your team in the store’s administration panel.
2. `Theme Translations` : Text visible to customers while browsing your store.
3. `Installed Modules Translations` : Content from installed modules. Modules that are available but not installed won’t appear.
4. `E-mail Translations` : Terms used in the default email templates.

### Modules translations

To translate a specific module, select `Installed modules translations`, then choose the module you want to edit.
This will open a new page displaying all translatable content and available strings for that module.

### Form Fields Translations

1. Navigate to `Localization` → `Translations`.
2. Under `Type of translation` select `Field name translations.`
3. Under `Your language` choose the language you want to modify.

### Translation video tutorial

<Video id="iEsfPX_Q1-A" title="Alysum Prestashop Theme - Translation Tutorial" />


import { Callout } from 'vocs/components'
import { Video } from '../components/Video';

## Updates

### Preparing

:::warning
Make sure the module [Promokit Library](/modules/pklib) is installed and enabled. If you're updating from an older theme version then 9.1.0 that didn't include `pklib`, see the FAQ: [Updating an old theme version that doesn't have pklib](/faq#updating-an-old-theme-version-that-doesnt-have-pklib).
:::

1. **Make a backup** of your shop.
2. Navigate to **`Advanced Parameters → Performance`**, and set:
   * **`Template compilation`** to **`Force compilation`**
   * **`Cache`** to **`No`**
3. Go to **`Theme Settings → Welcome`** tab.
4. Enter your **theme `Purchase ID`** in the designated field and save.
5. Disable or clear third-party cache (e.g. server cache, performance modules). After the theme update, the cache must be cleared manually, as third-party caching is not handled automatically by the theme update process.

### Automatic Update

1. Go to **`Theme Settings → Welcome`** tab.
2. Click **`Check for Updates`** to see if any updates are available.
3. Click **`Run Update`** and wait for the page to reload.
4. You should see the message: **`The update was installed successfully.`**
5. **Done!** Your theme is now updated.

#### Video Tutorial

<Video id="Xq0zDhwfPK0" title="Alysum Prestashop Theme - Automatic Theme Update" />

### Semi-Automatic Update

<Callout type="info">
  This option has been available since version 9.3.0.
</Callout>

This method allows you to place the update archive directly into your theme’s `upload` folder and trigger the update from the back office.

1. Locate the update archive you received (X.X.X.zip) and upload it to your `/PRESTASHOP_ROOT/upload/` folder
2. In your PrestaShop back office, go to **`Theme Settings → Welcome`** and click **`Update`** (or **`Run Update`**).
3. Wait for the update to complete and the page to reload.\
   You should see the message: **`The update has been installed successfully.`**
4. **Done!** Your theme is now updated.

<Video id="6ydpFZcNtCY" title="Alysum Prestashop Theme - Semi-Automatic Update" />

### Manual Copying of Update Files

Follow the preparation steps above (backup and performance settings), then continue with the manual update:

1. Open the downloaded archive, go to the **`Updates`** folder, and unzip the update archive.
2. Upload the extracted **`themes`** and **`modules`** folders to the root of your PrestaShop installation, and **replace** the existing files when prompted.
3. **Done!** Your theme is now updated.

#### Video Tutorial

<Video id="LJPgCAFe1Is" title="Alysum Prestashop Theme - Manual Update" />


import { ImageDescriptionGrid } from '../components/ImageDescriptionGrid';

## What’s In The Box

By purchasing the Alysum Prestashop Theme, you will receive the following components:

<ImageDescriptionGrid
  items={[
  {
    title: 'Theme Package',
    image: '/svg/box/package.svg',
    description: 'Installable files for both the main and child themes.',
  },
  {
    title: 'Documentation',
    image: '/svg/box/documentation.svg',
    description: 'Guides and instructions for effective theme setup and configuration.',
  },
  {
    title: 'Readme File',
    image: '/svg/box/readme.svg',
    description: 'Useful links to theme resources and related information.',
  },
  {
    title: 'Modules List',
    image: '/svg/box/list.svg',
    description: 'The list of modules that is coming with the theme',
    link: '/modules'
  },
  {
    title: 'Docker Archive',
    image: '/svg/box/docker.svg',
    description: 'Files that help you deploy the theme within Docker environments.',
    note: 'On demand',
  },
  {
    title: 'PSD Files',
    image: '/svg/box/psd-files.svg',
    description: 'Adobe Photoshop design files for customizing visual elements.',
    note: 'On demand',
  },
]}
/>


import { Video } from '../../components/Video';

## Creative Elements

Alysum includes the Creative Elements module provided by [Webshopworks](https://pagebuilder.webshopworks.com)

The version bundled with the theme "In-stock" is the official version available for theme developers and already includes all features required to use the Alysum demo content and theme functionality.

All demo pages showcased in Alysum are built using the included In-stock version, so no additional purchases are required to recreate the demo layouts or use the theme as intended.

In addition, Alysum extends Creative Elements with 50+ custom widgets developed specifically for seamless integration with the theme.

:::tip
Please note that the Alysum package does not include a license key for the Creative Elements Pro version. You only need to purchase the Pro version separately if you specifically require one of its additional premium features outside the scope of the Alysum demos and bundled functionality.
:::

### Overview

:::info
Edit your header, footer, home page, CMS pages, product pages, category pages and from the front office of your PrestaShop store.
:::

Complete guide how to build a page with Creative Elements from scratch

<Video id="Jb12NUgdmko" title="Alysum Prestashop Theme - Creative Elements complete guide" />

:::info
A similar configuration applies to other blocks, such as the header, footer, category/product page, etc...
:::

### Multilanguage Configuration

1. Go to `Theme Settings` → `Home Page`.
2. Select the `displayHomeBuilder` hook.
3. Go to `Creative Elements` → `Content Anywhere`.
4. Create a new layout (or edit an existing one) and assign it to the `displayHomeBuilder` hook. Then, save.
5. Click Edit and find the language icon in the bottom left corner.

<Video id="B5VgKsJf-_U" title="Alysum Prestashop Theme - Multilanguage Configuration" />

### Promokit Widgets

[The full module description can be found here](/modules/pkelements)


## Simple Blog (ph\_simpleblog)

### Overview

Blog for PrestaShop is a powerful, easy-to-use blogging solution built specifically for PrestaShop stores. Designed to help merchants create and manage rich content without relying on external platforms like WordPress, this module enables you to publish blog posts, organize them into categories, and enhance your store with SEO-friendly content directly within your PrestaShop back office.

### Configuration

[Full blog documetation](https://alysum.promokit.eu/promokit/documentation/blog/)


import { Image } from '../../components/Image';
import { Video } from '../../components/Video';

## Promokit AI Agent (pkaiagent)

### Overview

**Promokit AI Agent** integrates a third-party chat/assistant (Tidio.com) into the storefront and provides lightweight visitor identification so the assistant can receive contextual information (visitor id, cart, product and customer data).

### Configuration

<Image src="../images/modules/pkaiagent/pkaiagent.webp" alt="Alysum Prestashop Theme AI Agent Configuration" />

* **Public Key** — the module setting that contains the Tidio widget key/identifier. To get the Public Key you have to login to your [tidio panel](https://www.tidio.com/panel/dashboard). Navigate to the Chat Page, and find the code in the Chat Page URL

How to get the Public Key:

<Video id="dlW9DiHeuqU" title="Alysum Prestashop Theme - AI Agent Configuration" />

Defaults are read from `config/default.json` and persisted in the module DB (DB key in `src/Db/Db.php`).

### Used Hooks

The module uses the following hooks:

* `displayHeader` — injects the `pkaiagent` JS config and registers scripts. If no `public_key` is configured, it registers only the module stylesheet (`views/css/styles.css`).
* `displayFixedBottomRight` — renders a small button (via `views/templates/hook/button.tpl`) to place the assistant on the page.

### Frontend behaviour (JS)

`views/js/scripts.js` performs these tasks:

* Builds a JS config object with `public_key` (app key), `user_id`, `user_id_pretty`, and `exchange_rate`, plus customer info when available. This object is exported as `pkaiagent` via `Media::addJsDef`.
* Loads the Tidio script from `https://code.tidio.co/<PUBLIC_KEY>.js` only when a `public_key` is present.
* On Tidio ready, it prepares `visitorData` containing page meta (type, title, description), cart summary, customer info (logged status, email, name), and product or category info when applicable (extracted from JSON-LD when available).
* Sets visitor data (`tidioChatApi.setVisitorData`) and custom styles for the chat button.


import { Button } from 'vocs/components'

## Google AMP

[AMP is an open-source library](https://amp.dev/) developed by Google that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.

### AMP Goals

* Reduce Load Time
* Reduce [Bounce Rate](https://en.wikipedia.org/wiki/Bounce_rate)
* Improve [Mobile UX/UI](https://en.wikipedia.org/wiki/User_experience_design)
* Improve Search Results in Google

### AMP FAQ's

[https://amp.dev/support/faq/overview/](https://amp.dev/support/faq/overview/)

### Do I need AMP?

[https://www.wordstream.com/blog/ws/2020/11/06/google-amp](https://www.wordstream.com/blog/ws/2020/11/06/google-amp)

### Complete Google AMP module documentation

<Button href="https://alysum.promokit.eu/promokit/documentation/amp" variant="accent">Documentation</Button>


import { Image } from '../../components/Image';

## Promokit Captcha (pkcaptcha)

### Overview

**Promokit Captcha** integrates Google reCAPTCHA to protect forms from spam. The module supports both reCAPTCHA v2 and v3.
The default configuration shipped with the module uses reCAPTCHA v3.

### Configuration

To start using reCAPTCHA, you need to [sign up](https://developers.google.com/recaptcha) for an API key pair for your site.
The key pair consists of a site key and secret key. The site key is used to invoke reCAPTCHA service on your site or mobile application.
The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user's response.

<Image src="../images/modules/pkcaptcha/pkcaptcha.webp" alt="Alysum Prestashop Theme Captcha module Configuration" />

* **reCaptcha Version** — Choose which reCAPTCHA API to use: `v2` (explicit widget) or `v3` (token-based).
* **Public key (Site key)** — Your site key supplied by Google reCAPTCHA; used in client-side widget calls.
* **Private key (Secret key)** — Your secret key supplied by Google; used only server-side to verify tokens. Keep this private.
* **Force Captcha language** — Optional language code (e.g. `en-GB`). Leave empty to autodetect.
* **Use Captcha for contact form** — Toggle to enable captcha protection on the contact form.
* **Use Captcha for account creation** — Toggle to enable captcha on customer registration (account creation).

Defaults are read from `config/default.json` and persisted in module configuration (DB key `PKCAPTCHA_CONFIG`).

### Used Hooks

The module registers and uses these hooks:

* `displayHeader` — to inject JS config and register the module JS files.
* `actionContactFormSubmitCaptcha` — system hook executed when registering a new account (AuthController override).
* `actionContactFormSubmitBefore` — system hook executed before the contact form `sendMessage` (contactform override).
* `actionBeforeFormSubmit` — another system hook used as a general pre-submit point.

### Overrides

The module includes two overrides (these are required for the module's flow):

* `override/controllers/front/AuthController.php` — injects `actionContactFormSubmitCaptcha` when handling registration (`submitCreate`).
* `override/modules/contactform/contactform.php` — injects `actionContactFormSubmitBefore` before `sendMessage()`.

Note: Overrides must be enabled on the shop

### Frontend behaviour (JS)

The module outputs a JS object via `Media::addJsDef` under `pkcaptcha` with the following properties:

* `sitekey` — the public key
* `version` — `2` or `3`
* `lang` — optional forced language
* `contactform` — whether contact form captcha is enabled
* `createaccount` — whether account creation captcha is enabled

The included script `views/js/scripts.js` does:

* Detects if there are matching forms on the page and whether the corresponding feature is enabled.
* Loads the Google reCAPTCHA script only when needed:
  * For v3: loads `https://www.google.com/recaptcha/api.js?render=SITEKEY&size=compact`
  * For v2: loads `https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit[&hl=LANG]`
* v2 behaviour: creates a container with id `captcha-box` and appends it into form target areas.
* v3 behaviour: intercepts form submit, requests a token (`grecaptcha.execute`) and injects a hidden input named `g-recaptcha-response` with the token, then submits the form.

Forms / selectors targeted by the script (see `views/js/scripts.js`):

* `.contactform-captcha` — appends captcha to `.form-fields` (contact form)
* `.ce-contact-form` — appends captcha to `.elementor-form-fields-wrapper` (Creative Elements contact form)
* `.js-customer-form` — account creation form, target `section` (create account)

The created hidden field name for server validation is `g-recaptcha-response` (this is what the server code reads).

### Dependency

The module depends on the `contactform` module. The dependency is declared in the main module class.

### Security

* Keep your `Private Key` secret and never expose it in client-side code. Only `Public Key` is used on the client.
* Consider using reCAPTCHA v3 score thresholds and action checking for improved spam filtering.


import { Image } from '../../components/Image';

## Promokit Comparison (pkcompare)

### Overview

Promokit Comparison is a smart way to allow your customers to choose a product by comparing similar products based on price, features, etc...

### Configuration

<Image src="../images/modules/pkcompare/pkcompare.webp" alt="Alysum Prestashop Theme Compare module Configuration" />

#### General

* **Max products to compare** — maximum number of products allowed in comparison.

#### Category Page

* **Product Listing Page "Do Compare" Button** — show "Do Compare" button in the product listing top bar.
* **Product Listing Page "Add to Compare" Button** — show "Add to Compare" button on each product miniature in category/listing pages.

#### Product Page

* **Product Page "Add to Compare" Button** — show "Add to Compare" button on the product page.
* **Display Icon + text "Add to Compare"** — show icon and text instead of icon-only for add/remove buttons.

#### Auto Compared

* **"Auto Compared" Products Block** — enable automatic quick-compare block based on price similarity.
* **"Auto Compared" Block Position** — where to display the auto-compare block (product tabs or product footer).

Defaults are stored in `config/default.json` and the module configuration is persisted under DB key `PKCOMPARE_CONFIG`.

### Using hooks in Smarty templates

Below are examples of how to place the module hooks inside your theme's Smarty templates.

Insert these into the indicated files (or your theme equivalents) to display "Add to compare" button on Product Listing page:

`/themes/YOUR_THEME/templates/catalog/_partials/miniatures/product.tpl`

```
{hook h='displayProductButton' product_id=$product.id}
```

To display "Add to compare" button on Product Page
`/themes/YOUR_THEME/templates/catalog/product.tpl`:

```
{hook h='displayMoreButtons' product_id=$product.id}
```

### Used Hooks

* `actionAdminControllerSetMedia`: Loads module admin CSS when the module admin controller is active.
* `displayHeader`: Enqueues frontend JS/CSS and exposes `pkcompare` JS config.
* `displayProductListTop`: Renders the "Do Compare" button in product listing top bar and provides the link to the compare page.
* `displayMoreButtons`: Renders the "Add to Compare" button area on the product page (used by product page templates).
* `displayProductButton`: Renders the "Add to Compare" button on product miniatures (category/listing templates), accepts `product_id` param.
* `displayFooterProduct`: Injects the auto-compare block into the product footer.
* `displayProductExtraContent`: Provides a ProductExtraContent tab entry (Quick Compare).
* `moduleRoutes`: Exposes module-specific routes.


import { Image } from '../../components/Image';

## Promokit GDPR Cookies (pkcookies)

### Overview

Promokit GDPR Cookies helps you manage website cookies effortlessly and ensures GDPR compliance. The module provides a customizable cookie consent banner that allows your visitors to manage their cookie preferences across different categories:

* Strictly Necessary
* Functionality
* Tracking
* Targeting cookies

The module automatically detects scripts loaded on your store with the native assets manager, giving you full control over which scripts are loaded based on customer consent.

### Configuration

<Image src="../images/modules/pkcookies/pkcookies.webp" alt="Alysum Prestashop Theme Captcha module Configuration" />

#### Banner Type

Choose from four different banner display styles to match your website design:

* **Simple** — A compact banner that appears at the bottom of the page with essential cookie information and accept/decline buttons.
* **Headline** — A banner with a prominent headline that draws attention while maintaining a clean design.
* **Interstitial** — A modal-style banner that appears in the center of the screen, requiring user interaction before proceeding.
* **Standalone (Full Page Banner)** — A full-page overlay that ensures users make a conscious decision about their cookie preferences.

#### Palette

Select the color scheme for your cookie banner:

* **Light** — Light background with dark text, suitable for most website designs.
* **Dark** — Dark background with light text, ideal for websites with dark themes.

#### Cookie Lifetime

**Cookie Lifetime** — Set the duration (in days) for how long the user's cookie preferences will be remembered. Default is 30 days. After this period expires, the banner will be displayed again to the user.

#### Show "Manage Cookies" Button

**Show "Manage Cookies" button** — When enabled, displays a floating button on the website that allows users to open the cookie settings at any time and modify their preferences. This button appears as a cookie icon fixed to the bottom right of the screen.

#### Policy Link

**Policy Link** — Enter the full URL to your website's privacy policy or cookie policy page. This link will be displayed in the cookie banner, allowing users to learn more about how you use cookies.

Example: `https://yourwebsite.com/privacy-policy`

### Cookie Categories

The module organizes cookies into four categories based on their purpose. You can assign different scripts/modules to each category:

#### Strictly Necessary Scripts

These are essential cookies required for the website to function properly. Users cannot disable these cookies as they are necessary for basic site operations such as:

* Account login and authentication
* Shopping cart functionality
* Security features
* Basic website functionality

**Configuration:** Select the scripts/modules that are essential for your website operation. These scripts will always load regardless of user preferences.

#### Functionality Scripts

These cookies enable enhanced functionality and personalization features. They do not strictly break core site functionality when disabled, but disabling them may remove convenience features.

* **Examples:** remembering user language, storing favorites items (`pkfavorites`), product comparison features (`pkcompare`), UI customizations, chat widgets and customer support tools.
* **Configuration:** Assign module scripts or registered asset names to the `Functionality` category. These scripts are typically loaded by default but may be blocked if the user declines optional cookies.

#### Tracking Scripts

Tracking cookies collect information about how visitors use your website and are used for analytics and performance monitoring.

* **Examples:** Google Analytics, visitor behavior tracking, performance monitoring, heatmap tools, session recording.
* **Configuration:** Place analytics and monitoring scripts under `Tracking`. These scripts are blocked by default and only enabled when the user explicitly consents to tracking cookies.

#### Targeting Scripts

Targeting cookies are used for advertising, remarketing and personalization of ads.

* **Examples:** Google AdSense, Google Ads remarketing, Facebook Pixel, retargeting campaigns, affiliate tracking.
* **Configuration:** Add advertising and marketing scripts to `Targeting`. These scripts are blocked until the user gives explicit consent for targeting cookies.

### Used Hooks

* `displayHeader` — Loads frontend CSS/JS and enforces script loading rules based on consent.
* `displayBackOfficeHeader` — Loads admin panel assets when needed.
* `displayFixedBottomRight` — Renders the floating "Manage Cookies" button.

### Best Practices

* **Categorize correctly** — only essential scripts in `Strictly Necessary`.
* **Keep privacy policy updated** — ensure the linked policy reflects actual cookie usage.
* **Test blocking** — verify tracking/targeting scripts do not run when declined.

### Troubleshooting

**Banner not appearing**:

1. Clear browser cookies and cache.
2. Clear PrestaShop cache (Back Office → Advanced Parameters → Performance).
3. Ensure the module is installed and enabled.
4. Check browser console for JS errors.

**Scripts still load after decline**:

1. Verify scripts are assigned to correct categories in module settings.
2. Make sure asset names in the dropdown match registered script identifiers.
3. Clear caches and test in an incognito window.

### Compliance Notes

This module helps by blocking non-essential scripts until consent is provided. You remain responsible for:

* Correctly categorizing cookies
* Maintaining an accurate privacy policy
* Ensuring compliance with local regulations


## Promokit Widgets (pkelements)

### Overview

Promokit Widgets is a flexible widgets module that provides a large set of ready-made content blocks for pages, headers, product listings and miniatures. Use widgets to build rich landing sections, product pages and category layouts without custom development.

### Configuration

:::info
The module does not have configuration.
:::

### Widgets List

#### General

* `Blog` — posts from the Simple Blog module
* `Brands` — list of brands
* `Categories` — list of categories
* `Contact Form`
* `Daily Deal` — products with discount
* `Image` — custom image with title and description
* `Image Carousel` — carousel of images
* `Image Hotspot` — interactive points that reveal info on hover
* `Instagram Scraper` / `Instagram Simple` — Instagram feed widgets
* `Links` — list of PrestaShop or custom links
* `Newsletter` — subscription form
* `Prestashop Module` — render a PrestaShop module inside a widget area
* `Products` — product lists with multiple layout options
* `Revolution Slider` — advanced slider with animations
* `Suppliers` — list of suppliers
* `Testimonials` — customer reviews block
* `Title` — simple heading/text element

#### Header widgets

* `Advanced Search` — search bar with filters
* `Compare` — compare feature/button
* `Currencies` — currency switcher
* `Custom Tpl` — render a custom `.tpl` file
* `Favorites` — user's favorite products
* `Languages` — language switcher
* `Logo` — store logo
* `My Account` — account link
* `Navigation` — menu/navigation widget
* `Shopping Cart` — cart summary
* `Sign In` — login button/form
* `Watch List` — recently viewed products

#### Category page widgets

* `Category Description`
* `Category Image`
* `Category Products`
* `Category Title`
* `Product Filter`
* `Subcategories`

#### Product page widgets

* `Product Accessories`
* `Product Brand`
* `Product Buy block` — add-to-cart, favorites, compare and quantity
* `Product Category`
* `Product Comments`
* `Product Crossellings`
* `Product Description`
* `Product Footer` — area for modules hooked to product footer
* `Product Image`
* `Product Price`
* `Product Tabs`
* `Product Title`
* `Products in the same category`
* `Reassurance` — guarantees / badges
* `Viewed Products`

#### Product miniature widgets

* `Brand`
* `Buttons` — action buttons (Add to Cart, Quick View, Add to Favorites, Add to Compare)
* `Countdown` — special price countdown
* `Description`
* `Image`
* `Labels` — New / Sale badges
* `Price`
* `Reviews`
* `Title`
* `Variations` — sizes, colors

### Used Hooks

* `actionCartSave` — Triggered after a cart is saved; used to refresh or clear cart-related widget caches and sidebars.
* `actionCategoryAdd` — Fired when a category is created; used to refresh category listings and related widgets.
* `actionCategoryDelete` — Fired when a category is removed; used to clear caches and remove references in widgets.
* `actionCategoryUpdate` — Fired when a category is updated; used to refresh category-related widgets and menus.
* `actionProductAdd` — Fired after a product is added; used to update product lists, feeds and caches.
* `actionProductDelete` — Fired when a product is deleted; used to remove product entries from widgets and clear caches.
* `actionProductUpdate` — Fired when a product is updated; used to refresh product widgets (price, labels, availability).
* `actionCompareUpdate` — Fired when the product compare list changes; used to update compare-related displays or caches.
* `actionFavoritesUpdate` — Fired when favorites/wishlist changes; used to refresh favorites widgets and caches.
* `actionViewedUpdate` — Fired when viewed products list changes; used to update "recently viewed" widgets and caches.
* `actionClearCompileCache` — Fired when PrestaShop clears compiled templates; used to also clear widget caches.
* `actionCreativeElementsInit` — CreativeElements integration hook; initializes CE-related elements and editor integration.
* `actionAdminControllerSetMedia` — Loads admin CSS/JS when module's admin controllers are active (used during install/import flows).
* `displayBeforeBodyClosingTag` — Renders end-of-page widget areas and stacked sidebars before closing `</body>`.
* `displayBackOfficeHeader` — Enqueues admin panel assets when editing module settings or using module admin screens.
* `displayMiniature` — Renders product miniature widgets; output is cached per-product.
* `displayHeader` — Enqueues frontend JS/CSS, initializes widget JavaScript and exposes any runtime JS config needed by widgets.


import { Image } from '../../components/Image';

## Promokit Extended Product (pkextproduct)

### Overview

Promokit Extended Product extends product miniatures by allowing store admins to add per-product presentation overrides: larger miniature sizes (2x, 3x), custom product links, and custom images that can be injected into product listings (useful for banners or promotional placements).

The module is intended to be theme-agnostic but requires selector configuration when using the JavaScript injection method so it can find product miniatures in the DOM.

### Configuration

#### Module Settings

<Image src="../images/modules/pkextproduct/module-settings.webp" alt="Alysum Prestashop Theme Extended Products module Configuration" />

* **Allowed Pages** — Select which product listing pages should apply extended product configuration (category, manufacturer, search, etc.).
* **Injection Method** — Choose how the module applies overrides:
  * **JS Method** — Module injects overrides client-side using JavaScript. You must configure CSS selectors/classes that identify your product miniature structure. Defaults target the Classic theme.
  * **Server / Template Method** — If your theme supports module hooks or you prefer server-side rendering, override templates or use hook templates to render extended product markup.
* **Miniature Class** — CSS class of the product miniature element (default for Classic: `.js-product-miniature`).
* **Parent Miniature Class** — Optional parent selector for miniature items when the miniature is wrapped inside another element.

#### Product-level settings

* **Horizontal Size** — widen the miniature by `2x` or `3x`.
* **Vertical Size** — increase miniature height by `2x` or `3x`.
* **Custom Link** — override the product URL to point elsewhere (campaign, landing page).
* **Custom Image** — override the product miniature with a custom image (useful for promotional banners).

<Image src="../images/modules/pkextproduct/product-settings.webp" alt="Alysum Prestashop Theme Extended Products module Configuration" />

### How it works (JS injection)

When the **JS Method** is selected the module searches the page for product miniatures using the configured selectors. For each matched item the module can:

* Apply a larger horizontal or vertical size (2x / 3x) via CSS classes.
* Replace the product link with a custom URL provided in the product's extra fields.
* Replace the product miniature content entirely with a custom image (banner) when specified.

Example theme snippet showing how product miniatures are expected to be structured (Classic-theme style):

```
{block name='product_miniature_item'}
    <div class="product"> <!-- Parent Miniature Class -->
        <article class="product-miniature js-product-miniature"> <!-- Miniature Class -->
            <div class="thumbnail-container"> <!-- Product Miniature Element -->
                ...
            </div>
        </article>
    </div>
{/block}
```

#### Visual examples

* Horizontal size example: ![Horizontal](../images/modules/pkextproduct/horizontal.svg)
* Vertical size example: ![Vertical](../images/modules/pkextproduct/vertical.svg)

### Notes for integrators

* If your theme significantly departs from Classic markup you should update the `Miniature Class` and `Parent Miniature Class` settings so the module's JS can find items.
* For server-side integration prefer overriding the theme templates and using the module-provided partials where available.

### Changelog

#### v1.0.1

* Fixed multistore image names
* Added an option to change category page style

#### v1.0.0

* Initial release


import { Image } from '../../components/Image';

## Facebook Bundle (pkfacebook)

Facebook bundle gives you the most popular Facebook features in one module. Available options: **Facebook Comments, Facebook Chat, Facebook Login, WhatsApp Chat**.

### General

<Image src="../images/modules/pkfacebook/fb-general.webp" alt="Alysum Prestashop Theme Facebook module Configuration" />

In the **General** tab you must add two keys necessary to make the module work:

* **App ID** — the ID of your Facebook Application. Used by Facebook Login and Facebook Comments. Register an application at [https://developers.facebook.com](https://developers.facebook.com) and use the created App ID here.
* **Page ID** — the ID of your Facebook Page (used by Facebook Chat). If you don't have a page yet, create one and get your Page ID via a service like [https://findmyfbid.com](https://findmyfbid.com).

### Login

<Image src="../images/modules/pkfacebook/fb-login.webp" alt="Alysum Prestashop Theme Facebook module Configuration" />

* **Login Button Parent Element** — specify the CSS class or ID of the element in your theme where the Facebook Login button should be displayed. Add that selector in the module settings so the module can inject the login button into the correct place.

### Comments

<Image src="../images/modules/pkfacebook/fb-comments.webp" alt="Alysum Prestashop Theme Facebook module Configuration" />

* **Comments Location** — Product Comments can be displayed either inside Product Tabs or at the bottom of the page in the **Product Footer**. This option controls placement and the module uses these hooks for the chosen location: `displayFooterProduct`, `displayProductExtraContent`.
* **Admins** — Grant moderation privileges to Facebook accounts by providing their Facebook profile IDs (comma-separated list).

### Facebook Chat

<Image src="../images/modules/pkfacebook/fb-chat.webp" alt="Alysum Prestashop Theme Facebook module Configuration" />

* Manage Facebook Chat behavior and appearance.
* **Delay before display** — number of seconds to wait after the plugin loads before showing the greeting dialog (useful to avoid being intrusive).

### WhatsApp Chat

<Image src="../images/modules/pkfacebook/fb-whatsapp.webp" alt="Alysum Prestashop Theme Facebook module Configuration" />

* Necessary hook for WhatsApp Chat: `displayBeforeBodyClosingTag`.

Options:

* **WhatsApp Type** — choose between `Group` and `Personal`.
* **Personal Number** — when `Personal` type is chosen, add your phone number.
* **Group ID** — when `Group` is chosen, add your Group ID. (See: [https://medium.com/clicktochat/whatsapp-group-id-162d8101073c](https://medium.com/clicktochat/whatsapp-group-id-162d8101073c) for how to find the ID.)

### Used Hooks

* `displayHeader`
* `displayFooterProduct`
* `displayFixedBottomLeft`
* `displayProductExtraContent`
* `displayBeforeBodyClosingTag`

***

### Troubleshooting

#### "Refused to display in a frame" / Content Security Policy errors

If you see an error like "Refused to display in a frame because an ancestor violates the following Content Security Policy directive:" in the browser console, try the following:

* **Whitelisted Domains** — add your domain to the Facebook Page whitelisted domains: [https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting/#page\_settings](https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting/#page_settings). If you used third-party tools that previously edited page settings, re-check the whitelist.

* **Facebook Page Visibility** — ensure the Facebook Page is publicly visible and not restricted by age or country. If restrictions are applied, the chat may only show to logged-in users who meet those restrictions.

* **HTTPS** — make sure your site is served over HTTPS. The plugin works best with HTTPS and some features may require it.

* **Cache** — clear any caching layers (theme/plugin caches, PrestaShop cache) and test again in an incognito window.

* **Page ID** — double-check the Page ID in the module settings is correct.


import { Image } from '../../components/Image';

## Promokit Favorites (pkfavorites)

### Overview

Fast way for customers to save products to a favorites list (works for guests and logged-in users).

### Configuration

<Image src="../images/modules/pkfavorites/pkfavorites.webp" alt="Alysum Prestashop Theme Favorites module Configuration" />

* `button_hook`: where the product button is rendered — `displayProductButton` (default) or `displayProductButtonFixed`.
* `button_position`: visual button position value (e.g. `pktopright`).
* `overall_number`: `false|true` — whether to show overall favorites counter.

Use the module configuration page in Back Office to edit these values (the module persists configuration via its `Config` service).

### Used Hooks

* `displayHeader`: loads assets and exposes `pkfavorites` JS config.
* `displayMoreButtons`: product page extra buttons area.
* `displayProductButton`: product listing / product tile button.
* `displayProductButtonFixed`: alternative product button hook.
* `displayCustomerAccount`: renders a link / block for the customer's favorites in `My account` area.
* `displayMyAccountBlock`: renders a small block for My Account.
* `actionAuthentication`: on customer login — copies favorites from cookies into DB.
* `displayBackOfficeHeader`: loads admin CSS when configuring the module.
* `moduleRoutes`: registers module front controller routes.

### Troubleshooting

* If the favorites button doesn't appear, verify `button_hook` config and that the chosen hook is present in your theme templates.
* If cookie migration on login doesn't copy items, check `actionAuthentication` hook is registered and enabled.

### Demo

[https://alysum.promokit.eu/en/3-women](https://alysum.promokit.eu/en/3-women)


import { Image } from '../../components/Image';

## Promokit Front Panel (pkfrontpanel)

### Overview

Display a small "What’s New" front panel / sidebar with an external HTML page loaded inside an iframe. The module shows a fixed button and a sidebar for desktop (disabled on tablet/mobile by default).

**The module gives you an opportunity to**:

* Inform customers about new arrivals and trends
* Display guides or extra information in an accessible sidebar
* Highlight complementary items or accessory recommendations

### Configuration

<Image src="../images/modules/pkfrontpanel/pkfrontpanel.webp" alt="Alysum Prestashop Theme Front Panel module Configuration" />

* `url`: URL of the HTML page that will be loaded into the sidebar iframe. Default in this distribution: `https://alysum.promokit.eu/promokit/alysum-changelog.html`.

The module uses the `PKFRONTPANEL_CONFIG` DB key to store its configuration.

### Used Hooks

* `displayHeader`: registers frontend CSS/JS and exposes the module config via `Media::addJsDef` under `pkfrontpanel`.
* `displayFixedBottomRight`: renders the fixed button.
* `displayBeforeBodyClosingTag`: renders the panel content.

### Display Rules

* The module renders only on the `index` page and when the device is not tablet or mobile (see `isActive()` logic in the module class).


import { Image } from '../../components/Image';

## Promokit Instagram (pkinstagram)

### Overview

Promokit Instagram fetches recent Instagram media for a public account and renders it in a responsive grid. It supports captions, likes/comments counters and basic per-row layout options.

### Configuration

To use the module provide an Instagram Account ID and a long-lived Access Token (create a Meta App and obtain an access token — see Facebook/Meta docs).

Defaults are stored in `config/default.json` and persisted in the DB under the key `PKINSTAGRAM_CONFIG` (see `src/Config/Config.php`).

Key configuration fields:

<Image src="../images/modules/pkinstagram/part02.webp" alt="Alysum Prestashop Theme Instagram module Configuration" />

* **account\_id** — 17-digit Instagram Account ID.
* **access\_token** — long-lived Instagram User Access Token.
* **expires\_in** — token expiration information.
* **limit** — number of posts to fetch from Instagram (default `12`).

<Image src="../images/modules/pkinstagram/part01.webp" alt="Alysum Prestashop Theme Instagram module Configuration" />

* **show\_caption** — toggle to display post captions.
* **show\_likes\_number** — toggle to display likes count.
* **show\_comments\_number** — toggle to display comments count.
* **Per View** — number of items per row in the grid.

### Hooks used

* `displayHeader` — registers the module stylesheet (`views/css/styles.css`) so the widget is styled correctly.

### CE Widget

Promokit provides a Creative Elements (CE) Instagram widget based on this module that exposes additional view configuration options — use it if you need more layout flexibility.


## Promokit Library (pklib)

### Overview

Promokit Library is a lightweight utility library used by other Promokit modules. It provides shared services and helpers such as cache adapters, file manager utilities, admin tab installation helpers and general-purpose utilities.

This module is not intended to provide frontend features by itself — instead it exposes reusable building blocks for other modules in the Promokit suite.

### What it provides

* **Admin Tabs installer** (`src/Tabs/Tabs.php`) — helper to register/unregister admin tabs used by Promokit modules. The module class exposes `Tabs::TABS` and will create them during `install()`.
* **Cache adapters** (`src/Cache/Cache.php`, `src/Cache/CacheBase.php`, `src/Cache/File.php`) — simple caching layer used across modules. Use these to implement lightweight persistent caching.
* **FileManager** (`src/FileManager/FileManager.php`) — utilities for safe file operations and content management.
* **ResponseHandler** (`src/ResponseHandler/ResponseHandler.php`) — uniform response wrapper used by internal controllers and AJAX endpoints.
* **Utilities** (`src/Utils/Utils.php`) — general helpers:
  * `isSerialized($string)` — checks whether a string contains serialized PHP data.
  * `executeHook($module, $initiator, $params = [])` — helper to instantiate and execute hook handler classes in the module's `Hooks` namespace.
* **Installer helper** (`src/Installer/Installer.php`) — common installation/uninstallation routines used by Promokit modules.

### How other modules use `pklib`

* Rely on `Pklib` for admin tab creation during module install/uninstall (the module registers the tabs defined in `Tabs::TABS`).
* Use the cache adapters to store preprocessed data (images, API responses) with a consistent API.
* Use `FileManager` for reading/writing module assets safely.
* Call `Utils::executeHook($module, $initiator, $params)` from module classes to delegate hook handling to classes in `src/Hooks` (this mirrors how Promokit modules structure hook classes).

### Code locations

* `src/Tabs/Tabs.php` — admin tabs management and installation logic.
* `src/Cache/` — cache adapters and base classes.
* `src/FileManager/FileManager.php` — file utilities.
* `src/ResponseHandler/ResponseHandler.php` — response wrapper.
* `src/Utils/Utils.php` — general-purpose helpers.
* `src/Installer/Installer.php` — installer helper used during module install flows.


import { Image } from '../../components/Image';

## Promokit Lookbook (pklookbook)

### Overview

A lookbook is a visual collection of styled product placements — a great way to show products on models or inside interiors. `pklookbook` lets you create Lookbook pages (full pages listing lookbook items) and Lookbook widgets (select items shown in a block or hooked area).

### Configuration

<Image src="../images/modules/pklookbook/part01.webp" alt="Alysum Prestashop Theme Lookbook module Configuration" />

The module provides two entities:

* **Lookbook Page** — displays all lookbook items on a dedicated page (route slug is configurable).
* **Lookbook Widget** — displays selected lookbook items in a compact widget that you can place using theme hooks or page builders.

#### Page Settings

* **Lookbook Page Slug** — the URL segment identifying the lookbook page (stored in config, defaults to `lookbook`).
* **Lookbook View** — how a lookbook item is presented. Available view modes:

1. **Classic** — two-column layout with the lookbook image on the left and an ordered product list on the right.
2. **Alternative** — two-column layout with an unordered product list.
3. **Slider** — image on the left and a product slider on the right.
4. **List** — list of lookbook items (two-column mode) with product details shown on hover/POI.

#### Widget Settings

Widget settings mirror page settings; you can choose the widget view (e.g. slider) and which items appear in the widget.

<Image src="../images/modules/pklookbook/part02.webp" alt="Alysum Prestashop Theme Lookbook module Configuration" />

### Lookbook Items (admin)

Create Lookbook Items in the Back Office: upload an image and assign Points Of Interest (POI) to map products to coordinates on the image.

* **Widget** — enable/disable an item for the widget (show on front page or any hooked position).
* **Edit** — open the item editor to add POIs and assign products to each point.

POI (Point Of Interest) lets you add an interactive point on the lookbook image that reveals or links to the assigned product.

<Image src="../images/modules/pklookbook/part03.webp" alt="Alysum Prestashop Theme Lookbook module Configuration" />

### Hooks used

* `displayBackOfficeTop` — back-office top area (admin UI).
* `actionShopDataDuplication` — duplicate lookbook data when duplicating shop data.
* `actionAdminControllerSetMedia` — admin media registration.
* `actionProductAdd`, `actionProductDelete`, `actionProductUpdate` — product-related hooks to clear/update lookbook data when products change.
* `moduleRoutes` — registers the front route for the lookbook page (uses configured slug).


import { Image } from '../../components/Image';

## Promokit Popup (pkpopup)

### Overview

Promokit Popup displays a modal window on the storefront using a saved Creative Elements (CE) template. It is intended for marketing messages, announcements, or opt-ins and supports simple display rules.

### Configuration

<Image src="../images/modules/pkpopup/pkpopup.webp" alt="Alysum Prestashop Theme Lookbook module Configuration" />

* **Template** — CE template identifier to render inside the modal.
* **Max popup width** — Popup width in pixels (default `770`).
* **Delay before showing** — Delay in milliseconds before showing the popup. `0` uses the "first mousemove" behaviour (exit-intent-like).
* **Always show** — When `true` the popup ignores the cookie and displays on every page load.

### Hooks used

* `displayHeader` — Enqueues frontend JS/CSS and exposes the `pkpopup` JS config (via `Media::addJsDef`). Only enqueued when CE is available and a template is configured.
* `displayBeforeBodyClosingTag` — Renders the end-of-page popup container (`views/templates/front/endofpage.tpl`) and injects the CE content.
* `actionAdminControllerSetMedia` — Loads admin media for the CE template chooser when editing module configuration.

### Frontend behaviour

* The popup content is a CE template rendered via `Hook::exec('CETemplate', ['id' => $id])`.
* The JS (`views/js/scripts.js`) uses MicroModal to open the popup. It reads the `pkpopup` JS config injected in `displayHeader` and implements:
  * `delay === 0` → show on first `mousemove` (exit-intent-like);
  * `delay > 0` → show after `delay` ms;
  * on close → set cookie named `pkpopup` (unless `always_show` is `true`) to prevent repeat displays.

### Cookies

* **Cookie name:** `pkpopup` — set when the popup is closed to suppress future shows for the same visitor.


import { Image } from '../../components/Image';

## Promokit Product Tabs (pkproducttabs)

### Overview

Promokit Product Tabs lets you add custom, per-shop product tabs with default content and per-product overrides. Tabs can be limited to specific categories or manufacturers and are editable per product in the Back Office.

### Configuration

<Image src="../images/modules/pkproducttabs/pkproducttabs.webp" alt="Alysum Prestashop Theme Product Tabs module Configuration" />

* Manage tabs under the module configuration screens.
* Each tab has:
  * multilingual **title**
  * **default content** (multilingual, RTE)
  * **status** (enabled/disabled)
  * allowed **categories** and **manufacturers** (or allow all)
  * **position** (ordering)

### Hooks used

* `displayBackOfficeHeader` — loads module admin CSS/JS when configuring the module.
* `displayAdminProductsExtra` — Injects the product-level editor in Back Office product edit page. This is what allows per-product tab content editing.
* `actionProductUpdate` — Saves per-product tab contents submitted from the product edit form.
* `displayProductExtraContent` — Returns an array of `ProductExtraContent` instances which are picked up by PrestaShop product page rendering.

### Behaviour

* If a tab has per-product content (and is enabled) that content is shown. Otherwise, the tab's default content (from tab definition) is used.
* Tabs are filtered by shop ownership and allowed categories/manufacturers (see `CustomProductTabsModel` methods).

### Notes

* Because tabs are stored per-shop, ensure you are editing the correct shop context when managing tabs in a multistore setup.


import { Image } from '../../components/Image';

## Promokit Size Guide (pksizeguide)

### Overview

Promokit Size Guide allows you to create and manage reusable multilingual product size guides and attach them to products.
Guides can include an image (measuring tips), multilingual description, and per-product selection. The module provides admin UI for creating guides and integrates with product forms so you can choose a guide per product.

### Configuration

<Image src="../images/modules/pksizeguide/pksizeguide-01.webp" alt="Alysum Prestashop Theme Size Guide module Configuration" />

**Show Description** - Display the size guide description text on the product page

**Image** - Upload a measuring tips or reference image for the size guide

<Image src="../images/modules/pksizeguide/pksizeguide-02.webp" alt="Alysum Prestashop Theme Size Guide module Configuration" />

**Show "How to measure" tab** - Enable a dedicated tab with measurement instructions

**"How to measure" tab content** - Add multilingual instructions on how customers should measure themselves

**Show "Global Size Guide"** - Display a global size guide visible across all products

**"Global Size Guide" content** - Define the global size guide content for all products

<Image src="../images/modules/pksizeguide/pksizeguide-03.webp" alt="Alysum Prestashop Theme Size Guide module Configuration" />

**Generate table in editor** - Automatically generate a size chart table in the rich text editor for easy formatting

<Image src="../images/modules/pksizeguide/pksizeguide-04.webp" alt="Alysum Prestashop Theme Size Guide module Configuration" />

**Manage Size Guides** - Access the admin interface to create, edit, and delete size guides

### Hooks used

* `displayHeader` — loads frontend JS/CSS and executes `Utils::executeHook` wrapper (module exposes JS config and assets via this hook).
* `displayGuide` — primary frontend hook that renders the guide template.
* `actionProductFormBuilderModifier` — integrates a product form modifier.
* `actionBeforeUpdateProductFormHandler` — handles form submission for the new product form flow.
* `actionProductDelete` — cleans up references when a product is deleted.
* `actionUpdateQuantity` / `actionValidateOrder` — clear module cache when stock or order actions occur.

### Using hooks in Smarty templates

* The module exposes the `displayGuide` hook. To include a guide in a theme template directly, call:

```
{hook h='displayGuide'}
```

This prints the configured guide(s) via the `pksizeguide.tpl` template. Typically the theme will call the hook where you want the guide to appear (product page).

### Behaviour

* When a guide is attached to a product, the module will render the associated guide content (description, image) in the `displayGuide` hook.
* Guide images are uploaded per-language and stored under the module upload folder (`views/assets/images/`).


import { Image } from '../../components/Image';

## Promokit Theme Settings (pkthemesettings)

### Overview

The Theme Settings module lets you control the main appearance and behavior of the Alysum theme, including layouts, typography, presets, all from a single panel.

### General Tabs

#### Welcome

The Welcome tab provides an overview of your Alysum theme installation and system environment. It helps you verify licensing, manage updates, save configurations, and quickly check server compatibility with PrestaShop requirements.

<Image src="../images/modules/pkthemesettings/tab-welcome.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2816" height="1544" />

##### License

Enter and save your Envato Purchase Code to activate the theme and enable updates and support.
Find purchase code on [theme's page](https://themeforest.net/item/alysum-premium-responsive-prestashop-16-theme/2622574/support)

##### Updates

Check for available theme updates directly from the panel. If an update is available, you will see detailed information along with an Update button. See [this video tutorial](/updates#automatic-update) for more details.

:::warning
Always make a backup before update!
:::

##### Configurations

Save the current theme and module configuration as a custom preset, allowing you to make a backup of your current configuration.

##### System Status

Displays detailed information about your store environment, including:

* Installed versions of Alysum theme, Theme Settings, and PrestaShop
* PHP version and memory limit
* Required PHP extensions and server settings (OPcache, cURL, DOM, GD, Intl, Zip, etc.)

Green indicators confirm that your server meets PrestaShop and Alysum requirements.

#### Modules

<Image src="../images/modules/pkthemesettings/tab-modules.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2816" height="1544" />

The **Modules** tab displays a list of all modules that ship with the theme. Each module entry shows:

* **Module Name**
* **Module Description**
* **Module State Toggler**
* **Module Hooks** — a list of all hooks required by the module with their current status:
  * ✅ **Hooked** — the hook is properly registered and active
  * ❌ **Not Hooked** — the hook is missing or not activated

**Features:**

* **Fix Hooks Button** — appears automatically when one or more modules have unhooked hooks. Click this button to automatically register and activate all missing hooks for affected modules.
* **Module Toggle** — each module has a toggle switch to enable/disable it. Disabling unused modules reduces server load and improves performance.

:::tip
We recommend disabling modules that you do not intend to use in order to reduce your server resource consumption and improve website
performance.
:::

**Example workflow:**

1. Review the list and identify modules you don't need
2. Toggle the switch to disable them
3. If any module shows unhooked hooks, click **Fix Hooks** to automatically activate them
4. Save your settings

#### Import

Import tab allows you to manually install optional theme components that are not enabled by default.

<Image src="../images/modules/pkthemesettings/tab-import.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2840" height="1026" />

From this tab, you can:

* **Import Revolution Sliders** by selecting a demo and installing its slider configuration.
* **Import Creative Elements** templates bundled with the Alysum theme, which will then be available under Creative Elements → Saved Templates.

This section is useful if you skipped importing demo content during installation or want to add selected elements later.

#### Support

The Support tab gives you quick access to documentation and official support resources for the Alysum theme.

<Image src="../images/modules/pkthemesettings/tab-support.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2840" height="1344" />

### Settings Tab

Here you can manage theme settings directly.

#### Presets

<Image src="../images/modules/pkthemesettings/settings-presets.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2216" height="1548" />

* The theme ships with presets that change multiple parts of the theme at once: Header, Footer, Home page templates, colors, typography etc...
* After changing a preset you must click **Save** to regenerate CSS files according to the new configuration.

#### General

<Image src="../images/modules/pkthemesettings/settings-general-01.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2848" height="1506" />

* **Page Width** — sets the site's max-width container.

***

* **Page Background** — sets the site's background color.

***

* **General Typography** — main site typography settings.

***

* **Headings Font** — font applied to headings (h2..h6).

<Image src="../images/modules/pkthemesettings/settings-general-02.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2248" height="1707" />

* **Button Typography / Color / State** — controls the `.btn` style including hover/active/focus states.

<Image src="../images/modules/pkthemesettings/settings-general-03.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2248" height="1920" />

* **Latin Extended** — Enable this option if your language contains special characters beyond the standard Latin alphabet (such as characters with diacritics, special accents, or extended Latin characters). This ensures proper font rendering for languages like Polish, Czech, Vietnamese, and others that use extended Latin character sets.

***

* **Cyrillic Symbols** — Enable this option if you are using a Cyrillic language (such as Ukrainian, Bulgarian, Serbian, etc.). This loads the necessary font files to properly display Cyrillic characters throughout your website.

***

* **Scroll To Top** — When enabled, displays a floating button in the bottom right corner of the page that allows users to quickly scroll back to the top of the page. This improves user experience on long pages by providing easy navigation back to the header.

***

* **"Shopping Cart" Button** - Display a fixed Shopping Cart button in the bottom right corner of the page. This provides quick access to the cart from anywhere on your website, improving the checkout experience and potentially increasing conversions. The button shows a floating cart icon that remains visible as users scroll.

***

* **Custom Scrollbar** - A scrollbar plugin that hides the native browser scrollbars and provides custom styleable overlay scrollbars. This creates a more polished, consistent appearance across different browsers and allows for better design control. The custom scrollbars can be styled to match your theme's color scheme.

***

* **Local Fonts** - When enabled, automatically downloads Google Fonts and hosts them locally on your server instead of loading them from Google's CDN. This provides two key benefits:
  * Reduced loading time: Fonts load faster from your own server
  * GDPR compliance: Eliminates the connection to Google servers, helping meet EU privacy regulations

***

* **Material Icons** - Load the Material Icons library, a comprehensive icon font developed by Google. Enable this if you're using Material Icons in your custom content, widgets, or design elements.
  *When to enable: Only enable if you're actively using Material Icons to avoid loading unnecessary resources.*

***

* **Font Awesome** - Load the Font Awesome icon library. Font Awesome is one of the most popular icon libraries and is used throughout the Alysum theme for various interface elements, social media icons, and decorative elements.
  \_Recommendation: Keep this enabled unless you're certain you're not using any Font Awesome icons anywhere on your site.\_partials

***

* **Lazy Revolution Slider** - When enabled, Revolution Slider assets (JavaScript and CSS files) are only loaded on pages where a Revolution Slider is actually used. This improves page load times and performance on pages that don't contain sliders.

***

<Image src="../images/modules/pkthemesettings/settings-general-04.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2248" height="1352" />

The block of settings above configures the appearance of notification popups

#### Header

<Image src="../images/modules/pkthemesettings/settings-header.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2216" height="1548" />

* **Header Template** — Select the Creative Elements template to use for your main website header.

:::tip
Multilanguage Support:
To enable different headers for different languages, use Hook "displayHeaderBuilder" when creating your template. This allows you to assign specific layouts via the "Content Anywhere" option in Creative Elements, providing true multilanguage header capability.
:::

***

* **Mobile Header Template** — Allows you to assign a specific template designed for mobile screens. This template is triggered automatically on screens below the width defined in `Mobile` → `Breakpoint` settings.

:::info
If no mobile header is selected, the main Header Template will be used and automatically adapt to mobile screens.
:::

***

* **Sticky Header** — When enabled, the header remains fixed at the top of the viewport as users scroll down the page. This allows users to quickly access navigation, search, and utility elements without scrolling back to the top.

***

* **Sticky Header Class** — Add this CSS class to any element in your header layout to make it "sticky." When a user scrolls down, only the element with this class will remain fixed at the top of the page.

:::info
**How it works:**
Build your header in Creative Elements
Add the class header-sticky to the section/container you want to stick
:::

:::warning
The element with "Sticky Header Class" class must be only one on the page
:::

#### Footer

<Image src="../images/modules/pkthemesettings/settings-footer.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2216" height="1548" />

* **Footer Template** — Select the Creative Elements template to use for your main website footer.

:::tip
Multilanguage Support:
To enable different headers for different languages, use Hook "displayFooterBuilder" when creating your template. This allows you to assign specific layouts via the "Content Anywhere" option in Creative Elements, providing true multilanguage footer capability.
:::

* **Mobile Footer Template** — Allows you to assign a specific template designed for mobile screens. This template is triggered automatically on screens below the width defined in `Mobile` → `Breakpoint` settings.

:::info
If no mobile footer is selected, the main Footer Template will be used and automatically adapt to mobile screens.
:::

#### Home Page

<Image src="../images/modules/pkthemesettings/settings-home.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2216" height="1548" />

* **Home Page Template** — Select the Creative Elements template to use for your Home Page. This dropdown displays all available templates that you've created in Creative Elements.

:::tip
Multilanguage Support:
To enable different templates for different languages, use Hook "displayHomeBuilder" when creating your template. This allows you to assign specific layouts via the "Content Anywhere" option in Creative Elements, providing true multilanguage footer capability.
:::

* **Mobile Home Page Template** — Allows you to assign a specific template designed for mobile screens. This template is triggered automatically on screens below the width defined in `Mobile` → `Breakpoint` settings.

:::info
If no mobile template is selected, the main Home Page Template will be used and automatically adapt to mobile screens.
:::

#### Category Page

<Image src="../images/modules/pkthemesettings/settings-category-01.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2253" height="670" />

* **Category Page Template** — Select the Creative Elements template to use for your Category Page.

:::warning
Choose a layout intended for category pages — widgets must be category-specific.
:::

<Image src="../images/modules/pkthemesettings/settings-category-02.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2255" height="2085" />

* Product listing – Choose how products are displayed on category pages:

**Grid**: Products are displayed in a grid layout with multiple columns.

**List**: Products are displayed in a single-column list format with more detailed information visible for each product.

:::info
When View Switcher is enabled (see below), customers can toggle between Grid and List views themselves.
:::

***

* **Columns Switcher** - Display buttons that allow customers to switch the number of columns in the grid view (e.g., 2 columns, 3 columns, etc...).

***

* **View Switcher** - Display buttons to switch between Grid and List product listing views.

***

* **PerPage Selector** - Display a selector that allows customers to choose the number of products displayed per page (e.g., 12, 24, 36, 48 products per page).

***

* **Category Image** - Control whether the category image (banner) is displayed at the top of category pages.

***

* **Subcategories** - Display subcategories on category pages, typically shown above the product listing.

***

* **Description** - Display the category description on category pages.

***

* **Collapsed Filters** - Control whether product filters (faceted search) are collapsed by default on category pages.

***

* **Max Product Item Width** - Set the maximum width (in pixels) for individual product items in the grid layout. This setting controls responsive behavior and determines how many columns appear at different screen widths.

**How it works:**
The theme calculates the number of columns based on:

1. Available container width
2. This maximum item width setting
3. Products Gap setting

Layout sizing hint: for a 1500px site width choose product item widths according to desired columns:

```
(125-190) → 5 columns
(191-247) → 4 columns
(248-343) → 3 columns
(344-up) → 2 columns
```

**Guidelines:**

Smaller values (150-200px): More columns, more products visible, denser layout
Larger values (250-350px): Fewer columns, larger product images, more spacious layout
Typical range: 180-250px for most stores

***

* **Products Gap** - Set the gap (spacing) between products in the grid layout, in pixels.

#### Product Page

Customize the layout and typography of your product pages to match your brand identity and enhance the shopping experience.

<Image src="../images/modules/pkthemesettings/settings-product-01.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2253" height="1720" />

* **Product Page Template** - Select a custom Creative Elements template for your product pages. This allows you to completely customize the product page layout using the CE page builder.

  **Options:**

  * `Default (Native Theme Layout)`: Uses the standard Alysum product page layout
  * `Custom Templates`: Any product page templates you've created in Creative Elements

***

* **Product Title Typography** - Control the appearance of the product title (product name) on product pages.

***

* **Price Typography** - Control the appearance of the product price on product pages. Settings work the same way as Product Title Typography.

<Image src="../images/modules/pkthemesettings/settings-product-02.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2252" height="1051" />

***

* **Product Page Display Settings** - Display social sharing buttons on product pages, allowing customers to share products on social media platforms.

:::info
Ensure you've configured which social platforms to show in the [Social Sharing](/modules/pkthemesettings#social-sharing) settings section.
:::

***

* **Discount Countdown** - Display a countdown timer on product pages when a time-limited discount is configured for a product.

:::info
See also: Check the [FAQ section](/faq#how-to-add-price-countdown) for detailed instructions on adding price countdowns to products.
:::

***

* **Main Image Inner Zoom** - Enable zoom functionality that displays a magnified version of the product image when customers hover over it.

***

* **Main Image Thumbnails** - Display product image thumbnails below or beside the main product image.

***

* **Quantity Up/Down Buttons** - Display increment (+) and decrement (-) buttons next to the quantity input field on product pages.

***

<Image src="../images/modules/pkthemesettings/settings-product-03.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2252" height="1850" />

* **Product Tabs** - Control whether tabbed product information sections are displayed on product pages.

***

* **Tab Title Typography** - Control the appearance of tab titles (the clickable tab headers).

***

* **"Description" Tab** - Control whether the "Description" tab specifically is displayed.

***

* **Vertical Tabs** - Display tabs vertically (stacked on the left or right side) instead of horizontally (in a row across the top).

***

* **Section Title Typography** - Control the appearance of section headings within tab content (e.g., "Specifications," "Features," "Ingredients" headings inside the Description or Product Details tab).

***

<Image src="../images/modules/pkthemesettings/settings-product-04.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2253" height="866" />

* **Recently Viewed Products** - Display a section showing products that the customer has recently browsed during their current session.

***

:::info
Requirement: The "Viewed products block" module must be installed and active. This is typically included with PrestaShop and the Alysum theme.
:::

***

* **Same Category Products** - Display products from the same category as the currently viewed product.

:::info
Requirement: The "Products in the same category" module must be installed and active. This module is typically included with PrestaShop.
:::

***

* **Product Crossellings** - Display products that have been purchased together with the current product by other customers.

:::info
Requirement: The "Cross-selling" module must be installed and active. This is a standard PrestaShop module.
:::

***

* **Product Accessories** - Display manually assigned accessory products for the current product.

#### Contact Page

<Image src="../images/modules/pkthemesettings/settings-contact-01.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2256" height="1262" />

* **Contact Page Template** - Select a custom Creative Elements template for your contact page. This allows you to completely customize the contact page layout using the drag-and-drop builder.

  **Options:**

  * **Default (Native Theme Layout):** - Uses the standard PrestaShop/Alysum contact page layout
  * **CE Template:** - Any templates you've created in Creative Elements

***

* **Show a Map** - Control whether an interactive map is displayed on the contact page showing your store location.

***

* **Maps Provider** - Select which map service to use for displaying your store location.

  **Options**: Google, Leaflet

***

* **Google API Key** - Enter your Google Maps JavaScript API key to enable Google Maps functionality.

:::info
Detailed instructions [How to get Google API Key](https://developers.google.com/maps/documentation/embed/get-api-key)
:::

***

* **Google Map Custom Style** - Enable or disable Alysum's custom styling for Google Maps to match your theme design.

:::info
If you want to use your own custom map styling (beyond Alysum's default), you can create custom styles using [Google Maps Styling Wizard](https://mapstyle.withgoogle.com) and apply them via custom JavaScript.
:::

***

<Image src="../images/modules/pkthemesettings/settings-contact-02.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2254" height="785" />

* **Zoom Level** - Set the initial zoom level when the map loads on the contact page. Default: 10 (City)  The zoom level determines how close or far the map view is when it first loads

```
Zoom level reference:
1-3 (World/Continent): Shows entire continents or large regions
4-6 (Country): Shows countries or large states
7-9 (Region/State): Shows states, provinces, or regions
10-12 (City): Shows cities and surrounding areas (recommended)
13-15 (Streets): Shows neighborhoods and street-level detail
16-18 (Building): Shows individual buildings and precise locations
19-20 (Maximum): Extremely close, building-level detail
```

***

* **Longitude** - The longitude coordinate of your store location. Format: Decimal degrees (e.g., -0.4932303)

***

* **Latitude** - The latitude coordinate of your store location. Format: Decimal degrees (e.g., 39.4240166)

***

* **Map Area Height** - Set the height of the map container on the contact page.

***

<Image src="../images/modules/pkthemesettings/settings-contact-03.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2251" height="731" />

Each block above displays a specific piece of contact information that you can individually show or hide

#### Product Miniature

<Image src="../images/modules/pkthemesettings/settings-pm-01.webp" alt="Alysum Prestashop Theme Settings - Product Miniature Configuration" width="2251" height="963" />

* **Miniature Template** - Select a predefined layout template for your product miniatures or use Creative Elements for complete customization.

When set to *Predefined Layouts*:

```
- You can select from 5 predefined styles (see Predefined Layout below)
- All configuration options below remain available
- You can customize individual elements (brand, price, reviews, etc.)
```

When a Creative Elements template is selected:

```
- The predefined layout options below become unavailable
- Complete control over product miniature design using CE builder
```

***

* **Predefined Layout** - Choose from 5 pre-designed product miniature styles that control the visual arrangement and display of product information.

:::info
Important: When you select a Creative Elements template in the "Miniature Template" dropdown above, the predefined layout options become unavailable. All customization must then be done in Creative Elements.
:::

***

<Image src="../images/modules/pkthemesettings/settings-pm-02.webp" alt="Alysum Prestashop Theme Settings - Product Miniature Configuration" width="2254" height="1624" />

* **"Quick View" Button** - Display a Quick View button on product miniatures that opens a popup with product details.

***

* **"Add to Cart" Button** - Display an Add to Cart button directly on product miniatures.

***

* **Color Options** - Display product color variations as swatches on product miniatures.

***

* **Discount Countdown** - Display a countdown timer on product miniatures when a time-limited discount is active

***

* **Gray Filter Over Images** - Apply a slight gray overlay/filter to product images on miniatures.

***

* **Multi-image on Hover** - Display additional product images when hovering over a product miniature.

***

* **Max Images Number** - Define how many images to show when hovering over a product miniature.

***

* **Product Image Type** - Select which image size/format to use for product miniatures.

***

<Image src="../images/modules/pkthemesettings/settings-pm-03.webp" alt="Alysum Prestashop Theme Settings - Product Miniature Configuration" width="2253" height="1070" />

* **Product Title** - Display the product name/title on product miniatures.

***

* **Product Title Multiline** - Allow product titles to wrap to multiple lines instead of truncating.

:::info
Note: If disabled, long product titles will be cut off. If enabled, product titles will display completely but may create uneven card heights in your product grid.
:::

***

* **Product Title Typography** - Control the visual appearance and styling of product titles on miniatures.

***

<Image src="../images/modules/pkthemesettings/settings-pm-04.webp" alt="Alysum Prestashop Theme Settings - Product Miniature Configuration" width="2250" height="827" />

* **Product Brand** - Display product brand

***

* **Product Brand Typography** - Control the visual appearance and styling of product brand on miniatures.

***

<Image src="../images/modules/pkthemesettings/settings-pm-05.webp" alt="Alysum Prestashop Theme Settings - Product Miniature Configuration" width="2250" height="1642" />

* **Product Description** - Display product description

***

* **Product Price** - Display product price

***

* **Price Typography** - Control the visual appearance and styling of the current product price on miniatures.

***

* **Old Price Typography** - Control the visual appearance and styling of the original product price on miniatures.

***

***

<Image src="../images/modules/pkthemesettings/settings-pm-06.webp" alt="Alysum Prestashop Theme Settings - Product Miniature Configuration" width="2250" height="1048" />

* **Product Labels** - Display product labels, like New, Discount, etc...

***

<Image src="../images/modules/pkthemesettings/settings-pm-07.webp" alt="Alysum Prestashop Theme Settings - Product Miniature Configuration" width="2250" height="1200" />

* **Rating Stars** - Display product rating stars on product miniatures

:::info
The Product Comments module must be enabled
:::

***

* **Active Stars Color** - Set the color for filled/active rating stars.

***

* **Inactive Stars Color** - Set the color for empty/inactive rating stars.

***

* **Buttons Color** - Set the background color for buttonss, such as "Add to Cart," "Quick View," or other action buttons, on product miniatures.

***

* **Buttons Color on Hover** - Set the background color for buttons when hovering over them.

***

* **Buttons Border Radius** - Set the roundness of button corners on product miniatures

***

<Image src="../images/modules/pkthemesettings/settings-pm-08.webp" alt="Alysum Prestashop Theme Settings - Product Miniature Configuration" width="2250" height="411" />

* **Display Attribute** - Display a specific product attribute on product miniatures.

***

* **Display Feature** - Display a specific product feature on product miniatures.

#### Social Sharing

<Image src="../images/modules/pkthemesettings/settings-social.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2216" height="1548" />

* Theme provides social sharing buttons for product pages; configure which networks are shown in the Social Sharing section of the settings.

#### Maintenance

<Image src="../images/modules/pkthemesettings/settings-maintenance.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2216" height="1548" />

* **Maintenance mode** — enable/disable maintenance.
* **Countdown** — show a countdown on the maintenance page and set the reopening date.
* **Subscription form** — enable a subscription form to collect emails while in maintenance.
* **Subscribers list & Send Notification** — manage subscribers and notify them when the store is reopened.

#### Mobile

<Image src="../images/modules/pkthemesettings/settings-mobile.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2216" height="1548" />

* **Breakpoint** - this breakpoint is used in cases such as displaying the mobile template, re-rendering sliders with specific mobile settings, etc.

***

* **Show Bottom Panel** - a panel with “hot links” such as cart, menu, and search, displayed on mobile screens only.

#### Customer CSS/JS

<Image src="../images/modules/pkthemesettings/settings-customer-css.webp" alt="Alysum Prestashop Theme Settings module Configuration" width="2243" height="2024" />

* **Custom CSS** - Add custom CSS (Cascading Style Sheets) code to modify the appearance and styling of your website.

:::note
File where your code is saved:
/modules/pkthemesettings/views/css/dynamic/customercss1.css
:::

Why customercss1.css? – `1` is the ID of your store.

:::warning
Make sure your [CSS code is valid](https://jigsaw.w3.org/css-validator/) - Invalid CSS can break your site's styling
:::

***

* **Custom JS** - Add custom JavaScript code to add functionality, tracking, or interactive features to your website.

:::warning
Important:

* Don't include `<script>` tags into the JS field - only write the JavaScript code itself.
* Make sure your code does not generate errors in the browser console.
:::

:::note
File where your code is saved: /modules/pkthemesettings/views/js/dynamic/customerjs1.js
:::

Why customerjs1.css? – `1` is the ID of your store.

* **Custom HEAD** - Add custom HTML tags to the `<head>` section of your website for meta tags, tracking codes, fonts, and more.

:::tip
This block can be used to improve LCP (Largest Contentful Paint - a Core Web Vital metric) by adding [image preload](https://web.dev/articles/preload-responsive-images).
:::

:::warning
**Important:** Make sure your HTML code is valid - Invalid HTML can cause rendering issues or break functionality.
:::

**Example:**

```
<!-- Preconnect to critical domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://www.google-analytics.com">

<!-- Preload hero image for better LCP -->
<link rel="preload" as="image" href="/img.webp" fetchpriority="high">

<!-- DNS prefetch for external resources -->
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
```

### Hooks used

* `displayFixedBottomRight`
* `displayProductAttributes`
* `displayProductListTop`
* `displayAfterTitleTag`
* `displayMaintenance`
* `displayHeader`
* `actionProductAdd`
* `actionProductDelete`
* `actionProductUpdate`
* `actionPromokitCacheClear`
* `actionThemeSettingsUpdate`
* `actionFrontControllerSetVariables`


## Revolution Slider 6 (revsliderprestashop)

### Overview

Slider Revolution is a powerful image slider tool for PrestaShop. While its wide range of features can feel overwhelming at first, it is a visual slider builder that allows you to create rich and dynamic content for your web pages.

You can build almost anything and captivate your customers and visitors with stunning interactive animations, motion effects, and engaging layouts using your own content and images.

### Configuration

[Full slider documetation](https://classydevs.com/docs/slider-revolution-6-prestashop/)

### Note

:::info
Slider Revolution is a powerful visual tool, but it can have a noticeable impact on page performance when used on a page. If high performance and PageSpeed scores are a priority for your store, we recommend avoiding the use of Slider Revolution or limiting its usage to non-critical pages.
:::