1. Installation theme

Go to your your Back-Office and open theme section.

Installation theme

Then click on the button “Add new theme”

Add new theme

Choose the file on your computer themeinstaller.zip and upload the theme to your shop.

Upload theme

Then click on the button “Use this theme”

Upload theme

2. General Setting

2.1 Image sizes

To resize images go to Backoffice -> Design -> Images settings.

Here are the default sizes of images of Nastya themes

Add new theme

Each image resizing requires regeneration! Go to your your Back-Office and open Images Settings. After installation need regeneration images. Then click on the button “Regenerate thumbnails”

Add new theme

2.2 Translation Theme

An important clarification: translations that are in two "%" signs must be left unchanged, since these are global variables and values are automatically substituted there from the database. For instance:

Translations

It is also a common mistake to add spaces to the construction "[1][/1]". If you translate phrases using online translators, for example google translate, a space is added to the brackets ([ /1]), which subsequently causes problems, such as incorrect operation of the checkout page and others. You can translate inner words, but not the structure in which they are enclosed. Correct translation of this construction:

Translations

- Translation Front Office

In the admin panel, go to the International section and then to Translations

 Translation

in a new window that opens, in the fields for selecting Type of translation you need to select the option to translate Themes translations

 Translation

in the field for selecting Select your theme select the name of your theme in the field for selecting Select your language select the language in which you need a translation

 Translation

After the above actions, click on the edit button.

 Translation

in a new window that opens, in the search translations input field, write the word which you are looking for, after we click search! Now you need to write a translation for your site and click save

 Translation

Then go to your website and refresh the page and translation changes are made

 Translation

You can also read the official Prestashop translation documentation Prestashop translation guide

Here is information for all your needs PrestaShop Translations

2.3 Translation Back Office

In the admin panel, go to the International section and then to Translations

 Translation

in a new window that opens, in the fields for selecting Type of translation you need to select the option to translate Back office translations

 Translation

After the above actions, click on the edit button.

in a new window that opens, in the search translations input field, write the word which you are looking for, after we click search!

 Translation

in the text area write your translation! and click save

After refresh the page and change the translation are involved

2.4 Translation Modules

In the admin panel, go to the International section and then to Translations

 Translation

in a new window that opens, in the fields for selecting Type of translation you need to select the option for translation Installed modules translations

then in the input field Select your module select the module you want to translate

In the input field Select your language, select the language to which you need to transfer the module!

 Translation

After the above actions, click on the edit button.

For example, take the Newsletter module

In the new window that opens, you see a list of words and phrases that is present in the module

 Translation

You need to translate into your language and click save

Then go to your website and refresh the page and translation changes are involved

2.4.1 Translation of the "Product Comments" module

The translation process for the "Product Comments" module is slightly different from the translations of other modules.

First, open the "Modules" tab then "Module Manager".

Translation

Next, go to the settings of any installed module, in our example this is the "Wishlist" module.

Translation

In the module configuration window that opens, click Translate and then select the desired language.

Translation

In the appeared translation settings window you need to go down to the very bottom of the page and in the window called "MODIFY TRANSLATIONS" in the "Select your module" field select the module called "productcomments". After that press the button "Modify translations".

Translation

If you did everything correctly, you will see the module translation fields.

Translation

3. Modules Setting

3.1 Module "Theme Settings"

Configure Theme Settings

Go to your your Back-Office and open Theme Settings. Click button "Configure". after that you will see the settings window.

Configure Theme Settings

After that you can change the settings by pressing the appropriate buttons

You can change any settings as you need. Like a screenshots. The same menu is on the front of your site if you click the settings button and drag the buttons. In front-settings you can change main font your site.

Configure Theme Settings Details

3.2 Module "Awesome Image Slider"

Awesome Image Slider

Go to your your Back-Office and open Awesome Image Slider. Click button "Configure". after that you will see the settings window.

Configure Image Slider

After that you can change the settings by pressing the appropriate buttons. In the lower menu there are general settings for the slider. There you can change the repetition, interval of the slide show, navigation and pagination

In the top menu you can add a new slide by clicking on the button "New Item". Than you see that menu.

Configure Image Slider

In this menu you need to specify the name of the slide, upload your image, and specify a link for clicking on the slide. Text and image must be inserted separately for each language that you have connected, languages ​​are selected in the selection in the upper right field

To add text on top of your slide you need to go to menu "Content" and fill with your text as an example. Than click "Save".

Configure Image Slider

After setting, you will get a slider on the main page of your store

Configure Image Slider

You also have the option to upload a video

To do this, in the field for selecting Type, specify video

video-slider

3.3 Module "Responsive banners"

Responsive banners

Go to your your Back-Office and open Responsive banners. Click button "Configure". after that you will see the settings window.

Configure Responsive banners

In this menu you can either change your slides by clicking the button "Edit" or add a new one by clicking the button "Add Item" in the settings window.

In the menu for adding a slide you need to fill in all the fields in all languages ​​available in your store, also select the options for displaying the slide and click the save.

Configure Responsive banners

To change the text on top of the banner you need to go to the menu "Description", click "Source Code" and fill as in the example and save.

Configure Responsive banners

After setting, you will get a banners on the main page of your store

Configure Responsive banners

3.4 Module "Free Shipping Notice"

Free Shipping Notice

Go to your your Back-Office and open Free Shipping Notice. Click button "Configure". after that you will see the settings window.

Free Shipping Notice

In this menu you can choose the background color, transparency, also set the start date and end date

You can also change the text styles and the text itself by clicking on the button "Source code"

Free Shipping Notice

After setting, you will get a top banner on the main page of your store

Free Shipping Notice

3.5 Module "GDPR EU Cookie Law Banner"

Free Shipping Notice

Go to your your Back-Office and open GDPR. Click button "Configure". after that you will see the settings window.

Free Shipping Notice

In this menu you can choose the background color, position, transparency, also set the start date and end date

You can also change the text styles and the text itself by clicking on the button "Source code"

Free Shipping Notice

After setting, you will get a GDPR banner on the main page of your store

Free Shipping Notice

3.6 Module "HTML Content"

HTML Content

Go to your your Back-Office and open Responsive banners. Click button "Configure". after that you will see the settings window.

Configure HTML Content

In the general menu below you can change item lines and change settings. To add a block with information click "Add item", and than you see that menu.

Configure HTML Content

In this menu you need to fill in all the necessary fields in all languages ​​available on your site. In order to add a description you need to go to the menu "Content" and click "Source Code"

Configure HTML Content

In order to change the icon you need to go to the site, for example - Material Design Icons. There you can select any icon. Clicking on it will open the settings menu. you need to copy the <i> tag and paste to place at seconr screen.

Configure HTML Content Configure HTML Content

In result you have same block information on front of your site.

HTML Content

3.7 Module "Promotion Discount Countdown Banner & Slider"

Promotion Discount Countdown Banner & Slider

Go to your your Back-Office and open Promotion Discount Countdown Banner. Click button "Configure". after that you will see the settings window.

Promotion Discount Countdown Banner & Slider

In the bottom menu, you can select the number of items to display. To add a new slide, click "Add item", than you see that menu.

Promotion Discount Countdown Banner & Slider

In this menu you need to fill in all the fields in all languages ​​available in your store, also select the start date of the countdown and the end date and status. To insert text and buttons on the slider you need to go to the menu "Content" and click "Source code" and fill like screen.

Promotion Discount Countdown Banner & Slider

In result you have parallax banner with countdown in front of your website.

Promotion Discount Countdown Banner & Slider

3.8 Module "Brand Manager"

Brand Manager

Go to your your Back-Office and open Brand Manager. Click button "Configure". after that you will see the settings window.

Brand Manager

In this menu, you can configure your brand-view. You can also customize brands on various pages. Also choose whether to show a picture or not or a name.

In result you have brands block in front of your website.

Brand Manager

3.9 Module "Product Discounts with Countdown"

Product Discounts

Go to your your Back-Office and open Product Discounts. Click button "Configure". after that you will see the settings window.

Product Discounts

In this menu you can change the discount data that you have or add a discount to another product by clicking the button "Add Item".

Product Discounts

Here you need to select your product in the search and indicate the start and end dates of the discount, the discount size and set the active status.

In result you have discount counter in front of your product list.

Product Discounts

3.10 Module "Product Images Zoom"

Product Zoom

Go to your your Back-Office and open Product Images Zoom. Click button "Configure". after that you will see the settings window.

Product Zoom

In this menu you can configure the type of zoom, as well as the size of the zoom window or the animation of its display.

In result you have zoom window in front of your product.

Product Zoom

3.11 Module "Product Video Youtube"

Video Youtube

Go to your your Back-Office and open Product Video Youtube. Click button "Configure". after that you will see the settings window.

Video Youtube

Here you can change the video settings as well as add video to new products by clicking the button "Add Item", then you see same menu.

Video Youtube

Here you need to find your product and provide a link to the video from YouTube. The link should look like:

Video Youtube Video Youtube

You need to fill in all the fields in all available languages, as a result you will have a video on the product page as in the picture.

Video Youtube

3.12 Module "Product Custom Tab"

Custom Tab

Go to your your Back-Office and open Product Custom Tab. Click button "Configure". After that you must click "Add Item" and you will see that window.

Custom Tab

In this menu you need to select your product and enter the name of the tab in all available languages. the contents of the tab can be added by clicking the button "Source code", like example.

Custom Tab

In result you will have custom tab in your product page.

Custom Tab

3.13 Module "Product Comments"

Product Comments

Go to your your Back-Office and open Product Comments. Click button "Configure" and you will see that window.

In this menu you can configure the display of comments, delete comments or confirm them, enable and disable the addition of comments. After saving the settings, comments are displayed on your product page.

Product Comments

After save settings you will have comment in your product page.

Product Comments

3.14 Module "Online Chat"

Online Chat

Before your visitors can start chatting with you, you must have Zendesk account at https://www.zendesk.com/

Online Chat
Online Chat Online Chat
Online Chat Online Chat

After that, you must confirm your email

Online Chat

Next copy your Zendesk key

Online Chat

Go to your Back-Office and open Online Chat. Click button "Configure" and you will see that window. In this field you put your Zendesk key and save. After that you have online chat in your front-office

Online Chat

There is Dashboard where you can configure your chat

Online Chat

Online Chat

3.15 Module "Product Size Guide and Shipping"

 Size Guide and Shipping

Go to your your Back-Office and open Product Size Guide and Shipping. Click button "Configure" and you will see that window.

 Size Guide and Shipping

Here we can add a popup or edit an existing one. And you can change default setting click "Edit".

 Size Guide and Shipping

After save settings you will have popup in your product page.

 Size Guide and Shipping

 Size Guide and Shipping

3.16 Module "Facebook logins"

Back office view

Facebook logins

Front office view

Facebook logins

Go to your your Back-Office and open module "Facebook logins". Click button "Configure" and you will see that window.

Facebook loginsFacebook logins

To log through Facebook, we need the "Facebook app ID".

3.16.1 Setting up module hooks

If the module is not displayed in the front office you need to check for the presence of the following hooks:

a) Hook in the file "personal-information.tpl" at "..\themes\theme name\templates\checkout\_partials\steps\"

Facebook logins

b) Hook in the file "login-form.tpl" at "..\themes\theme name\templates\customer\_partials\"

Facebook logins

c) Hook in the file "ps_customersignin.tpl" at "..\themes\theme name\modules\ps_customersignin\"

Facebook logins

If there are no hooks, they must be added

3.16.2 How To Get An App ID and Secret Key From Facebook

To start with, navigate your browser to the Facebook Developers page (developers.facebook.com). You’ll need to login to your Facebook account. Once logged in, you’ll see a screen similar to this:

Facebook logins

To begin, click the "My Apps" link in the top right menu.

Facebook logins

Then click "Create App"

Facebook logins

In the pop-up window you need to select "What do you need your app to do?"

Facebook logins

After that, a window will appear asking for the display name of the new application, contact email address, purpose, and a question about the business account. Since this app will not be published, just choose a name that is easy for you to remember.

Facebook logins

After you’ve filled out the required fields and clicked Create a New App ID, you’ll be taken to your new App’s dashboard. From here, you’ll need to click on the "Settings -> Basic" link to view your App ID and Secret Key.

Facebook logins

Your Secret Key will be hidden from view until you click the Show button.

Facebook logins

Once you’ve done this, we recommend copying both fields to a text file for easy access later.

Facebook logins

Then enter "Privacy Policy URL" and enable live mode.

Facebook logins

After saving the settings, you need to go to the "Facebook Login -> Products" tab, next to the Products tab, click on "Add Product" and add Facebook Login. When you select Facebook Login, you must check "Web" in the platform selection list.

Facebook logins Facebook logins

After adding Facebook Login, you need to go to the settings.

Facebook logins

Select the following settings and enter your website url and save the settings.

Facebook logins

In the Facebook Login settings, there will be a notification "Your application has standard access to public_profile. To use Facebook Login, switch public_profile to Advanced Access." To change application access, go to "Get Advanced Access".

Facebook logins

Find "public_profile" and click "Get Advanced Access".

Facebook logins

Read the agreements and if everything suits you, click "Confirm".

Facebook logins

Enter the received keys into the module fields.

Facebook logins

You’re finished! That’s all there is to generating an App ID and Secret Key from Facebook. You can ignore the other settings.

3.16.3 How To Get An App ID and Secret Key From Google

Go to the Google Developers Console.

Navigate to the tab "Credentials".

Facebook logins

Click "Select a project -> New Project" .

Facebook logins

And then click the button “Create”.

Facebook logins

Next, in the "Credentials" tab, click the "Configure consent screen" button.

Facebook logins

Select "External" and click "Create".

Facebook logins

Then you need to fill out the form with the required fields.

Facebook logins Facebook logins

We continue filling out the forms by clicking on the "save and continue" button.

Facebook logins

In the next, we also press the system.

Facebook logins

In the last paragraph, click "back to dashboard"

Facebook logins

Go to the "Credentials" tab, click the "Create Credentials" button, and select the OAuth Client ID from the drop-down list.

Facebook logins

From the Application type, select the Web application, enter Authorized JavaScript origins & Authorized redirect URIs and click the button "Create".

Facebook logins

You’re finished! That’s all there is to generating an Client ID and Client secret code from Google. You can ignore the other settings.

Facebook logins

Enter the received keys into the module fields and save the changes. Then you need to clear the cache from your back office.

Facebook logins

3.17 Module "Bonask"

Back office view

Bonask

Front office view

Bonask Bonask

The "Bonask" module allows the user to send you a message by mail, for example, a question about a product.

3.17.1 Module settings

First you need to go to the module configuration. After going to the module configuration, you will see the module settings fields.

Bonask

In order for the module to start working correctly, you just need to specify the correct mail. After that, if the user writes a message in the form of a module and sends it, you will receive a notification by mail with the user's request.

Bonask

3.17.2 Work demonstration

User filling out a form.

Bonask

Message to administrator mail.

Bonask

3.17.3 A note on module hooks

If after installing the module, the display on the front office occurs twice, as in the screenshot

Bonask

You need to go to "Manage hooks".

Bonask

And remove one of the last two hooks. The "displayProductPopup" hook is responsible for displaying before the "Add to cart" button, and the "productActions" hook after.

Bonask

3.18 Module "Call Back"

Back office view

Boncall

Front office view

Boncall

The module allows the client to order a call back, as well as find out the contact information of the store.

3.18.1 Module settings

First you need to go to the module configuration. After going to the module configuration, you will see the module settings fields.

Boncall

The first field specifies the email to be displayed on the front office, and it will also receive a notification about a callback request.

Boncall

In the second field you can specify whether to display email on the front office or not.

Boncall

In the last field, you must specify the contact phone number.

Boncall

3.18.2 Work demonstration

After clicking on the phone in the front office, fields for filling appear. After filling in all the fields, a callback request is sent to the specified mail.

Boncall

Message by mail

Boncall

3.19 Module "Latest purchase"

Back office view

Bonpurchase

Front office view

Bonpurchase

The module allows you to display the latest product purchases to the front office, in order to attract attention and increase sales.

3.19.1 Module settings

After going to the module configuration, you will see the module settings fields.

Bonpurchase

To create a new item for display, you must click the "Add new item".

Bonpurchase

After clicking on the button, all available fields appear for filling.

Bonpurchase

Consider an example of an already created element that was attached in the screenshot above.

Bonpurchase

In the first field, you need to select the desired product by entering the name of the product in the empty field. After that, the found product will be highlighted on which you need to click.

Bonpurchase

In the second field, you enter the customer who bought the product and, if desired, the location of the customer (Note: if you have several languages on the site, you must fill in the field for each).

Bonpurchase

In the "Start Date" field, you need to enter the start date for displaying the created element by clicking on the date field.

Bonpurchase

In the "End Date" field, you must enter the end date for displaying the item, also clicking on the date field.

Bonpurchase

In the "Time of purchase" field, you must indicate how many, for example, minutes ago the purchase was made.

Bonpurchase

And the last field "Status" indicates whether the item is on or off for display.

Bonpurchase

Finally, you need to click the "Save" button and our element is ready.

Bonpurchase

You can also adjust the frequency of appearance of elements on the screen by setting your values in the following fields, which are in the module settings.

Bonpurchase

The "Show item" field is responsible for the time when the next item appears on the screen.

Bonpurchase

The "Animation speed" field is responsible for how long one element will be displayed.

Bonpurchase

3.20 Module "Wishlist"

Back office view

Bonwishlist

Front office view

Bonwishlist Bonwishlist

The module allows the client to mark the product he liked for further consideration and the impossibility of losing it among another list of products.

Bonwishlist

For the module to work correctly, you need to configure the module hooks. Let's get started

If the module does not work after installation, you first need to check for module hooks in the theme's tpl files.

The individual module hook is called "displayBonWishlist". The first file that should contain the hook is located in the "themes \ Theme Name \ templates \ catalog \ _partials" folder called "product-cover-thumbnails.tpl".

Bonwishlist

The following file is called "product.tpl" and is located in the folder under the path "themes \ Theme Name \ templates \ catalog \ _partials \ miniatures \"

Bonwishlist

If the hook is missing in the specified place, you need to add the following code to this place yourself:

<div class="bonwishlist-hook-wrapper" data-id-product="{$product.id}">

    {hook h="displayBonWishlist" product=$product}

</div>

After you check and, if necessary, add the module hooks, the module should start working correctly.

Note: Each theme has its own tpl file location. If there is a discrepancy with the above file paths, contact the theme developers for the location of the required files.

3.21 Module "Whatsapp"

Back office view

Bonwhatsapp

Front office view

Bonwhatsapp

The module allows you to add an unlimited number of Whatsapp support numbers for your website.

3.21.1 Module settings

The module configurations are as follows:

Bonwhatsapp

The window called "Settings" contains the following settings: "Enable", "Position", "Text color", "Background color". More about each of them

Bonwhatsapp

The "Enable" function is responsible for the module operation. If the value is "YES" the module is displayed on the fron office, "NO" is hidden.

Bonwhatsapp

The "Position" function is responsible for positioning the module on the front office. If the value is "Left", the icon and the window of the module are displayed on the left side, with "Right" - on the right.

Bonwhatsapp

The "Text color" function is responsible for the color of the text in the title.

Bonwhatsapp Bonwhatsapp

The "Background color" function is responsible for the background color in the module header.

Bonwhatsapp Bonwhatsapp

More about the elements of the module. To create a new item, click on the "Add new item" button.

Bonwhatsapp

We will consider the creation of a new element of the module using the example of an existing one.

Bonwhatsapp Bonwhatsapp

The "Select a file" field is responsible for the displayed image.

Bonwhatsapp

The "Enter Title" field is responsible for the title of the element.

Bonwhatsapp Bonwhatsapp

The "Description" field is responsible for the bottom margin of the element.

Bonwhatsapp Bonwhatsapp

The "Subtitle" field is responsible for the second field of the element.

Bonwhatsapp Bonwhatsapp

The field "Enter phone" is responsible for the phone WhatsApp in the chat to which the user will be redirected after clicking on the item.

Bonwhatsapp

After clicking on the element, a transition will be made to the WhatsApp desktop application, after authorization (if the client has not done this before), the client will be redirected to the chat with the specified number, if the user is from a computer.

If the user is using a mobile device and has the WhatsApp application installed, they will be redirected directly to the application, otherwise they will be directed to the WhatsApp website in the mobile browser.

The phone number must be exactly the one that is registered in the WhatsApp application.

The "Specific class" field is responsible for adding an individual class to an element for further custom styling of the element. For example, a different fill color.

Bonwhatsapp Bonwhatsapp

The "Open in new window" field is responsible for what happens after clicking on the element. Option "YES" is responsible for redirecting the user to a new tab, option "NO" will open in the current tab.

Bonwhatsapp

The "Status" field is responsible for displaying the element on the front office. Option "YES" displays the item, "NO" does not.

Bonwhatsapp

This completes the setting of the element.

3.22 Module "Product Attributes and Combinations"

Back office view

Bonattributes

Front office view

Bonattributes

The module allows you to display product attributes in the product card.

3.22.1 Module settings

Module configurations.

Bonattributes

There are two parameters in the module configuration: "Enable" and "Attribute type". The "Enable" parameter is responsible for the operation of the module: "Yes" - the module is enabled, "No" - disabled.

Bonattributes

The "Attribute Type" parameter is responsible for how the module is displayed in the front office. Attributes view for the "Radio buttons" parameter:

Bonattributes Bonattributes

Attributes view for the "Drop-down list" parameter:

Bonattributes Bonattributes

Note: If you installed the module separately, you need to make changes to the tpl file for the module to work correctly.

The file path is "..\themes\Theme Name\templates\catalog\_partials\miniatures\", the name of the file to be changed is "product.tpl". The code to add:

{hook h='displayBonAttribute' product=$product}

{hook h='displayAttributeButton' product=$product}

Result:

Bonattributes

To exclude double display of attributes, you need to delete the code highlighted below in the same "products.tpl" file that we changed above.

Bonattributes

3.23 Module "Google Map"

Back office view

bon-google-map

Front office view

bon-google-map

The module allows you to add the address of your stores and display them on the map.

3.23.1 Getting google key

There are many fields for editing in the module configurations and we will get acquainted with them, but a little later. The first step for the module to work correctly is to enter the "Google Key". Further instructions for obtaining a key.

To get Google Maps API Key you need to have a Google account. It's free to create an account, build here. Most likely, we already have a Google account, so let's move on to the next step.

Go to the platform using the link: https://cloud.google.com/maps-platform/ and click on the "Get Started" button. In the dialog box that appears, select "Maps" and click the "Continue" button.

bon-google-map

If this is your first time creating an API key, you must create a project first. Enter the name of the project, agree to the terms, click the "Next" button in the lower right corner.

bon-google-map

Next, we connect the payment system to use the API by creating a payment account.

bon-google-map

Select a country, agree to the terms and conditions and click "Accept and Continue"

bon-google-map

Next ("Step 2 of 2") enter your data in the fields. Below is the data for an example.

bon-google-map

Enter credit card details: number, expiration date, cvv, contact person, phone.

bon-google-map

Next, click "Start a free trial period" Google will check the card: it will withdraw $ 1 from it and return it back after a while. When a billing account is connected, free card usage limits are credited to it monthly.

Then select "Maps" and click "Enable".

bon-google-map

Next, we answer key questions from google and clicks "next".

bon-google-map

Next, you will receive an API key, which you need to copy and save for future use.

bon-google-map

Now you need to enable restrictions for your API key so that your key gets into the hands of third parties and is invalid. Go to the Credentials section and click "Edit API key".

bon-google-map

In the tab acceptable type of applications, select HTTP referral sources, and insert your site in the required format, be sure to consider whether your site is accessible via HTTP or HTTPS and WWW subdomain, if necessary, add all variants of domains and subdomains. For example, add a site in the form: https://theme.bonpresta.com/

Note: If the field is left blank, the API key will be available for use with any site.

bon-google-map

On the next tab, allowable APIs and select Maps JavaScript API.

bon-google-map

Done, we went through all the steps to get the google key. Now it must be copied and pasted into the field called "Google Key" which is located in the module's configurations.

bon-google-map

3.23.2 Module settings

The main window of the module configurations displays the created elements, as well as the main settings of the module.

bon-google-map

Let's figure out the fields available for settings.

In the "Google Key" field, enter the key that we received Above or already existing.

bon-google-map

In the fields "Default Latitude" and "Default Longitude", the coordinates of the starting point are set, which can be obtainedhere.

bon-google-map bon-google-map

In the "Map Type" field you can choose the type of the displayed map: either "Roadmap" or "Satellite".

bon-google-map bon-google-map bon-google-map

The "Zoom Level" field is responsible for the initial magnification of the map. The higher the number, the closer the map.

bon-google-map

The ""Zoom scroll" parameter determines whether the map will be enlarged with the mouse wheel or not.

bon-google-map

The "Street view" parameter determines the ability to view streets. If enabled, the user will be able to view the street as shown in the screenshots below.

bon-google-map bon-google-map bon-google-map

The "Map controls" parameter is responsible for adding map control tools.

bon-google-map bon-google-map

The "Bounce marker" parameter controls the animation of movement of markers on the map. If enabled, markers move cyclically.

bon-google-map

The "Display Popup" parameter is responsible for the pop-up window that is displayed when the marker is clicked, and includes information about the store.

bon-google-map bon-google-map

Next, let's talk about creating a new mark on the map. Before adding a store to the map, it must be created in the "Store parameters -> Contacts" tab. Then open the "Stores" tab and add a new store if necessary.

bon-google-map

After creating the store, or if the store has already been created earlier, we can make a mark on the map. To do this, click the "Add New Item" button.

bon-google-map

In the "Select a store" field, select the desired store.

bon-google-map

In the "Marker" field, upload a marker that will point to your store.

bon-google-map

Next, specify the status of the check in the "Status" field and save your changes.

bon-google-map

An example of a ready-made element:

bon-google-map

Google Pay is a simple and fast way to pay for your shopping in stores and millions of online services. With Google Pay, shoppers can make purchases using credit or debit cards stored in their Google account. If you set up Google Pay to pay, your customers can quickly and securely pay for purchases using payment tools saved in their Google Account.

3.24 Module "Google Pay - 1 Click Checkout"

Back office view

bon-google-pay

Front office view

bon-google-pay

3.24.1 Module settings

First of all, you must get the gateway Merchant Id from your Payment Provider. For example, we choose LIQPAY.

bon-google-pay bon-google-pay bon-google-pay bon-google-pay

Past your Payment Provider Merchant Id into the field "Payment Provider Key" In the module configuration and Payment Provider Secret Key into the field Payment Provider Secret Key.

bon-google-pay

Write your user-visible merchant name.

bon-google-pay

Create google business account and Get the Merchant Id from Google on Google Pay Business Console.

bon-google-pay bon-google-pay

Go to Business Profile in Google Business Console and complete your business profile.

bon-google-pay bon-google-pay bon-google-pay

Go to Google Api Pay in Google Business Console and press "To begin" button and "Add website".

bon-google-pay bon-google-pay

Next enter domain of your website and choose Integration type.

bon-google-pay

Make sure that your Web intagration are complete everything in the integrations section and submit your profile for approval.

bon-google-pay

If you did everything right, Google will confirm your integration during 1-2 days.

bon-google-pay bon-google-pay bon-google-pay

Past your Google Merchant Id into the field "Google merchant identifier" In the module configuration (back office).

bon-google-pay

In the module configuration you can choose payment provider if your provider is not in the list of providers, you can tell us about it and we will check the possibility of its integration.

bon-google-pay

It is also there that you can manage the shipping information for the product page.

bon-google-pay

If you want to remove Google Pay Button from product page, you must remove hook "displayProductAdditionalInfo"

bon-google-pay bon-google-pay

Below is a list of payment providers for the module:

  • Adyen
  • Stripe
  • Checkout.com
  • LiqPay
  • Barion

3.25 Module "Instagram Gallery Feed Photos & Videos User & Hashtag"

Back office view

bon-instagram

Front office view

bon-instagram

3.25.1 Module settings

After successful installation of the module, you can observe the following settings in the module configurations:

bon-instagram

Detailed analysis of each parameter. In the "Access token" field, you must enter the Instagram token. Token Guide

bon-instagram

The "Enable Instagram Feed" parameter is the main one and is responsible for displaying in the front office. Option "YES" displays the module, "NO" does not display accordingly.

bon-instagram

The "Display item" parameter is responsible for the number of displayed images in the front office.(We recommend specifying no more than 16 images for correct display).

bon-instagram

In the "Display username on hover" activates the display of the Instagram username when hovering over the picture.

bon-instagram

In the "Display post creation date on hover" activates the display of the creation date of the post from which the image was taken when hovering over the image.

bon-instagram

In the "Show instagram icon on hover" activates the display of the Instagram icon when hovering over the image.

bon-instagram

The "Carousel" parameter is responsible for activating the carousel in the front office. Option "YES" turns on the carousel, "NO" turns it off.

bon-instagram

In the field "Number of items in the carousel" you can specify the number of pictures that will be displayed in the carousel.

bon-instagram

The "Autoplay Speed" parameter is responsible for the speed of automatic switching in the front office carousel.

bon-instagram

The "Infinite" parameter is responsible for the length of the carousel track. Option "YES" activates an endless track, adding copies of all elements all the time, option "NO" limits the track to the number of items specified for display.

bon-instagram

The "Navigation" parameter is responsible for the navigation arrows in the carousel. With "YES" the arrows will be displayed, with "NO" they will not.

bon-instagram

The "Pagination", similar to the previous parameter, is responsible for displaying pagination in the form of dots.

bon-instagram

After filling in all the parameters, click the "Save" button.

Note:

1. Why is it necessary to get a token? After this update, the token is mandatory and this is due to the terms of use of the social network Instagram.

2. We are pleased to announce that the new module update includes downloads in addition to profile images and profile videos.

Instructions for obtaining an Instagram token

Go to developers.facebook.com and login with your Facebook account. Then click on My Apps

bon-instagram

Next click on Create App

bon-instagram

In the window that opens, select Consumer

bon-instagram

In the next step, randomly fill in the Display name field and enter your email

bon-instagram

Then you will be redirected to a page where you need to click on the Settings tab and select Basic

bon-instagram

In the page that opens, scroll to the very bottom and click on Add Platform

bon-instagram

Select Website

bon-instagram

After that, in the Site URL field, which is located above the Add platform button, you must enter the URL of your site

bon-instagram

Next, scroll the page to the very top and fill in the fields Privacy Policy URL and User data deletion. After that, save the changes by clicking the Save changes button

bon-instagram

After saving click Add Product

bon-instagram

Find Instagram Basic Display and click Set Up

bon-instagram

Next, go (if you are not already in it) to the Basic Display tab and click Create New App

bon-instagram

In the window that pops up, click Create App

bon-instagram

After saving on the page that opens, enter the URL of your site in the fields Valid OAuth Redirect URIs, Deauthorize callback URL, Data Deletion Request URL and click Save changes

bon-instagram

Click on the Roles tab and in the list that opens, click on Roles

bon-instagram

On the page that opens, in the Instagram Testers window, click Add Instagram Testers

bon-instagram

Enter your Instagram username and click "Submit"

bon-instagram

Next, go to the specified Instagram profile and click on the gear

bon-instagram

In the list that opens, click Apps and Websites

bon-instagram

Next, go to the Tester Invites tab

bon-instagram

Click Accept next to the application with the name that you specified earlier in the previous paragraphs

bon-instagram

Next, return to the tab with creating an application on Facebook and click on the Instagram Basic Display tab and in the list that opens, click on Basic Display

bon-instagram

Scroll to the User Token Generator window and click Generate Token

bon-instagram

In the pop-up window, click I Understand and then you can copy the token.

bon-instagram

Then add the token in the Access token field in the module configurations

bon-instagram

IMPORTANT! The token is valid for 60 days, after which it needs to be updated.

3.26 Module "Product Compare"

Back office view

bon-compare

Front office view

bon-compare

3.26.1 Module settings

For the module icon to be displayed on the product thumbnail, you need to add a hook to the file along the path "themes \ themeboutique \ templates \ catalog \ _partials \ miniatures \ product.tpl".

The code to add:

<div class="boncompare-hook-wrapper" data-id-compare="{$product.id}">

    {hook h="displaybonCompare"}

</div>

Tpl file before change:

bon-compare

Tpl file after change:

bon-compare

This completes the entire configuration of the module.

3.27 Module "News Manager with Videos and Comments"

Back office view

bon-newsmanager

Front office view

bon-newsmanager bon-newsmanager bon-newsmanager

3.27.1 Module settings

There are two windows with settings in the module's configurations, the first is responsible for the module's elements:

bon-newsmanager

Second for the general setting of the available functions:

bon-newsmanager

To create a new news, you can click the "Add new item".

bon-newsmanager

General view of the configuration of the new news:

bon-newsmanager

The required field "Name" is responsible for the title of the news:

bon-newsmanager

The required field "Link Rewrite" is responsible for the unique link of the news:

bon-newsmanager bon-newsmanager

The "Type" field allows you to select the type of news cover - "Image" or "Video":

bon-newsmanager

In the mandatory field "Image / Video" you must add a picture or video, depending on what you have chosen in the "Type" field:

bon-newsmanager

The "Short description" field is responsible for the short description of the news, which will be displayed on the main page and on the page of the general list of all news:

bon-newsmanager

The "Content" field is responsible for the full description of the news, which will be displayed directly on the news page:

bon-newsmanager

The required field "Post Date" is responsible for displaying the publication of the news and will be displayed on the news itself:

bon-newsmanager

The "Author Post" field is responsible for the author of the news and will also be displayed in the news:

bon-newsmanager

In the field "Author image" you can upload a photo of the author of the news:

bon-newsmanager

The "Status" field indicates the activity of the news, if "YES" - the news is displayed, if "NO" - the opposite:

bon-newsmanager

Example of finished news:

bon-newsmanager bon-newsmanager bon-newsmanager

Next, we will consider in detail the general settings of the module.

The required field "Name of main news page" is responsible for the subdomain of the news page:

bon-newsmanager bon-newsmanager

The required field "Number of news on the main page" is responsible for the number of news on one page of the general news list:

bon-newsmanager

The required field "Display item on home page" is responsible for the total number of news that will be displayed on the home page:

bon-newsmanager

The "Add social media share buttons" option is responsible for adding social media share icons to the news page:

bon-newsmanager

The option "Display disqus comments on post page" is responsible for adding the ability to comment on the news:

bon-newsmanager

The field "Disqus short name" must be inserted into the username that can be obtained as a result of registration (registration guide) on the site "disqus.com":

bon-newsmanager

The "Carousel on home page" option is responsible for turning the news slider on and off on the home page:

bon-newsmanager

The "Items" field is responsible for the number of news displayed in the slider, for example, the value "2" will add two news to one slide:

bon-newsmanager

The "Loop" option allows you to activate the infinite scrolling of the news slider by duplicating:

bon-newsmanager

The "Nav" option is responsible for adding the "Next / Prev" buttons:

bon-newsmanager

The "Dots" option allows you to activate the display of navigation points:

bon-newsmanager

We have gone through all the available configurations of the module and now you will be able to configure the news without any problems.

3.28 Module "Advanced Newsletter Popup"

Back office view

bon-newsletter

Front office view

bon-newsletter

3.28.1 Module settings

There are two windows with settings in the module settings:

bon-newsletter

Second for the general setting of the available functions:

bon-newsletter

Let's go through each of the module configuration options in detail.

The "Image" option is responsible for the images of the pop-up window. You can upload images with the following extensions: .png, .jpg, .gif.

bon-newsletter

The "Content" option is responsible for the displayed text in the pop-up window.

bon-newsletter

In the "Start Date" field, you can specify the start date for the newsletter to be displayed. This field is required.

bon-newsletter

In the "End Date" field, you must specify an end date to display the newsletter. This field is required.

bon-newsletter

Let's move on to the general configuration options of the module. The "Background" option sets the background color on which the popup is displayed. This field is required.

bon-newsletter

The "Opacity" field is responsible for the transparency of the background, the color of which we set in the previous paragraph. This field is required.

bon-newsletter

In the "Animation Speed" option, you can set the animation speed for the appearance of the newsletter. This field is required.

bon-newsletter

In the "Time Display" field, you must specify the time during which the pop-up window will be displayed. This field is required.

bon-newsletter

In the "Promo Code" option, you must specify the promo code that will be displayed after the user successfully subscribes to the newsletter.

bon-newsletter

Demonstration of a successful news subscription:

bon-newsletter

The "Animation" option is responsible for the appearance of the animation of the appearance of the pop-up window.

bon-newsletter

This option ends the available module configuration fields. Our support team is always ready to help if you have any questions during the module configuration process.

4. Where and how to change "HOT" and "SALE"

To change the position of HOT and SALE which are located in the main menu

 hot-sale

you need to go to your site using FTP to the folder that’s on the following path themes / your theme / modules / ps_mainmenu / open the file ps_mainmenu.tpl

 hot-sale

On line 39 and 42, change the value of 4 and 6 to move the labels.

 hot-sale  hot-sale

To remove the labels, you must delete the code highlighted above.

hot-sale

Also, most themes have labels inside the dropdown menu, as shown below:

hot-sale

To change e.g. the id of the category above which a label is displayed or to delete a label, you must also open the file "themes / your theme / modules / ps_mainmenu / open the file ps_mainmenu.tpl"

hot-sale

And to remove, as with the previous labels, also remove the code of the desired or all labels

hot-sale

5. Commented out functionality

5.1 Product description

To restore the display of product features, you need to go to the folder along the path "themes / Theme Name / template / catalog", open the file "product.tpl". Next, you need to remove the comment marks that are marked in the image below (Approximate line number on which this code is 164 - 168).

In this file on line 189-191 (approximately), you also need to delete the highlighted lines of code.

5.2 Product list

In order for you to enable product list, go to your website via FTP in the themes folder " themes \ Theme Name \templates\catalog\_partials\" open the file "category-header.tpl" and uncomment the code from 25 to 41 lines

Thanks again for purchasing this theme. As we said at the beginning, we will be happy to help you if you have any questions about this topic. No guarantees, but we'll try to help.

6. Seo Settings

6.1 Product description

Microdata helps search engines find content on the site faster and understand it correctly. The introduction of micro-markup is to use tags and attributes, the purpose of which is to structure information.

6.2 Let's look at how to embed the code in the classic theme

First, let's go to the site Structured data validation

We need to check three pages of the site this is the main page category page and product page

Start from the home page

you need to copy the link and paste it into the URL field

you need to copy the link and paste it into the URL field

and press to button RUN TEST

After clicking after a while you will see two columns

in the left column you will have the code of the entire site and on the right, found ERRORS, WARNINGS and ITEMS

ERRORS, WARNINGS and ITEMS

Then you need to click on the product with an error

product with an error

now you need to go through your FTP to the site in the folder themes\classic\templates\catalog\_partials\miniatures\ and open file product.tpl

you will see the code of the product block

product block

and as in the Structured Data Testing Tool we see the first error related to availability ( whether in stock or not )

in the product.tpl file between lines 72 and 73, insert the following code

<link itemprop="availability" href="{$ product.seo_availability}" />

insert the following code

and reload your site page

As you can see this error disappeared, it means that google bot saw the availability meta tag and displayed it

We will continue to correct errors.

now we need to fix priceValidUntil

If you have a promotional item with a discount that ends on a specific day? - Then you would like to fill in this variable

If you have an item with a standard price and you do not know when the price will change - Then you don't need to fill this variable

After you have inserted the code for availability, you need to enter

<meta itemprop="priceValidUntil" content="2029-12-31">

after it

also reload the site page and see if the error is gone

how do we see that the error is gone

error is gone

then we see the URL error (Item url.)

error is gone

After priceValidUntil, add the code <link itemprop="url" href="{$ product.link}" />

error is gone

and again reload the site page

how do we see that the error is gone

aggregateRating we will skip for now

We don't have much left

Now you need to fix the error associated with description

-------------------------------------------------------------------------

in the same product.tpl file lines 79 add code

<meta itemprop="description" content="{$product.name}"/>

and reload the site page

how do we see that the description error is gone

For how many brands are not used on the main page of the site, we will not indicate it, but if you need it, specify it after the description

<meta itemprop="brand" content="{$product->manufacturer_name|escape:'htmlall':'UTF-8'}"/>

or use a module for this

Next, we will fix the error related to image

To do this, in the same product.tpl file on line 33 in the img tag we need to add itemprop = "image" between lines 36 and 38

To fix the sku and mpn error you need to add in the same product.tpl file

Insert code between lines 28 and 29

<meta itemprop="sku" content="{$product.id_product}" />

<meta itemprop="mpn" content="{$product.reference}" />

But for the reference, you need to specify the value in the back office in the product settings so that the value is used and the error is eliminated

as you can see in the image below, I indicated on the first product mpn (Reference) and there were only 2 errors left, but on 3 products there are one more errors, this is Reference

7. Renewal of addon subscription

How do I renew my Addon subscription? Step-by-step instructions

Modules and themes sold on PrestaShop Addons usually change to fit different software versions and to meet the needs of the merchants. To implement improvements, our team is updating modules and templates.

Thus, we are making changes related to bug fixes and functionality enhancements.

You must be a Business Care subscriber to receive our updates and technical support.

What is the Business Care subscription?

From July 1, 2021, the Zen Option will be replaced by a new offer called 'Business Care', available as a subscription on the PrestaShop Addons marketplace.

What is included in the 'Business Care' subscription?

  • Access to all minor and major updates
  • Unlimited support as soon as the subscription is active (questions on how to use the product and how to solve technical issues)
  • The first annual fee is paid when the Addon is purchased The duration of the subscription is 12 months from the date of purchase of the Addon

But what if you had 'Zen Option' subscription and the subscription period has expired?

The Business Care subscription is now available for all customers. All customers who purchased modules or themes before the launch of "Business Care" can subscribe to the subscription and enjoy all its benefits!

How do I renew my subscription? Follow us step by step!

Log in to your account on Prestashop and go to Support and updates page

renewal of addon renewal of addon renewal of addon

Choose a theme or a module for which you want to extend the support and click "Add to Cart"

renewal of addon
eye-body
Welcome to our documentation