Premium Prestashop AMP Theme


Created: 05 July 2012
by: Promokit Co.
email: support@promokit.eu

This document covers the installation and use of this theme and reveals answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties.

You can find online version of this documentation here https://alysum5.promokit.eu/promokit/documentation/

Download Alysum theme on themeforest.net

Getting Started

To install this 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

Prestashop Requirements

PHP configuration:

  • PHP version: 5.4 or later. (7.x is higly recommedned)
  • memory_limit should be at least 128M (256M 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:

  • CURL. The Client URL extension is used to download remote resources like modules and localization packages.
  • DOM. The DOM extension 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 is used to find out the file type of uploaded files.
  • GD. The GD extension is used to create thumbnails for the images that you upload.
  • Intl. The Internationalization extension is used to display localized data, such as amounts in different currencies.
  • Zip. The Zip extension 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"
https://devdocs.prestashop.com/1.7/modules/core_updates/1.7.6/

How to check out my php config?

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

2. You can also use a phpinfo() function to view your server current PHP information

  • To create a phpinfo file, open a plain text file, add the following line, and save: Filename: phpinfo.php
    <?php phpinfo();
  • Upload the file to your server. You should upload the file to the exact directory you want to test. Typically, this will be your prestashop ROOT directory.
  • Visit the page in your browser. If you uploaded it to prestashop ROOT directory, you should now visit http://www.example.com/phpinfo.php, replacing example.com with your own domain name.

Please also check "Informaion" in "Advanced Parameters" of your BO. All parameters should be "OK", like this:

Theme Installation



Import through browser

Log into your Prestashop Back-Office and go to "Design" → "Theme & Logo"

Then click on the "Add new theme". Next browse for the zipped theme file.

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.

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



Here is short video what demonstrates installation and activation process




Import from FTP

Theme Update

Manual Update

  • Make a backup of your shop.
  • Go to "Advanced Parameters" → "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
  • Upload "themes" and "modules" folders from "Archive/updates/LATEST_VERSION/ to the root of your prestashop.
  • Done



Automatic 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" module → "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




Theme Settings

Presets

How Presets works? — The theme contains different elements like Header Layout, Footer Layout, Home page Layout and Theme Settings configuration. When you change a preset all those elements changes according to the selected preset.

After changing preset you have to click "Save" button to regenerate CSS files according to the configuration.

When you change a preset the module check availability of Page Builder layouts with the same name as selected preset and activate such layouts. For example if you select "complex" preset the module will activate Header, Footer and Homepage layouts with the name "complex".

General

General tab contains common theme settings like typography, colors, and other global options

Page Width — You can adjust page width as you like. This option defines theme's layout max-width property.

General Typography — defines general website typography

Headings Font — allows to set a font for all headings. Headings is a text inside h2, h3, h4, h5, h6 tags

Button Typograpy, Color, etc... — allows to configure regular buttons of the theme and different buttons state. Button is an element with .btn class. "Hover" styles also applied for ":active" and ":focus" states

Latin Extended Symbols — Enable this option in case you have a language with extended symbols, like Spanish, French... This option requests additional symbols from google fonts what is not included by default.

Cyrilic Symbols — Enable this option in case you are using an East Slavic language, like Bulgarian, Ukrainian, etc...

Cookie Message — all websites across the EU are required to ask your permission to place cookies on your machine. Read more details here https://www.cookielaw.org/the-cookie-law/. You can add your custom link to external website what explaining in details your cookie policy. Or select one of Prestashop CMS pages where you describe that yourself.

Scroll To Top — is a button in the right bottom corner of a page what allows quick scroll to the top by click

Popup Search — it's a big search field what apears in the center of page and let you focusing on search results only. This type also has a pagination option in the very bottom of serached products.

Lazy Load — speeds up your website by deferring the loading of your below-the-fold images.

Page Preloader — is an animated circle what you see on the screen while the rest of the page’s content is still loading.

Scripts Attribute. JavaScript is considered a "parser blocking resource". This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a "script" tag, whether that be internal or external, it stops to fetch (if it is external) and run it.
Fortunately, the "script" element has two attributes, async and defer, that can give us more control over how and when external files are fetched and executed. See in details heve each attribute works: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Home Page

Home Page Builder — this option enable Home Page layout composed in Page Builder. NOTICE! The module Page Builder must be hooked to the "displayHomeBuilder" hook.

If the option is disabled you will use default theme's home page with following structure:

<body>
	{hook h='displayAfterBodyOpeningTag'}
	<header>
		{include file='_partials/header.tpl'}
	</header>
	<div class="main-content">
		{hook h='displayTopColumn'}
		{hook h="displayLeftColumn"}
		{hook h="displayRightColumn"}
		{block name='content'}{/block}
	</div>
	<footer>
		{include file='_partials/footer.tpl'}
	</footer>
	{hook h='displayBeforeBodyClosingTag'}
</body>				
				

Home Page Titles — titles/headings typography of the homepage content, except header and footer.

Category Page

Category Page Layout — You can select a layout what you built in Page builder for category page.
"Default" layout means a layout what designed in the theme files

WARNING! Carefully select a layout, it has to be built for category page and contain category page widgets

NOTICE! The module Page Builder must be hooked to the "displayCategoryPageBuilder" hook

Product Listing — The view of product listing. You can use "grid" mode with possibility to manage product items per row or "list" mode to display products one under another

View Switcher — this is two buttons list/grid what allows theme's customers to switch product listing view.

PerPage Selector — a selector what allows theme's customer to manage a number of products per page.

Category Image — display category image above product listing.

Subcategories — display subcategories of current category above product listing.

Description — display category description above product listing.

Collapsed Filters — allows to collapse sidebar product filters. Can be useful in case of many filter options

Max Product Item Width — this is the option what allows to set max-width for product item in Grid mode and manage number of products in row.

Calculations for 1500px website width: (125-190) - 5 columns, (191-247) - 4 columns, (248-343) - 3 columns, (344-up) - 2 columns

Product Columns Gap — a space between products in Grid mode.

Product Page

Product Page Layout — You can select a layout what you built in Page builder for product page.
"Default" layout means a layout what designed in the theme files

WARNING! Carefully select a layout, it has to be built for product page and contain product page widgets

NOTICE! The module Page Builder must be hooked to the "displayProductPageBuilder" hook

Price Typography — typograpy of the main product price

Share Buttons — display Social Share buttons under the Add to cart section. You can manage social accounts in the "Social Sharing" tab.

Display Countdown. This option displays countdown in case you have configured it properly in the product settings. You just have to add special price limited in time.

Main Image Inner Zoom — zoom product image by click in the same product image area

Main Image Thumbnails — allows to display thumbnails of all product images. If the option is disabled product images will be displayed as a carousel.

Quantity Up/Down Buttons — this option allows to hide "Up/Down (+/-)" buttons used to change product quantity what will be added to cart.

Product Tabs — display additional product information ordered by tabs

Tab Title Typography — typograpy of tabs titles

"Description" Tab — allows to hide "description" tab in case it's not used

Vertical Tabs — product tabds view. By defailt tabs arranged horizontally.

Section Title Typography — this is typograpy of sections titles displayed in the bottom of the product page

Recently Viewed Products — manage state of "Recently Viewed" module. If the module is not installed yet, it will be installed, in case it's present in the prestashop module catalog (in the "/modules" folder).

Same Category Products — manage state of "Products in the same category" module.

Product Crossellings — manage state of "Cross-selling" module

Product Comments — manage state of "Product Comments" module

Product Accessories — manage state of "Product Accessories" section

Contact Page

Show a map — display a map on conact page.

Maps Provider — Select a service what provides interactive maps. Available services are: Google and Leaflet

Google API Key — To use the Google Maps you must have an API key. The API key is a unique identifier that is used to authenticate requests associated with your project. How to get an API key?

LeafLet API Key — To use the LeafLet Maps you must have an API key. How to get an API key?

Google Map Custom Style — there is an option to display google map with custom colors what defined with Alysum theme.

Longitude — a geographic coordinate that specifies the east–west position of your point.

Latitude — a geographic coordinate that specifies the north–south position of your point.

Map Area Height — The height of a map area

These four blocks displayed under the contact form. You can disable them if necessary.

Product Miniature

Product Miniature is an item on product listing page. See below details of product miniature what you can manage in this tab

"Quick View" Button. Show/Hide "Quick View" button for product miniature

"Add to Cart" Button. Show/Hide "Add to cart" button

Color Options. In case your product has color variations you can concider to display product colors to make product miniature more informative.

Product Labels. Show/Hide product labels

Discount Countdown. This option displays countdown in case you have configured it properly in the product settings. You just have to add special price limited in time.

Second Image on hover. You can display second product image on hover what will give your customer more information about product immediately.

Gray Filter over Images. In case you are using transparent "png" images you can add grey filter to make all images in one style.

Product Image Type. Here you can change the image type. When you make 2 products in row you have to choose bigger images, for example "large_default", and in case of 6 preoducts in row select smaller image tyle, "medium_default".

Product Title allows to disable product title

Product Title Multiline If this option is enabled it makes all product names in one line (cuts the rest of text).

Buttons Color and Buttons color on Hover the color of product miniature buttons

Buttons Border Radius this is a CSS option "border-radius" applied for product miniature buttons. "50%" giving fully circle buttons.

Enable product brand and configure it's typography

Enable product description and configure it's typography

Enable product price and configure it's typography. Old price means the price with no discount

Product Miniature Layout there are several product miniature layouts. You can select one what fits to your needs.

Rating Stars displays stars in product minature. The module "Product Comments" must be installed and enabled.

Back Stars Color a color of "empty" stars.

Active Stars Color a color of "active" stars.

Configure typography and colors of product labels

Display Attribute — display additional product attribute

Display Feature — select product feature to display. You can also display all product features

Social Sharing

These buttons serve to promote your business presence on various social networks and help you generate fans/followers for those particular accounts. By placing these buttons on your business website, you can help to create visibility for your social media accounts and easily extend your reach there.

The list of available social networks you can find below. This buttons will appear on product page.

Maintenance

Maintenance — Switch on/off maintenance mode

Countdown — display countdown on Maintenance page. In case you know when your store will be opened you can enable countdown to let your customers know when to come back.

Maintenance Until — set the date when your store will be opened

Subscription Form — enable subscription form to let your customers to subscribe to receive an email about store opening.

Subscribers List — a list of emails where notification will be sent to.

Send Notification to Subscribers — use this button to send a notification when you are ready to open your store.

Customer CSS

These options allows you to add your custom CSS and JS code

NOTICE! Please make sure all your code is valid

WARNING! Don't put HTML tags like "<script>" into these fileds

Page Builder

See our video tutorials how to work with Page Builder

Page Builder – Content

Footer Builder

Menu Builder

CMS Page Builder

Product Page Builder

Page Builder – Images

Page Builder – Products

AMP

AMP is an open-source library 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.

There is AMP Page Builder available in Alysum theme. That is a lightweight tool to build your own AMP layout! You can find it in submenu of "Layout Builder" in the left sidebar.

See full AMP Documentation here

AMP requirements:
- "https" protocol must be enabled in your prestashop
- "Friendly URLs" must be enaled too


How AMP Prestashop module works

If AMP module is installed and enabled it works in following way: If your customer open your store on mobile device (phone or tablet) the module automatically rederect him to AMP theme version.


AMP Logo

Go to "Design" → "Theme & Logo" and upload your logo image.


AMP Home Page

We have developed special tool to build AMP pages. You can find it in the "Layout Builder" → "AMP Page Builder". It works exactly like any other builder tool and you can build your AMP homepage very quickly with drag&drop option.


AMP Menu

AMP version use native Prestashop menu module "Main Menu". Makesure you have it installed and enabled. Go to menu settings and select menu items to show to compose your AMP menu



Translations

All wordings used in AMP theme available in one place. go to "International" → "Translations". Select "Themes" → "Alysum". Find there domain Shop → Theme → Amp

AMP Home page translation available in "Installed modules translations". Go to "International" → "Translations", select "modules" and find "Page Builder".


Footer

Links
To build your own links set in the footer, you have to go to "Link List" module settings and click "New Block" there. Put a title, select "displayAmpFooter" hook and needed links.

Social Icons
Go to Theme Settings → Footer, and enable "Display Icons of Social Networks". Then go to Theme Settings -> Social Accounts and enable "Display Accepted Payments Systems". Then go to Theme Settings -> Payment Icons and select payment services you are using.

Payment Icons
Go to Theme Settings → Footer, and select social networks you want to show.


AMP Troubleshooting

If your AMP theme doesn't work or has some issues please check out following items:

  • The module "AMP" must be installed and enabled
  • Go to "Theme Settings" → "AMP" and make sure the option "AMP" is enabled
  • Go to "Shop Parameters" → "General" and make sure the option "Enable SSL" is enabled
  • Go to "Shop Parameters" → "Traffic & SEO" and make sure the option "Friendly URL" is enabled
  • Make sure permissions of the module folder and files are correct.

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:

Modules

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

Category Tree List

Category Tree List - is a module which allows you to disaplay list of your categories. You can choose only specific categories to show.

To add category icons, you have to go to category settings and upload your image.

Promokit Menu

See our video tutorials how to work with menu



Revolution Slider

The list of sliders used in Alysum theme:

Read full slider documentation here: https://alysum5.promokit.eu/promokit/documentation/revslider/

Faceted Search

About

Faceted Search module is a default PrestaShop module that displays a block with the layered navigation filters. It enables the customer to define combined criteria to filter category products, little by little providing more details in order to reduce the number of displayed products. This is a great tool for customers who know the details of what they want (color, condition, price range) but are unsure how to find it.

In your PrestaShop admin panel go to Modules -> Modules and Services section, choose Installed modules tab and type in the Search field “Faceted Search” to find the module. If the module is not installed, click the Install button. When the module is installed, click the Configure button.

Indexes and Caches

To work properly, Faceted Search must be kept up-to-date with your latest products, product attributes, and all product prices. That’s why it is necessary to re-index the data.

Index all missing prices – only adds to the index the prices that were not indexed before. Rebuild entire price index – adds to the index all the prices, whether they were already indexed before or not. Build attribute index – adds to the index all the product attributes.



Product Page

Product Page layout description




Product Page Builder Tutorial

Theme and Modules Translation

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

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).

Recommended 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: alysum
        path: assets/js/alysum.js
        priority: 59
        position: bottom
			

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

SVG Icons

Change the icon

For example you want to change "facebook" icon.

  1. Open the file /themes/alysum/templates/_partials/svg.tpl
  2. find "facebook" icon, it looks like this:
    <symbol id="si-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="si-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="si-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 xlink:href="#si-phone"></use></svg>

Suggestion: Use following shortcode to disaplay SVG icon throgh HTML Widget

[svg class="svgic"]<use xlink:href="#si-phone"></use>[/svg]

Icons List

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

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:

  • Template cache - Never recompile template files
  • Cache - Enabled
  • Caching type - File System
  • Clear cache - everytime something has been modified
  • Debug Mode - Off
  • Smart cache for CSS - On
  • Smart cache for JavaScript - On
  • Apache optimization - On

You can find full description of each option here and here

Frequently Asked Questions

  1. There are no search results

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

  2. Prestashop Product Types

    - 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 what was sold much times

  3. How to edit contact page details?

    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.

  4. Empty Contact Page

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

  5. Change Page Layout

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

  6. Where to find subscribers list

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

  7. Categories List disappear

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

  8. How to configure Google Maps on Contact Page

    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.

  9. Revolution Slider doesn't loading

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

  10. My Translation doesn't apply

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

  11. Page Builder Infinite Loading

    Go to Page builder. Click "Settings" and disable "Async Requests" option

  12. Category Page configuration

    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"
  13. Add custom Font

    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',
    ...
    
  14. Change Price Decimal Separator

    • 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 "."
  15. Revolution Slider Youtube Autoplay

    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
  16. How to change any text in the theme/module

    There are two ways to change the text

    • Change the text directly in the theme's code

      In this case you need a text editor app, for example Sublime Text. If you already have it installed, you need to add theme's folder as a project and use "Find" feature. For more details please check out this video tutorial: https://www.youtube.com/watch?v=5KDEs7F58zg

    • Change the text in the Translation page in your Back Office

      1. Open our translation catalog https://alysum5.promokit.eu/promokit/documentation/translations.html
      2. Search your wording there and see the translation domain, or module name
      3. Go to "International" → "Translation" in your Back Office
      4. Select "theme" or "modules" in the "Type of translation" dropdown list and your language in the "Select your language"
      5. Find your wording and change it as you like
  17. How to add Google Analytics/Tag Manager's Code

    • 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 you are having any issues with the theme or have any questions regarding how to use the theme you can submit a ticket to our support https://support.promokit.eu. Tickets are moderated by the theme developer and a support staff. When you submit a ticket you will receive an email confirmation and once our staff has been able to review and respond to your ticket you should receive another email with our response.