Prestashop Theme Settings Module

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

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.

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

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

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

<header id="header">
  {if $pktheme.header_builder == 1}
    {hook h="displayHeaderBuilder"}
  {else}
    {hook h="CETemplate" id="{$pktheme.header_builder}"}
  {/if}
</header>

Sticky Header — will fix the header in the top portion of your webpage when a user scrolls the page. It will allow quick access to the menu from any part of the page.

Sticky Header Class — allows to manage what section you want to make "sticky". Define the class name here. Then go to Header Builder, select your layout. Add defined class name (without dot "." before class name) to a row or section you want to make "sticky".

Logo Typography — allows to create your own logo style. This option can be applied only if you select and option "Text Logo" in the "Logo" widget of your Header Layout

Menu Bar Items Padding — a space between items in the menu bar.

Menu Bar Typography — typography of top menu items only.

SubMenu Typography — typography of items in dropdown sections.

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

Native Footer — this option enable native prestashop footer hook "displayFooter". Sometimes this option can be useful because some modules use this hook to output technical information.

For example "whatsappchat" module outputs it's CSS, JS and HTML markup what is a wrong way. Correct way in this case is to hook CSS/JS into "header" hook, and HTML markup into "displayBeforeBodyClosingTag" hook.

Footer Background Color — set a color of your footer. NOTICE! You can also set background color in the Footer Builder layout settings.

Footer Titles — typography of footer titles/headings.

Footer Text — typography of regular footer text.

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