1. Installation theme

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

Then click on the button “Add new theme”

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

Then click on the button “Use this 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

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”

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:

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:

- Translation Front Office

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

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

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

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! Now you need to write a translation for your site and click save

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

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

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

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!

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

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!

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

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

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

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

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

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

3. Modules Setting

3.1 Module "Theme Settings"

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

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.

3.2 Module "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.

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.

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

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

You also have the option to upload a video

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

3.3 Module "Responsive banners"

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

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.

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.

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

3.4 Module "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.

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"

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

3.5 Module "GDPR EU Cookie Law Banner"

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

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"

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

3.6 Module "HTML Content"

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

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.

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"

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.

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

3.7 Module "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.

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.

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.

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

3.8 Module "Brand Manager"

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

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.

3.9 Module "Product Discounts with Countdown"

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

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

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.

3.10 Module "Product Images Zoom"

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

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.

3.11 Module "Product Video Youtube"

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

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.

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

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.

3.12 Module "Product 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.

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.

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

3.13 Module "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.

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

3.14 Module "Online Chat"

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

After that, you must confirm your email

Next copy your Zendesk key

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

There is Dashboard where you can configure your chat

3.15 Module "Product 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.

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

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

3.16 Module "Facebook logins"

Back office view

Front office view

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

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\"

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

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

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:

To begin, click the "Get Started" link in the top right menu.

Create a Meta for Developers to develop and manage apps that access the Graph API, improve other developers' apps, and participate in the Meta for Developers community.

Then click "Create Application"

Select application type "Company" Once an application has been created, its type cannot be changed.

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.

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.

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

Then enter "Privacy Policy URL", "Terms of Service URL", choose Category and enable live mode.

After saving the settings, you need to go to the "Products" tab, click on "Add Product" and add Facebook Login.

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

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

Go to "Permissions and Features" tab and find "public_profile" and click "Get Advanced Access".

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

Enter the received keys into the module fields.

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

Click "Select a project -> New Project" .

And then click the button “Create”.

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

Select "External" and click "Create".

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

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

In the next, we also press the system.

In the last paragraph, click "back to dashboard"

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

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

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.

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

3.17 Module "Bonask"

Back office view

Front office view

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.

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.

3.17.2 Work demonstration

User filling out a form.

Message to administrator mail.

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

You need to go to "Manage hooks".

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.

3.18 Module "Call Back"

Back office view

Front office view

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.

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

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

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

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.

Message by mail

3.19 Module "Latest purchase"

Back office view

Front office view

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.

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

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

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

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.

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

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

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

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

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

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

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.

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

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

3.20 Module "Wishlist"

Back office view

Front office view

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.

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

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

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

Front office view

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:

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

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.

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.

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

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

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

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

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

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

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

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

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.

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.

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.

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

This completes the setting of the element.

3.22 Module "Product Attributes and Combinations"

Back office view

Front office view

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

3.22.1 Module settings

Module configurations.

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.

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

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

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:

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

3.23 Module "Google Map"

Back office view

Front office view

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.

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.

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

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

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

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

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

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

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

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

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.

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

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.

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.

Let's figure out the fields available for settings.

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

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

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

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

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

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.

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

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

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.

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.

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.

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

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

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

An example of a ready-made element:

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

Front office view

3.24.1 Module settings

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

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.

Write your user-visible merchant name.

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

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

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

Next enter domain of your website and choose Integration type.

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

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

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

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.

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

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

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

Front office view

3.25.1 Module settings

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

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

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.

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

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

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.

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

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

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

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

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.

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

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

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

Next click on Create App

In the window that opens, select Consumer

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

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

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

Select Website

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

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

After saving click Add Product

Find Instagram Basic Display and click Set Up

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

In the window that pops up, click Create App

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

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

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

Enter your Instagram username and click "Submit"

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

In the list that opens, click Apps and Websites

Next, go to the Tester Invites tab

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

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

Scroll to the User Token Generator window and click Generate Token

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

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

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

3.26 Module "Product Compare"

Back office view

Front office view

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:

Tpl file after change:

This completes the entire configuration of the module.

3.27 Module "News Manager with Videos and Comments"

Back office view

Front office view

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:

Second for the general setting of the available functions:

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

General view of the configuration of the new news:

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

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

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

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

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:

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

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

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

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

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

Example of finished news:

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:

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:

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

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

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

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":

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

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:

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

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

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

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

Front office view

3.28.1 Module settings

There are two windows with settings in the module settings:

Second for the general setting of the available functions:

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.

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

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

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

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.

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.

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

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

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

Demonstration of a successful news subscription:

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

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.

3.28 Module "Extended Mega Menu with Products, Banners & Videos"

Create new item::

After the successful installation of the module, the following slider settings can be observed in the module configurations:

TAB General settings:

Here you can choose a hook for mobile and desktop menus, menu direction type, menu width, and max menu subcategories depth, also you can switch on or switch off brands images and brands name, choose brand image type (for "All brands" menu item), enable and disable category image in the menu popup.

TAB Selected items:

Here you can manage top-level menu items: create, modify, reorder.

TAB Main Category Style:

Here you can manage top-level menu styles: choose menu background color or image, choose menu horizontal alignment, font family, colors, text transform, font size and hover effects.

TAB Subcategories Style:

Here you can manage subcategories menu styles: choose menu background color, width, direction type, font family, colors, font size.

TAB Mobile Settings:

Here you can hide menu on mobile devices and tablets, choose on which screen the desktop menu turns into a mobile one and manage mobile menu styles.

TAB Contant Info Settings:

Here you can manage contact information, which displays in the hidden and vertical menu.

Click on the button "View" on the main module page and you will see additional settings. Here you can choose a subcategory view style, add banners and videos to the menu popup, add products, labels and icons

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

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

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

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

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

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

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"

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

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

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

Then you need to click on the 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

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}" />

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

then we see the URL error (Item url.)

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

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

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