Documentation

Alysum — Premium Prestashop Theme

Thank you so much for purchasing our item from themeforest!


  • Created: 10 July, 2012
  • Update: 28 May, 2023

What’s In The Box

By purchasing Alysum Prestashop Theme you get:

  • Theme — contains installable files. The main theme archive and the child theme
  • Documentation — contains theme's documentation
  • Docker — The archive that you can install in Docker
  • PSD — contains the Theme's Design in Adobe Photoshop format

Installation

To install the theme you must have a working version of Prestashop already installed. For information in regard to installing the Prestashop platform, please see the Prestashop Documentation


Requirements

The theme has the same requirements as Prestashop platform

PHP configuration:

  • PHP version: We recommend PHP 7.4 or later.
  • 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:

Permissions

  • Permissions for all files should be set to "644"
  • Permissions for all folders should be set to "755"

How to verify your server meets PrestaShop’s requirements

1. If you have already installed Alysum theme, go to "Theme Settings" → "Welcome" tab and see "System Status"

2. You can use our system requirements tool to easily check if your environment fulfills PrestaShop’s requirements. Here’s how:

  • Download the latest version from GitHub.
  • 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 "Informaion" in "Advanced Parameters" of your BO. All parameters should be "OK", like this:

Alysum Prestashop Theme Installation



Install via browser

Follow the steps below to setup your site template:

  • Log into your Prestashop Back-Office and go to "Design" → "Theme & Logo"
  • Then click on the button. Next browse for the zipped theme file.

Alysum Prestashop Theme Installation

make sure you take the "Installable zip" as this is what you would upload. "Installable zip" file is called "alysum-v.X.X.X.zip"

Alysum Prestashop Theme Installation

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

Alysum Prestashop Theme Installation



Installation video tutorial




Install through FTP


Manual Update

  • Make a backup of your shop.
  • Go to "Advanced Parameters" → "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
  • Go to downloaded archive "Updates" folder and unzip an update archive.
  • Upload unzipped "themes" and "modules" folders to the root of your prestashop.
  • Done



Automatical Update

  • Make a backup of your shop.
  • Go to "Advanced Parameters" → "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
  • Go to "Theme Settings" → "Welcome" tab
  • Add your theme "Purchase ID" to the specific field and save
  • Click "Check for Updates" and see if any updates are available
  • Click "Run update" and wait while page will be reloaded
  • You will see a message "The update was installed successful"
  • Done

Theme Update Video Tutorial





Child Theme

This feature is only useful if you want to slightly modify a theme (to add a block for example). If you need to modify the markup more deeply, modify the theme, don’t create a child theme.

How to create a child theme

First you need to have the theme you want to use as parent in your store /themes folder. Then you can create a very minimal theme, containing only the following files:

.
├── config
│   └── theme.yml
└── preview.png

It’s recommended to copy these files from the Parent theme.

Once you have this, you will specify in your child theme theme.yml which theme should be used as a parent. The value must be the theme technical name (ie: the theme folder name).

Minimal config of child theme

parent: alysum
name: child_alysum
display_name: Child theme of alysum's theme
version: 1.0.0
assets:
  use_parent_assets: true
  js:
    all:
      - id: masonry
        path: assets/js/libs/masonry.js
        priority: 100
        position: bottom
        attributes: defer
      - id: siema
        path: assets/js/libs/siema.js
        priority: 100
        position: bottom
        attributes: defer
      - id: glide
        path: assets/js/libs/glide.js
        priority: 100
        position: bottom
        attributes: defer
      - id: cookies
        path: assets/js/libs/cookies.js
        priority: 100
        position: bottom
        attributes: defer
      - id: alysum
        path: assets/js/alysum.js
        priority: 101
        position: bottom
        attributes: defer
    category:
      - id: category-imagesLoaded
        path: assets/js/libs/imagesLoaded.js
        position: bottom
        priority: 99
        attributes: defer
      - id: category-page
        path: assets/js/pages/category.js
        position: bottom
        priority: 100
        attributes: defer
    module-ph_simpleblog-single:
      - id: blog-sharer
        path: assets/js/libs/sharer.js
        position: bottom
        priority: 99
        attributes: defer
    product:
      - id: product-imagesLoaded
        path: assets/js/libs/imagesLoaded.js
        position: bottom
        priority: 99
        attributes: defer
      - id: product-sharer
        path: assets/js/libs/sharer.js
        position: bottom
        priority: 99
        attributes: defer
      - id: product-page
        path: assets/js/pages/product.js
        position: bottom
        priority: 100
        attributes: defer
  css:
    category:
      - id: category-style
        path: assets/css/pages/category.css
        media: all
        priority: 200
    stores:
      - id: stores-style
        path: assets/css/stores.css
        media: all
        priority: 200
    order:
      - id: order-style
        path: assets/css/order.css
        media: all
        priority: 200

After changing theme's config you have to delete /config/themes/alysum/shop1.json file to reload updated config.

Read more about Child themes in the Prestashop development documentation: https://devdocs.prestashop.com

You can find minimal child theme in the archive. Go to the "Theme" folder and find there "alysumchild.zip" file.


Pages

Home Page

The settings of home page is pretty easy. First of all you have to create a template using Creative Elements.
Then, Go to Theme SettingsHome Page and select your template from the list. The whole process of template building described here.


Category Page

There are two available options:

  1. Use native theme's Category Page layout
  2. Build your own Category Page using Creative Elements module

For the first option you have to go to Theme SettingsCategory Page and select "Native Theme Layout"


Second option is more flexible. First, you have to create a template using "Category Page" widgets.

  • For multi-language template, use Creative ElementsContent Anywhere. Create new template and assign it to "displayCategoryPageBuilder" hook.
  • For single-language template you can use Creative ElementsSaved Templates as well.

Then select a template from the list in Theme SettingsCategory Page


Product Page

There are two available options:

  1. Use native theme's Product Page layout
  2. Build your own Product Page using Creative Elements module

For the first option you have to go to Theme SettingsProduct Page and select "Native Theme Layout"


Second option is more flexible. First, you have to create a template using "Product Page" widgets.

  • For multi-language template, use Creative ElementsContent Anywhere. Create new template and assign it to "displayProductPageBuilder" hook.
  • For single-language template you can use Creative ElementsSaved Templates as well.

Then select a template from the list in Theme SettingsProduct Page


Native Product page layout scheme





Modules

A module is a piece of software containing a group of functions. They extend functionality and add new features to the theme. The list of modules what comes with Alysum theme you can find below:



Promokit Menu

See our video tutorials how to work with menu




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.

By default Alysum theme has images aspect ratio 10:13, but you can change it as you like.

Tips to get nice looking images:

Images Settings

  • All images sizes related to products should have the same ratio

Source Images

  • Source images should have the same ratio as defined in the Images Settings
  • Source images should not be smaller than defined for "large_default" image type

Here is the screen of image sizes by default:

images-config

Creative Elements

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



All Creative Elements video tutorials available by the link: https://www.youtube.com/c/WebshopWorks/videos

Creative Elements widget description: https://pagebuilder.webshopworks.com

Multilanguage Layouts Configuration

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

Similar configuration for other blocks like header, footer, product page...




Theme and Modules Translation

Translation Catalog

That catalog allows you to find translation domain of a wording you want to translate.

Translation Catalog


Modifying a Translation

The most important tool of the "Translation" page is in the "Modify translations" section. This is where you can choose to add a translation, and completely customize each and every sentence if you wish so. Go to "International" → "Translations" to get it

Select the part of the current translation that you wish to edit:

  • Back office translations. The text visible to you and your team from your store's administration panel.
  • Theme translations. The text visible to your customers when browsing your store.
  • Installed modules translations. The content from the modules. Note that modules which are available but not installed will not appear in the tool.
  • E-mail translations. The terms used in the default email templates.

Modules translations

When you wish to translate a specific module, choose "Installed modules translations", then select the one module you want to edit. It will open a new page with the content from this module, and all its available strings.



Form Fields Translations

  • go to shop back office
  • go to localization → translations
  • "type of translation" select "field name translations"
  • "your language" select language that you want to modify

SVG Icons

Change an icon

For example you want to change "facebook" icon.

  1. Open the file /themes/alysum/assets/img/lib.svg
  2. 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>
  3. Find new icon, for example here: flaticon.com
  4. Download it and open in any Text Editor
  5. Copy all code between "<svg>" and "</svg>" tags
  6. Paste it into the file svg.tpl between <symbol id="facebook" viewBox="0 0 288.861 288.861"> and </symbol>
  7. Copy SVG dimensions <svg viewBox="0 0 27.965 27.965"> and update them in symbol tag like this <symbol id="facebook" viewBox="0 0 27.965 27.965">

Now you can use icon code in any place of the theme, like this:

<svg class="svgic"><use href="/themes/alysum/assets/img/lib.svg#phone"></use></svg>

Icons List

loading
updown
arrowdown
arrowup
arrowright
arrowleft
cart
search
cross
cmp-cross
twitter
vimeo
youtube
facebook
twitter2
instagram
flickr
linkedin
pinterest
telegram
whatsapp
messenger
tumblr
reddit
left-arrow
right-arrow
left-arrow-thin
right-arrow-thin
top-arrow-thin
bottom-arrow-thin
star
pk-star
pk-flag
compare
like
wishlist
account
eye
eye2
heart
headphones
email
password
money
login
comment
return
rocket
shuffle
support
gift
lock
lock2
back
menu
burger
grid
list
pencil
phone
fax
location
done
add
info
address
file
file2
file3
voucher
globe
currency
visa
maestro
mastercard
amexpress
discover
paypal
skrill
stripe
exclamation
bell
save
bitcoin
rss
delivery
pk-flag2
avatar
like2
language
currencies

Google AMP (Accelerated Mobile Pages)

Open the documentation page


Alysum in Docker Container

Open the documentation page


Performance

This section contain tips that might help you improve your shop's performance server-wise. We recommend you to enable these cache options only when you finish all necessary configuration actions

Recommended settings for working in production shop:

Smarty

Prestashop Performance settings
  • Template cache - Never recompile template files. Prestashop stop spending time for checking every file for modification to recompile it
  • Cache - Enabled
  • Caching type - File System
  • Clear cache - Never clear cache files

Debug Mode

Prestashop Performance settings
  • 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)

Prestashop Performance 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

Additional Optimization

Optimize your PrestaShop performance

Optimization from canonicalized.com

Prestashop Speed Optimization – How to make it insanely fast!

Another optimization approach

Optimize PrestaShop performance again


FAQ

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

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

- New
By default, all products you add are considered to be New. You may change number of days during which your products is considered as “New” in Shop Parameters → Products Settings

- Featured
To make the product Featured, go to Catalog → Products and in Associations field 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 much times

Go to back-office > "Shop Parameters" → "Contact". There are two tabs available, "Contacts" and "Stores". Go to "Stores" tab and find all available contact details.

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

Go to "Design" → "Themes & Logo". Click on "Choose Layouts", find necessary page and choose desired layout.

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

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

1. Go to "Modules" → "Theme Settings" → "General Tab", find there "Google API Key" and put your API key there. Read more about API key here
2. "Theme Settings" → "Contact Page". Put coordinates of your store and save.

1. Make sure Maintenance mode is disabled
2. Make sure the module is enabled

If your translation doesn't work, try to change it and save, then change it back.

1. How to manage sidebars on category page you can read here #faq5

2. How to add Product Filter (Faceted Search):

  • Go to "Modules" in your back office
  • Find "Faceted Search" module and make sure it's installed and enabled
  • Make sure the module is configured properly and indexed all products
  • Go to "Design" → "Positions", search "displayLeftColumn" hook and make sure the module is in the modules list of necessary hook

3. How to add any other module to your sidebar

  • Go to "Design" → "Positions" and click "Transplant a module" button in the top right corner
  • Select a module you want to move and "displayLeftColumn" hook
  • Click "Save"
Step 1: Download the font

Find the custom font you want to use on your website, and then download the TrueType Font file format (.ttf). You can also download the OpenType Font format (.otf)


Step 2: Create a WebFont Kit for cross-browsing

Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.


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 (.eot), (.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:

@font-face {
  font-family: "CustomFont";
  src: url("CustomFont.eot");
  src: url("CustomFont.woff") format("woff"),
  url("CustomFont.otf") format("opentype"),
  url("CustomFont.svg#filename") format("svg");
}

After update:

@font-face {
  font-family: "CustomFont";
  src: url("../fonts/CustomFont.eot");
  src: url("../fonts/CustomFont.woff") format("woff"),
  url("../fonts/CustomFont.otf") format("opentype"),
  url("../fonts/CustomFont.svg#filename") format("svg");
}

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:

$fonts = array(
  'CustomFont',
  'ABeeZee',
  'Abel',
  'Arial',
  ...
Step 6 (Optional): Add your font to the Theme Settings Font List

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

/modules/creativeelements/includes/fonts.php
  • Go to your server through FTP
  • Open the file /ROOT/translations/cldr/main--en-US--numbers (or your language, fr-FR, es-ES, ...)
  • find the code ...{"decimal":","...
  • change "," to "."

Select your slider and click "Slide Editor". Select a slide what has youtube video. Find there "Source Settings" -> "Youtube Arguments" and add following arguments:

&autoplay=1&mute=1
  • Get your code from Google
  • Open the file /themes/alysum/templates/_partials/javascript.tpl
  • Add your code to the end of the file
  • add {literal} tag around yor code like this:
    <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>

Support

If this documentation doesn't answer your questions, So, Please contact us via Support Helpdesk at Item Support Page

We are located in GMT +1:00 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: 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.

Don’t forget to Rate our theme

We would be grateful for supporting our theme if you like it and our service. It would be a great support for us.
Go to your Themeforest Profile & then You can Rate & Review for our template.
Thank You in advance!

Changelog

See Changelog