Pearl Theme for Magento 2.

Version 1.7.2 - August 2, 2018

User Guide.

THEME FILES.

The theme includes the following files:

Theme and associated extension files
Documentation
Licensing
Theme sample data

Highly Modular Theme Package.

The theme comes with modular design and associated WeltPixel extensions that highly increase the theme functionality.

Pearl Theme files are located under below folder structure:

app/design/frontend/Pearl/weltpixel
app/design/frontend/Pearl/weltpixel_custom
pub/media
app/code/WeltPixel/Backend
app/code/WeltPixel/FrontendOptions
app/code/WeltPixel/DesignElements
app/code/WeltPixel/CustomHeader
app/code/WeltPixel/CustomFooter
app/code/WeltPixel/ProductPage
app/code/WeltPixel/CategoryPage
app/code/WeltPixel/Command
app/code/WeltPixel/SampleData

Associated WeltPixel extensions highly increase the theme functionality and are fully compatible with Pearl Theme saving you time that you can dedicate building your store instead of debugging compatibility issues. Extension Files are located under below folder structure, you can choose the extensions you need, and deactivate the ones you don't need - this way you code will be light, fast and more conflict free.

app/code/WeltPixel/NavigationLinks (MegaMenu)
app/code/WeltPixel/OwlCarouselSlider
app/code/WeltPixel/Quickview
app/code/WeltPixel/GoogleCards
app/code/WeltPixel/TitleRewrite
app/code/WeltPixel/SmartProductTabs
app/code/WeltPixel/MobileDetect
app/code/WeltPixel/InstagramWidget
app/code/WeltPixel/FullPageScroll
app/code/WeltPixel/GoogleTagManager
app/code/WeltPixel/Sitemap
app/code/WeltPixel/QuickCart
app/code/WeltPixel/ReviewsWidget
app/code/WeltPixel/Multistore
app/code/WeltPixel/ThankYouPage
app/code/WeltPixel/AjaxInfiniteScroll
app/code/WeltPixel/SearchAutoComplete
app/code/WeltPixel/LazyLoading
app/code/WeltPixel/LayeredNavigation
app/code/WeltPixel/EnhancedEmail (Pearl Theme Professional Pack only)
app/code/WeltPixel/CmsBlockScheduler (Pearl Theme Professional Pack only)

Modularity advantages.

Fast and light code - unnecessary sections or extensions from Pearl Theme theme can be disabled.
Easy debugging - each section of the theme can be disabled in order to identify a potential issue.
Easily replace sections of the theme with other 3rd party functionalityes, easy integration without any coding needed. (Example: you can disable WeltPixel MegaMenu and use a 3rd party MegaMenu extension that you prefeer)

For even more speed: Modular Design Elements.

Disable any Design Elements that you don't use from admin options and coresponding code will not be loaded.
Not only the theme and extensions are highly modular but also the all design elements included in the theme.
Yes / No admin option for disabling elements not used.
Enable/ Disable: Bootstrap Grid, Icons, Tables, Toggle, Accordion, Tabs, Pricing Boxes, Headings and Blockquotes, Dividers, Brand lists, Responsive and Helpers, Smooth Scrolling, Icon Boxes, Alert Boxes, Testomonials, Flex Slider, Buttons, Sections/Parallax, Back to top Button, etc..

PREREQUISITES.

Magento Compatibility.

Before installing Pearl Theme on a Magento Store please check the theme compatibility. Pearl is currently compatible with the following Magento Open Source, Commerce & Commerce Cloud, B2B versions:

2.0.X
2.1.X
2.2.0
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5

It is highly recommended to install the theme first on a testing server before you install it on a live (production) server.

Note: Make sure to enable Magento Developer Mode before installation - this guide can help: How to set Magento 2 Developer and Production Mode

Magento Commerce Cloud Compatibility.

Pearl Theme for Magento 2 is also compatible with Magento Commerce Cloud Edition or other read-only environmnets. The necessary patch is included in Pearl Theme Commerce Pack. More details under Magento Commerce Cloud Installation chapter.

Browser Compatibility.

Pearl Theme is compatible with most used modern browsers since Jan 1st, 2015 until today. We constantly check browsers compatibility with each release. Older browser versions, or other browsers not mentioned might also be compatible with Pearl Theme.

Compatible Browswers:

Chrome: starting with version 40
Firefox: starting with version 35
Safari: starting with version 7
Opera: starting with version 23
IE: starting with version 11
Edge: starting with version 38

Magento Marketplace.

Make sure you do not have other WeltPixel extensions installed via Magento Marketplace Composer as the same installed extensions are already included in Pearl Theme installation. If you have a clean installation or no WeltPixel products installed you can proceed forward with the installation and ignore below instructions.

When installed via Composer, the extension code is installed under ‘/vendor/weltpixel/’ folder. When manually installing an extension it is copied under ‘/app/code/WeltPixel/‘ so by duplicating the extension code in both locations you will experience installation issues. Follow below guide to uninstall all WeltPixel extensions installed via Magento Marketplace Composer (under /vendor/weltpixel/) before proceeding further with Pearl Theme installation. This guide can help: How to uninstall and remove a Magento 2 extension ( manual vs composer )

Quick Installation.

Pearl Theme GUI (browser) Installation.

Step 1:

Disable Magento Cache from System -> Cache Management -> Select All and hit disable and refresh all caches. Note: This step is required even if cache is disabled.

Step 2.

Unpack and upload the content from 'Theme Files' directory into the root of your Magento installation.

This process will not overwrite any file that you might have on your server, it will only merge them!

Step 3.

In your browser go to www.yourmagentostore.com/pearl-theme-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video .

Step 4.

Woohoo! Pearl Theme is installed and your store should be already looking awesome!

Note: In order to prevent unauthorised access to your installation GUI, we advise to remove or rename the folder ‘pearl-theme-installation’ from the root of your Magento installation once the installation is completed.

Troubleshooting:

If you experienced any issues or limitations with this quick GUI installation, see also Pearl Theme - Advanced SSH Installation. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.

ADVANCED SSH Installation.

Pearl Theme. SSH Installation Steps.

Step 1:

Disable Magento Cache from System -> Cache Management -> Select All and hit disable and refresh all caches. Note: This step is required even if cache is disabled.

Step 2.

Unpack and upload the content from 'Theme Files' directory into the root of your Magento installation.

This process will not overwrite any file that you might have on your server, it will only merge them!

Step 3.

Connect via SSH connection to your server and run the following commands under location 'mymagentostore.com/html':

If you encounter any conectivity or permissions problems your hosting provider should help providing all necessary details.

Depending on your hosting provider, for some servers command 'php bin/magento' does not work, you may want to replace it with '/usr/local/php56/bin/php-cli bin/magento' or '/usr/local/php70/bin/php-cli bin/magento' . Example: '/usr/local/php70/bin/php-cli bin/magento deploy:mode:set developer'

# a. make sure Developer Mode is enabled for your store
php bin/magento deploy:mode:set developer

# b1. enable WeltPixel Theme modules (Start with Weltpixel_Backend)
php bin/magento module:enable WeltPixel_Backend --clear-static-content
php bin/magento module:enable WeltPixel_FrontendOptions --clear-static-content
php bin/magento module:enable WeltPixel_DesignElements --clear-static-content
php bin/magento module:enable WeltPixel_CustomHeader --clear-static-content
php bin/magento module:enable WeltPixel_CustomFooter --clear-static-content
php bin/magento module:enable WeltPixel_NavigationLinks --clear-static-content
php bin/magento module:enable WeltPixel_ProductPage --clear-static-content
php bin/magento module:enable WeltPixel_OwlCarouselSlider --clear-static-content
php bin/magento module:enable WeltPixel_LazyLoading --clear-static-content
php bin/magento module:enable WeltPixel_CategoryPage --clear-static-content
php bin/magento module:enable WeltPixel_Command --clear-static-content

#b2. enable WeltPixel extensions included in Theme Pack (optional)

php bin/magento module:enable WeltPixel_Quickview --clear-static-content
php bin/magento module:enable WeltPixel_GoogleCards --clear-static-content
php bin/magento module:enable WeltPixel_TitleRewrite --clear-static-content
php bin/magento module:enable WeltPixel_SmartProductTabs --clear-static-content
php bin/magento module:enable WeltPixel_MobileDetect --clear-static-content
php bin/magento module:enable WeltPixel_InstagramWidget --clear-static-content
php bin/magento module:enable WeltPixel_FullPageScroll --clear-static-content
php bin/magento module:enable WeltPixel_GoogleTagManager --clear-static-content
php bin/magento module:enable WeltPixel_Sitemap --clear-static-content
php bin/magento module:enable WeltPixel_QuickCart --clear-static-content
php bin/magento module:enable WeltPixel_ReviewsWidget --clear-static-content
php bin/magento module:enable WeltPixel_Multistore --clear-static-content
php bin/magento module:enable WeltPixel_ThankYouPage --clear-static-content
php bin/magento module:enable WeltPixel_AjaxInfiniteScroll --clear-static-content
php bin/magento module:enable WeltPixel_SearchAutoComplete --clear-static-content
php bin/magento module:enable WeltPixel_CmsBlockScheduler --clear-static-content
php bin/magento module:enable WeltPixel_LayeredNavigation --clear-static-content



# c. Following command needed only for Pearl Theme sample data installation, otherwise can be skipped
php bin/magento module:enable WeltPixel_SampleData --clear-static-content


# d. clear cache
php bin/magento cache:flush


# e. run magento upgrade scripts
php bin/magento setup:upgrade


# f. generate static content
rm -rf pub/static/_requirejs
rm -rf var/view_preprocessed

#g. Theme Sample Settings Import, depending on required demo store homepage / settings, use different demo version 'v2', 'v3', ...
#   Run below commands even if you do not use a Pearl sample homepage, in below order:

php bin/magento weltpixel:import:demo --store=GLOBAL --demoVersion=v1
php bin/magento weltpixel:theme:configurator --store=GLOBAL --homePage=v1 --header=v1 --categoryPage=3columns --productPage=v1 --footer=v3
php bin/magento weltpixel:cleanup
php bin/magento weltpixel:less:generate
php bin/magento ca:cl

Theme layout Pre-configuration via SSH

Page layout configuration can be done also from Magento Admin, if you want to customize the theme using Pearl Theme admin options skip below instructions and continue to Step 4.

Some users may prefer using SSH import settings to pre-configure pages layout. If you find yourself in this case you can use the theme configuration options below to setup the layout for each page type.

Visit Pearl Demo Store and choose the layout you like for each page type. Available options below:

[--homePage[="..."]] = v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v14, v15

[--header[="..."]] = v1, v2, v3, v4

[--categoryPage[="..."]] = 2columns, 3columns, 4columns, 5columns

[--productPage[="..."]] = v1, v2, v3, v4

[--footer[="..."]] = v1, v2, v3, v4

[--store="..."] = default, GLOBAL

[--demoVersion] = v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v14, v15

When changing between sample home pages make sure to run corresponding import options as each homepage comes with predefined theme settings.

php bin/magento weltpixel:import:demo [--store="..."] [--demoVersion]
php bin/magento weltpixel:theme:configurator [--store="..."] [--homePage[="..."]] [--header[="..."]] [--categoryPage[="..."]] [--productPage[="..."]] [--footer[="..."]]
php bin/magento weltpixel:cleanup
php bin/magento weltpixel:less:generate
php bin/magento ca:cl

Example how to set Homepage V8 with coresponding V8 theme options, Header Version 1, Category Page on 3 columns, Product Page Version 1, Footer Version 3:

php bin/magento weltpixel:import:demo --store=GLOBAL --demoVersion=v8
php bin/magento weltpixel:theme:configurator --store=GLOBAL --homePage=v8 --header=v1 --categoryPage=3columns --productPage=v1 --footer=v3
php bin/magento weltpixel:cleanup
php bin/magento weltpixel:less:generate
php bin/magento ca:cl

Step 4.

Enable the theme from Magento Admin

Go to Admin -> Content ->Design Configuration and set your default theme to Custom Pearl Theme for Magento 2, for desired store view.

or you have the possibility to Enable the theme directly from SSH

php bin/magento weltpixel:theme:activate --store=GLOBAL --themePath="Pearl/weltpixel_custom"
php bin/magento weltpixel:less:generate
php bin/magento weltpixel:css:generate --store=default
php bin/magento cache:clean

Step 5.

Woohoo! Pearl Theme is installed and your store should be already looking awesome!

Magento Commerce Cloud Installation.

1. Copy theme files from Theme Files (Magento Commerce) folder (only app and pub folders) in the root of your magento installation.

2. Before you commit any files to Commerce Cloud Github repository, apply patch from ‘Patches/Magento Commerce Cloud patch’ by following below steps:

Step 1.

Copy the content of ‘Patches/Magento Commerce Cloud patch’ folder into the root of your Magento installation.

Step 2.

After patch files are copied, on UNIX / MAC OS systems run the pearl_cloud_setups.sh script using this command in the CLI in the root of your project, where your copied the files:

./pearl_cloud_setups.sh

Once the script is executed you should receive the message "DONE" in your CLI.

In order to make sure that patch was successfully applied you can verify that symlinks were created at these locations; 'css' should be a symlink/alias and not a directory:

app/code/WeltPixel/CategoryPage/view/frontend/web/css
app/code/WeltPixel/CustomHeader/view/frontend/web/css
app/code/WeltPixel/FrontendOptions/view/frontend/web/css
app/code/WeltPixel/ProductPage/view/frontend/web/css
app/code/WeltPixel/QuickCart/view/frontend/web/css

Step 3.

Pearl Theme code is now ready to be committed to Github and deployed on your Cloud environment. Commit the code to your Commerce Cloud repository. The environment should automatically deploy the code to the magento installation coresponding to the git repository where the code was comitted.

For more details about installing Pearl Theme you can check the detailed article on Pearl Theme Commerce Cloud Installation using UNIX systems from our Support Center.

Important:
After deploy, go to Cache Management section of your Magento Admin and Regenerate Pearl Theme LESS/CSS files in order to correctly apply all theme options. You can automate the Pearl Theme LESS/CSS generation by adding the corresponding commands in .magento.app.yaml file from the root of your cloud installation, this commands will be automatically executed with each deploy. Please find below deploy hook structure of .magento.app.yaml file.

 
# The hooks executed at various points in the lifecycle of the application.
hooks:
# We run build hooks before your application has been packaged.
build: |
php ./bin/magento magento-cloud:build
# We run deploy hook after your application has been deployed and started.
deploy: |
php ./vendor/magento/magento-cloud-configuration/pre-deploy.php
php ./bin/magento magento-cloud:deploy
php ./bin/magento weltpixel:less:generate
php ./bin/magento weltpixel:css:generate --store=default

Step 4.

Woohoo! Pearl Theme is installed and your store should be already looking awesome!

Theme layout Pre-configuration via SSH

Visit Pearl Demo Store and choose the layout you like for each page type. Available options below:

[--homePage[="..."]] = v1, v2, v3, v4, v5, v6, v7, v8, v9, v10

[--header[="..."]] = v1, v2, v3, v4

[--categoryPage[="..."]] = 2columns, 3columns, 4columns, 5columns

[--productPage[="..."]] = v1, v2, v3, v4

[--footer[="..."]] = v1, v2, v3, v4

[--store="..."] = default, GLOBAL

[--demoVersion] = v1, v2, v3, v4, v5, v6, v7, v8, v9, v10

When changing between sample home pages make sure to run corresponding import options as each homepage comes with predefined theme settings.

php bin/magento weltpixel:import:demo [--store="..."] [--demoVersion]
php bin/magento weltpixel:theme:configurator [--store="..."] [--homePage[="..."]] [--header[="..."]] [--categoryPage[="..."]] [--productPage[="..."]] [--footer[="..."]]
php bin/magento weltpixel:cleanup
php bin/magento weltpixel:less:generate
php bin/magento ca:cl

Example how to set Homepage V8 with coresponding V8 theme options, Header Version 1, Category Page on 3 columns, Product Page Version 1, Footer Version 3:

php bin/magento weltpixel:import:demo --store=GLOBAL --demoVersion=v8
php bin/magento weltpixel:theme:configurator --store=GLOBAL --homePage=v8 --header=v1 --categoryPage=3columns --productPage=v1 --footer=v3
php bin/magento weltpixel:cleanup
php bin/magento weltpixel:less:generate
php bin/magento ca:cl

How Commerce Cloud Patch Works.

Note: If you still getting the 'path is not writable' errors when saving admin options, it means the Commerce Cloud patch was not succesfully applied. Make sure you are running the script pearl_cloud_setups.sh on UNIX OS in the root of your project before committing the files to your Commerce Cloud Github repository.

In read-only environments a write limitation is encountered when generating theme LESS files based on theme admin options, as Cloud environments are read-only we cannot generate dynamic LESS files inside the theme modules. Because of this reason in this patch we changed default location of LESS files from 'app/code/WeltPixel' (read-only) to 'pub/media/css_weltpixel' (read / write).

When the pearl_cloud_setups.sh shell script is executed, it removes the css directories under non writable location 'app/code/WeltPixel/...' and creates symlinks to 'pub/media/css_weltpixel/MODULE_NAME/css directories' (as these are writable on the cloud as well.)

Commerce Cloud patch also contains the initial module less files for 5 modules where we generate less on the fly. (CategoryPage, CustomHeader, FrontendOptions, ProductPage, QuickCart).

Once patch is applied, you should not encounter any LESS file generation restrictions when saving Pearl Theme options in your Commerce Cloud environment.

Magento Marketplace Installation.

Guide for users who purchsed Pearl Theme from Magento Marketplace

Step 1. Connect Marketplace account.

Go to your Magento Admin > Web Setup Wizard and select Component Manager.

Sign in and copy-paste your Public key and Private Key in the corresponding fields. You can find the keys in Magent Marketplace account. It may be necessary to create the keys first under Magento Marketplace account if this is the first time you are using Magento Marketplace keys. If you are already signed in with your Magento credentials (public and private key), you don’t need to sign in again.

After you sign in, if page loading is taking too long, try to refresh the page.

Step 2. Syncronize purchased extensions.

Click Sync in order to synchronise your purchases from Magento Marketplace with your magneto installation.

You will see now that you have new purchased extensions (full list available after you click Install).

Click Install and you will be redirected to Extensions Grid page where you can select which extension you want to install.

Step 3. Select the theme for installation.

Select Pearl Theme ( weltpixel/m2-theme-frontend-weltpixel ) and all associated packs that start with 'weltpixel/' identifier. ( weltpixel/m2-weltpixel-category-page, etc..). Make sure you select all 23 associated weltpixel dependancy packs or the theme installation will be incomplete.

Click Install.

Make sure Cron is configured on your magento installation. Now the installer will start.

Step 4. Compatibility Check

Click the Next button in order to proceed with Step 1 of the installer. Now the installer will start to check your environment for the correct PHP version, PHP extensions, Cron, file permission and compatibility. Just click Next on all three steps, and the module will be successfully installed.

Note: If the Readiness check fails, first thing try verifying that the Cron Jobs are running and fixing this may also solve remaining PHP check failures. If necessary, follow the links provided for the type of error you receive. Contact your system administrator to properly setup Cron Jobs for your store.

Step 5. Installation Process

The installation process can take a couple of minutes. Open the Console Log if you want to supervise the installation process. Wait until you are redirected to the SUCCESS page.

Step 6. Add Sample Pictures. (optional)

If Pearl Theme sample data installation is required, download Pearl Sample Images from here as sample images are not supported on Magento Marketplace. Unzip and upload the content in your magento root installation, file structure "pub/media/wysiwyg" and "pub/media/weltpixel" is already created, is enough to copy and paste 'pub' directory in your magento root installation.

Note: Make sure to merge the files with the 'pub' folder and not overwrite it.

Step 7. Activate Pearl Theme.

Activate theme from admin :

Go to System > Configuration > (select store view) > Edit > Applied Theme > Custom Pearl Theme for Magento 2
Go to System > Cache Management > Regenerate Pearl Theme LESS/CSS Files
Go to System > Cache Management > Flush Magento Cache

Activate theme via SSH, in the root of the magento installation execute below commands:

php bin/magento weltpixel:theme:activate --store=GLOBAL --themePath="Pearl/weltpixel_custom"
php bin/magento weltpixel:less:generate
php bin/magento weltpixel:css:generate --store=default
php bin/magento cache:clean

Step 8. Theme Layout Pre-Configuration or restore to default.

If you want to preconfigure the theme with sample data and sample pages, or restore to default settings later, download the GUI Pearl Theme installer from here, unzip the content and copy the folder 'pearl-theme-installation' it in the root of your Magento installation.

In your browser go to www.yourmagentostore.com/pearl-theme-installation/ and follow the steps from the graphical interface. SKIP the installation steps (1,2,3) until you get to STEP 4 - Demo Import, STEP 5 - Theme Configurator and STEP 6 - Clear Cache. See the installation video .

RUN Step 4 - Import predefined demo settings and set demo homepage - without this step the pages may look broken.
RUN Step 5 - Theme Configurator - you also have these options in admin and you can later change the settings
RUN STEP 6 - Clear Cache in order for the layout changes to apply.

Woohoo! Pearl Theme is installed and configured and your store should be already looking awesome!

Upgrade Theme.

How to update Pearl Theme to latest version.

We are constantly releasing theme updates containing fixes, new features and compatibility adjustments with latest Magento releases. You can check Pearl Theme Change log for more details.

Follow this detailed article on our Knowledge Base: How can I upgrade / update Pearl Theme to latest version for detailed steps on how to upgrade the theme to latest version.

Customize Theme (optional)

Check out in below sections how to make customisations to Pearl Theme if needed.
Small Customisations - usefull for small adjustments ( CSS, JS, HTML) using Pearl Theme admin options.
Child Theme Customisations - using Pearl Child Theme already included in this pack for more advanced customisations.

CUSTOM CSS & JS.

It is easy to add simple customization by inserting your CSS and JS code in a few fields introduced by the Pearl theme in your backend.

Your Custom CSS can be applied on each breakpoint which is set in Weltpixel -> Frontend options -> Breakpoints.

You can have your Custom CSS for each breakpoint set in the Weltpixel -> Frontend options -> Breakpoints area.

Custom CSS and JS for category pages.

You can add your own Custom CSS and JS for each individual category page.

Your Custom CSS for categories can be inserted in Products -> Categories -> [desired category] -> WeltPixel options.

So, if you wish to add custom CSS for a category page you just have to add desired CSS classes and declarations.

Custom CSS and JS - static pages

It is easy to add simple customization for a static page by inserting your CSS and JS code in a few fields introduced by the Pearl theme in your backend.

Your Custom CSS for static pages can be inserted in Content -> Pages -> [edit desired page] -> Design.

Custom CSS & JS - static blocks.

It is easy to add simple customization for a static page by inserting your CSS and JS code in a few fields introduced by the Pearl theme in your backend.

Your Custom CSS for static blocks can be inserted in Content -> Blocks -> [edit desired block] and right below the magento editor you can find the fields for the custom CSS and JS.

Child Theme Customizations

Pearl Child Theme Included is already in the package

If you wish to add complex customizations on the theme, go to Admin -> Content ->Design Configuration and set Custom Pearl Theme for Magento 2, for desired store view.

Now, in the file web/css/source/wp_custom.less, you can add your custom CSS. By respecting Magento best practice and making all customizations in a child theme, Pearl Theme will always be update proof and you will not have any risk of loosing your changes.

Note: When you update the theme and if you added your CSS customizations in the wp_custom.less file, make sure you do not overwrite it.

TRANSLATE PEARL THEME.

You can translate Pearl Theme by following next steps:

1. Go to the root of your magento installation ('yourmgentoinstall.com/html') and run below command to export all theme and magento translations.

                           php bin/magento i18n:collect-phrases --output="dictionary.csv" -m

2. Find the generated dictionary.csv file in your root magento installation, open this file , it should contain 4 columns, leave just the first 2, the rest you can delete, they should contain the same english texts.
3. Using a simple editor translate only the second column and the text between “ ”. Make sure all the strings in your .csv file start and end with double quotes, and are separated with comma[,], not semi-colon [;] or any other mark. Example: "Custom Footer","Benutzerdefinierte Fußzeile"
4. After you edited the file, rename the file using magento locale format ( Example: fr_FR.csv, it_IT.csv). The file name must exactly match the locale, and it is case sensitive xx_YY.csv.
5. Copy the file into app/design/frontend/Pearl/weltpixel/i18n/ directory
6.a. For frontend translations make sure you have set your locale in Stores -> Configuration -> General -> Locale Options -> Locale -> Select your language
6.b. For backend translations make sure you have set your users Interface Locale in Account Settings -> Account Information -> Interface Locale -> Select your language
7. Refresh all Magento caches and check results

TRANSLATE MODULES.

You can translate a WeltPixel module by following next steps:

1. Go to app/code/WeltPixel/ModuleYouWantToTranslate/i18n where you should find en_US.csv.
2. Copy the content of this file in a new .csv file using magento locale format ( Example: fr_FR.csv, it_IT.csv). The file name must exactly match the locale, and it is case sensitive xx_YY.csv.
3. Using a simple editor translate only the second column and the text between “ ”. Make sure all the strings in your .csv file start and end with double quotes, and are separated with comma [,], not semi-colon [;] or any other mark. Example: "Custom Footer","Benutzerdefinierte Fußzeile"
4.a. For frontend translations make sure you have set your locale in Stores -> Configuration -> General -> Locale Options -> Locale -> Select your language
4.b. For backend translations make sure you have set your users Interface Locale in Account Settings -> Account Information -> Interface Locale -> Select your language
5. Refresh all Magento caches and check results

CHANGE LOGO.

You can change Pearl Theme logo by following next steps:

Step 1. Go to Magento Admin > Content > Configuration > [store] > Header > Logo Image [Upload]

Step 2. Set Logo Image Width and Height, just fill in numbers, no need to use 'px'.

Step 3. Clear Pearl Theme related cache.
Go to System > Cache Management > WeltPixel Cache Management > Regenerate Pearl Theme Less / Css

Step 4. Woohoo! Your awesome logo is now applied!

Frontend Options.

In this tab you can setup general settings for the frontend of the theme.

IMPORTANT / RECOMMENDED:

1. After changing theme settings make sure to clear related caches: Regenerate Pearl Theme CSS, Flush Magento Cache, Clear Browser Cache (if necessary also Flush JS/CSS Cache, Flush Catalog Images Files, Flush Cache Storage)

2. Make sure you are changing the settings on the right store view, settings may be different in default config vs. storeview

3. NEW: Frontend Options now available at store view level. Use different store locale options (EN, FR, ..) when using Pearl Theme on multiple store views. If using the same language on multiple store views, you should create separate a Pearl Child Theme for each store view. If you only use a single store view no action is necessary.

Breakpoints.

Go to Weltpixel -> Frontend options -> Breakpoints and set your desired breakpoints for different screen sizes resolutions starting from low resolution dedicated for mobile, tablet and up to large screens.

Section width

Go to Weltpixel -> Frontend options -> Section Width and set different widths for the pages or elements of the store:

Page Main: set the width of the main page [in px or %] - this should be set to 100%, all below elements refeer to this value. If you set it to a different value, keep in mind that all the values below expressed in % will refeer to this value and not to 100%.
Footer: set the width of the footer [in px or %] - Example: 1400px, 90%, 100% - for full width use 100%.
Row: set the width of row [in px or %] - you can set the 'row' class width from this value, when you call this class in any page in your store it will show the page width defined here.
Default Page: set width of the default page set [in px or %] - default store pages are pages like: Checkout page, Cart Page, Login Page, and other magento default pages. From here you can set the width of this pages in px or %.
Cms Page: set width of the CMS pages [in px or %] Set the width of CMS pages in your store, for example Homepage or other pages you built. For example you may want to use full width for your Homepage and 1400px for Category Page / Product Page.
Category Page: set width of the category page [in px or %] - Example: 1400px or 90%, for full width use 100%.
Product Pageset width of product page [in px or %] - Example: 1400px or 90%, for full width use 100%.
Header - set the width of the header from Store > Cofiguration > WeltPixel > Custom Header section

Main Options

Go to Weltpixel -> Frontend options -> Main options and set colors:

Primary color: set primary color used on the store
Secondary color: set secondary color used on the store
Page Background Color: set background color of the store
Active Color: set active color
Error Color: set error color

Headings H1 up to H6 and Paragraphs.

Go to Weltpixel -> Frontend options -> H1 and set font, font size, font color and more for the H1 tag:

Text Color: set text color
Google Font Family: set Google Font Family; ! Important to select also 'Character Set' for the new font, in order for font to change.
Google Font Character Set: set Google Font Character Set;
Font Weight: set Font weight [ between 300 and 800 ]
Font Size: set Font size [ in px ]
Font Style: set Font Style, for example you can enter normal or italic
Line Height: set Line Height [ in px ]

Headings from H1 up to H6 tags and also the Paragraphs can be configured.

Default Buttons.

Go to Weltpixel -> Frontend options -> Default Buttons and customize the Default Buttons:

Text Color: set text color for default buttons
Hover Color: set text color on hover over the default button
Background Color: set background color of the default buttons
Hover Background Color: set background color on hover over the default buttons
Border Color: set border color for the default buttons
Border Hover Color: set border color on hover over default buttons
Border Radius: set border radius for default buttons
Google Font Family: set border radius for default buttons [ in px ]
Google Font Character Set: set text Google Font Family used for default buttons text
Font Weight: set Font Weight for the text in the default buttons
Font Size: set Font Size for the text in the default buttons [in px]
Line Height: set Line Height of the text in default buttons [ in px ]

Primary Buttons.

Go to Weltpixel -> Frontend options -> Primary Buttonsand customize the Primary Buttons:

Text Color: set text color for buttons
Hover Color: set text color on hover over primary buttons
Background Color: set background color for primary buttons
Hover Background Color: set background color on hover for primary buttons
Border Color: set border color for primary buttons
Border Hover Color: set border color on hover over primary buttons
Line Height(px): set Line Height of text in primary buttons [ in px ]

Ratings

Go to Weltpixel -> Frontend options -> Ratings and set color and size for Ratings:

Rating Active Color: set color for active stars
Rating Inactive Color: set color for Inactive stars
Rating Icon Size: set Icon size for Ratings [ in px ]

Form inputs.

Input Background: set input background color
Input Border Color: set input border color
Input Border: set input border (ex. 1px solid @form-element-input__border-color;)
Input Border Radius: set input border radius [ in px ]
Input Height: set input height [ in px ]
Input Font Size: set input font size [ in px ]
Input Font Color: set input font color
Google Input Font Family: set Google Font Family
Google Input Font Character Set: set Google Font Character Set
Input Font Weight: set Font Weight
Input Line Height: set font Height
Input Font Style: set font Style
Input Placeholder Color: set placeholder color

Breadcrumbs

Go to Weltpixel -> Frontend options -> Breadcrumbs and set colors, size and style for the breadcrumbs:

Breadcrumbs Font Size: set font size for breadcrumbs [ in px ]
Breadcrumbs Font Style: set font style for breadcrumbs
Breadcrumbs Separator Color: set breadcrumbs separator color
Breadcrumbs Current Page Color: set breadcrumbs current page color
Breadcrumbs Color: set breadcrumbs color
Breadcrumbs Link Hover Text Decoration: set breadcrumb color on hover
Breadcrumbs Background: set breadcrumbs background color

Custom Header

In this area you can customize the header and choose from 4 different header styles already prepared.

Header Version 1

Header Version 2

Header Version 3

Header Version 4

General Settings.

Go to Weltpixel -> Custom Header -> General Settings and choose the type of header you like:

Header Style select the version of header you like, Version 1 to 4

Global Promo Message.

Go to Weltpixel -> Custom Header -> Global Promo Message and choose [ Yes / No ] if you want to show a top bar with promo message or any message for your customers. You can control the bar color and the text color. Once users close this message it will not show again. Useful if you have promotions or special announcements to comunicat.

Enable [ Yes / No ] if enabled, 'weltpixel_global_promo_message' static block content is displayed with below color options.
Text Color set the color code for the text featured in promo box, example: #B05D5D
Background Color et the background color code for the promo box, example: #FFE8E8

Top Header.

Go to Weltpixel -> Custom Header -> Top Header and customize the top header:

Width: set the width of the Top Header [in px]
Link Color: set color for links in header
Visited Link Color: set color for visited link in header
Hover Link Color: set color on hover over links in the header
Active Link Color: set color for active link in the header
Text Color: set text color in the header
Background Color: set background color of the header
Border Bottom Color: set border color of the header bottom

Middle Header.

Go to Weltpixel -> Custom Header -> Middle Headerand customize the middle header:

Width: set width of the middle header [in px]
Background: set background color middle header

Search Options

Go to Weltpixel -> Custom Header -> Search Options and customize the Search Bar:

Search Version: - Select between 2 search versions. Version 1 is configurable with all below options. Search Version 2 has a predefined design.
Field Width: set the width of the search field [in px]
Field Height: set the height of the search field [in px]
Field Border Width: set the border width for Top/Right/Bottom/Left
Field Border Style: set border style of the search bar
Field Border Color: set border color for the search
Font size: set font size for text in search [in px]
Field Background color: set background color of the field in search
Font color: set font color for the text in search

Header Navigation.

Go to Weltpixel -> Custom Header -> Header Navigation and customize the header navigation:

Width: set width of the header [in px]
Background: set background color for the header navigation
Link Color: set link color in header navigation
Hover Link Color: set link color on hover on header navigation
Navigation Shadow: set shadow for header navigation. For example: 0px 10px 30px 0 px rgba(0,0,0,0.05)

Prefooter and Footer.

Go to Weltpixel -> Custom Footer -> PreFooter Settings and enable/disable the PreFooter.

You can customize the prefooter by editing the CMS block with identifier weltpixel_pre-footer in admin to Content -> Blocks .

Go to Weltpixel -> Custom Footer -> Footer Settings and choose the footer version.

Enable: [ Yes / No ]
Footer version: choose footer version

You can go in admin to Content -> Blocks , and edit the block with identifier name weltpixel_footer_v[x], where x is the footer version.

Go to Weltpixel -> Custom Footer -> Copyright Settings: and choose show or hide the copyright section of the footer.

Enable [ Yes / No ] - Edit the copyright content in Content -> Configuration -> Desired store view Edit -> Footer -> Copyright

DESIGN ELEMENTS. MODULAR ELEMENTS.

Disable any Design Elements that you don't use from admin options and coresponding code will not be loaded, offering your store more speed. Also by disabling unused Design Elements you wll experience less conflicts with other 3rd party functionality that you will install in the future.

General.

Go to Weltpixel -> Design Elements-> Generaland set design for elements:

Bootstrap Grid: enable or disable Bootstrap Grid[ Yes / No ]
Icons: enable or disable Icons[ Yes / No ]
Tables: enable or disable tables[ Yes / No ]
Toggle, Accordion and Tabs: enable or disable Toggle, Accordion and Tabs[ Yes / No ]
Pricing Boxes: enable or disable pricing boxes[ Yes / No ]
Headings And Blockquotes: enable or disable Heading and Blockquotes [ Yes / No ]
Dividers: enable or disable dividers [ Yes / No ]
Brand lists: enable or disable Brand lists[ Yes / No ]
Responsive And Helpers: enable or disable Responsive and Helpers[ Yes / No ]
Smooth Scrolling: enable or disable Smooth Scrolling[ Yes / No ]
Icon boxes: enable or disable Icon boxes[ Yes / No ]
Alert boxes: enable or disable Alert boxes [ Yes / No ]
Flex Slider: enable or disable Testimonials [ Yes / No ]
Buttons: enable or disable buttons [ Yes / No ]
Sections/Parallax: enable or disable Sections/Parallax[ Yes / No ]
Animations: enable or disable animations[ Yes / No ]
Activate Back to Top Button: enable or disable Back To Top functionality [ Yes / No ]

BACK TO TOP.

Go to Weltpixel -> Design Elements to enable and customize the back to top button:

Activate Back to Top Button: activate back to top button [Yes / No]
Show button after "x" pixels of scroll down: set after how many pixels of scroll down to show the button [in px]
Reduce the opacity of "Back to Top" button after "x" pixels of scroll down: set after how many pixels of scroll down to reduce the opacity of the button[in px]
Duration of top scrolling animation: duration of top scrolling animation [in ms]

Category Page.

Go to Weltpixel -> Category Page to customize the category page.

General Options.

Go to Weltpixel -> Category Page -> General and choose general settings for the category page:

Display Add To Wishlist: display on category page the icon Add to Wishlist to [Hidden / Top - Left / Top - Left On Hover / Top - Right / Top Right On Hover / Below Swatches On Hover]
Display Add To Compare: display on category page the icon Add to Compare to [Hidden / Top - Left / Top - Left On Hover / Top - Right / Top - Right On Hover / Below Swatches On Hover]
Display Swatches: display swatches on products from category page [ No / Yes / On Hover ]
Display Swatch Tooltip: display swatch tooltip when hover over swatches on products from category page [ Yes / No ]
Display Add to Cart: display on category page the button Add to Cart [ Hidden / Image Bottom / Image Bottom On Hover / Below Price / Below Price On Hoover / Below Swatches On Hover ]
Align Add to Cart Button: align the Add to Cart button [ Center / Left ]
Products per line (Desktop view): set the number of products per line in desktop view [ 3 / 4 / 5 ]
Remove Breadcrumbs: remove the breadcrumbs from the category page [ Yes / No ]

Item Options.

Go to Weltpixel -> Category Page -> Item Options and customize the items from the category page:

Item Box Shadow: set item Box shadow on category page [ex: 0px 5px 30px 0px rgba(0,0,0,0.1)]
Item Border Width: set item border width on category page [ in px ]
Item Border Color: set item border color on category page

Item Image Options.

Go to Weltpixel -> Category Page -> Item Image Optionsand set width and height Items Images in Grid and List view, on the category page:

Enable Hover Image: [Yes / No] select the hover image for each product from Product -> Edit -> Images -> Listing Hover Image.
If you want to show Hover Image also in Product Carousels you can enable this functionality from Magento Admin Sidebar > WeltPixel Logo > Carousels Pro > General Settings > Enable Hover Image on products > [ Yes / No ]
Grid View Image Width (In Px): set image width in Grid View [ in px ]
Grid View Image Height (In Px): set image height in Grid View [ in px ]
List View Image Width (In Px): set image width in List View [ in px ]
List View Image Height (In Px): set image height in List View [ in px ]

Item Name Options.

Go to Weltpixel -> Category Page -> Item Name Options and set text align, font size and text color for Items Name on the category page:

Text Align: align text on items in category page [ Left / Center ]
Font Size: set font size on items in category page [in px]
Text Color: set text color on items in category page

Item Review Options.

Go to Weltpixel -> Category Page -> Item Review Options and set different settings for Item Reviews on the category page:

Display Reviews: display the reviews [ Yes / No ]
Text Align: align reviews text [ Left / Center ]

Item Price Options.

Go to Weltpixel -> Category Page -> Item Price Optionsand customize Item Prices on the category page:

Text Align: align price in items on category page [ Left / Center ]
Price Size: set price size in items on category page [in px]
Price Color: set price color in items on category page
Special Price Size: set size for special price in items on category page [in px]
Special Price Color: set color for special price in items on category page

Item Swatch Options.

Go to Weltpixel -> Category Page ->Item Swatch Options and customize the swatches on items on the category page:

Radius: set radius for swatches on items in category page [ in px ]
Width: set width for swatches on items in category page [ in px ]
Height: set height for swatches on items in category page [ in px ]
Font Size: set font size for swatches on items in category page [ in px ]
Swatch Align: set swatch align on items in category page [ left / center ]

Toolbar.

Go to Weltpixel -> Category Page ->Toolbar and customize the toolbar in category page:

Toolbar Background Color: set the toolbar background color
Toolbar Border Color: set toolbar border color
Toolbar Padding: set padding [ in px ]
Label Font Size: set label font size [ in px ]
Label Font Color: set label font color
Grid / List Background Color: set grid/list background color
Grid / List Background Hover Color: set grid/list background color on hover
Grid / List Background Active Color: set grid/list background active color
Grid / List Border Color: set grid/list border color
Grid / List Border Hover Color: set grid/list border color on hover
Grid / List Border Active Color: set grid/list border active color
Grid / List Icon Size: set grid/list icon size [in px]
Grid / List Icon Color: set grid/list icon color
Grid / List Icon Hover Color: set grid/list icon color on hover
Grid / List Icon Active Color : set grid/list icon active color
Dropdown Background Color: set dropdown background color
Dropdown Background Focus Color: set dropdown background color on focus
Field Border Width: set field border width on top/right/bottom/left [in px]
Dropdown Border Color: set dropdown border color
Dropdown Border Focus Color: set border color on focus
Dropdown Font Size: set font size for dropdown items [ in px ]
Dropdown Font Color: set font color for dropdown text
Dropdown Arrows Color: set arrows color in dropdown
Dropdown Arrows Hover Color: set arrows color on hover
Dropdown Option Font Color: set font color for options in dropdown
Direction Font Size: set font size for direction (ascending/descending) arrows
Direction Font Color: set font color for direction (ascending/descending) colors
Direction Font Hover Color: set font color on hover for direction (ascending/descending) arrows
Pagination Font Size: set font size for elements in pagination area
Pagination Font Color: set font color for elements in pagination area
Pagination Font Hover Color: set font color on hover for elements in pagination area
Pagination Font Active Color: set font color for active element in pagination area
Pagination Background Color: set background color for pagination area
Pagination Background Hover Color: set background color on hover on elements in pagination area
Pagination Background Active Color: set background color for active element in pagination area
Pagination Border Color: set border color for elements in pagination area
Pagination Border Hover Color: set border color on hover for elements in pagination area
Pagination Border Active Color: set border color for active elements in pagination area
Pagination Next / Prev Font Size: set font size for Next / Prev in pagination area
Pagination Next / Prev Font Color: set font color for Next / Prev in pagination area
Pagination Next / Prev Font Hover Color: set font color on hover over Next / Prev in pagination area
Pagination Next / Prev Background Color: set font color on hover over Next / Prev in pagination area
Pagination Next / Prev Background Color: set background color for Next / Prev in pagination area
Pagination Next / Prev Background Hover Color: set background color on hover over Next / Prev in pagination area

Layered Navigation Swatch Options.

Go to Weltpixel -> Category Page -> Layered Navigation Swatch Options and customize the swatches in Layered Navigation on the category page:

Radius: set radius for swatches in layered navigation [ in px ]
Width: set width for swatches in layered navigation [ in px ]
Height: set height for swatches in layered navigation[ in px ]
Font Size: set font size for swatches in layered navigation [ in px ]
Swatch Align: set swatch align in layered navigation [ left / center ]

Custom Link option.

If you would like to have a custom link in the main navigation just go to Products -> Categories -> WeltPixel Options tab and in the Custom link field type any of the following solutions:

Use http:// to create an external link
Use "/" to create a link to the homepage
Use "#" to disable the link

and choose Yes if you wish to open the link in a new tab.

Product page.

In this area you can customize the look and feel of the product page.

The product page is highly customizable. You can customize the images dimensions, the images gallery, the images gallery in fullscreen, the zoom, the swatches and much more.

Note: In order for the product page changes to apply, make sure you are changing the theme options on the Store View ( Defaut Store View) and not globally on Default Config.

The product page is highly customizable. You can customize the images dimensions, the images gallery, the images gallery in fullscreen, the zoom, the swatches and much more. You can choose between 4 demo product pages we already created as a strating point for your project.

Product Page Version 1

Product Page Version 2

Product Page Version 3.

Product Page Version 4.

Based on your selection you can further customize how the product page looks and works.

General Options.

Right from the beginning you can select the layout that you want. You can set how much of from the width of the screen will have the image and the product info areas.

Go to Weltpixel -> Product Page -> General and set general settings for the product page:

Image area width: set width for image section [ in % ], for example you can set it to 60% of the width of the website
Product info area width: set width for product info area [ in %], for example you can set it to 40% of the width of the website
Move Description and Tabs under info area: [ Yes / No ] move description tab, more information tab and reviews tab on right section
Remove wishlist: [ Yes / No ] remove wishlist button from the product page
Remove compare: [ Yes / No ] remove compare button from the product page
Remove email: [ Yes / No ] remove email button from the product page
Remove qty box: [ Yes / No ] remove quantity box from the product page
Remove sku: [ Yes / No ] remove sku info from the product page
Remove stock availability: Remove stock availability Remove stock availability Remove stock availability
Remove Breadcrumbs: [ Yes / No ] remove breadcrumbs from the product page
Remove Tabs Border: [ Yes / No ] remove tabs border on the product page
Information Layout on Desktop: select tabs layout type [ Tab / Accordion / List ]
Quantity Input Type: choose input type for quantity field [ Default input / Dropdown ]
Quantity Dropdown Max Value: set max value for quantity field when is set in dropdown [ value, ex: 10 ]
Display Swatch Tooltip: [ Yes / No ] display tooltip on hover over swatch on product page

Note: The sum of Image area width and Product info area width, should not exceed 100%. This settings is applied only on desktop, on mobile devices the columns will automatically take advantage of the responsive design.

Images

Go to Weltpixel -> Product Page -> Images and set width and height for main image and thumb image on the product page:

Main Image Width: set main image width [ in px ]
Main Image Height: set main image height [ in px ]
Thumb Image Width: set gallery thumb image width [ in px ]
Thumb Image Height: set gallery thumb image height [ in px ]

Gallery.

Go to Weltpixel -> Product Page -> Gallery and set different settings for the image gallery on the product page:

Gallery navigation style: set gallery navigation style [ Thumbs / Dots / None ]
Gallery navigation loop: enable gallery navigation loop [ True / False ]
Turn on/off keyboard arrows navigation: turn on/off keyboard arrows navigation [ True / False]
Turn on/off arrows on the sides preview: turn on/off arrows on the sides preview [ True / False]
Display alt text as image title: display alt text as image title [ True / False ]
Sliding direction of thumbnails: display sliding direction of thumbnails [ Vertical / Horizontal ]
Turn on/off on the thumbs navigation sides: turn on/off the thumbs navigation sides [ True / False]
Sliding type of thumbnails: set sliding type of thumbnails [ Thumbs / Slides ]
Sets transition effect for slides changing: set transition effect for slides changing [ Slide / Crossfade / Dissolve ]
Sets transition duration in ms: set transition duration [in milliseconds ]

Gallery Fullscreen.

Go to Weltpixel -> Product Page -> Gallery Fullscreen and set how the gallery should work when enter in fullscreen of the images gallery on the product page:

Enable Fullscreen Image Zoom: enable fullscreen image zoom [ True / False ]
Fullscreen navigation style: set gallery navigation style in fullscreen [ Thumbs / Dots / None ]
Fullscreen navigation loop: enable gallery navigation loop in fullscreen [ True / False ]
Turn on/off arrows on the sides preview: turn on/off arrows on the sides preview [ True / False]
Display alt text as image title: display alt text as image title [ True / False ]
Sliding direction of thumbnails in full screen: display sliding direction of thumbnails [Vertical / Horizontal]
Sets transition effect for slides changing: set transition effect for slides changing [ Slide / Crossfade / Dissolve ]
Sets transition duration in ms: set transition duration [in milliseconds ]

Magnifier Options.

With this intuitive option users can zoom into your product by simply mousing over them.

Go to Weltpixel -> Product Page -> Magnifier Options and set the position and how the magnifier should work on the product page:

Enable Magnifier: enable or disable the magnifier [ True / False ]
Zoom of fullscreen: set zoom value of fullscreen [ value ]
Top position of magnifier: set top position of magnifier
Left position of magnifier: set left position of magnifier
Width of magnifier block: set width of magnifier block
Width of magnifier block: set height of magnifier block
Action that activates zoom: set action that activates zoom [ Hover / Click ]

Swatch Options.

Go to Weltpixel -> Product Page -> Swatch Options and set how the swatches should look on the product page:

Radius: set radius [ in px ]
Width: set width [ in px ]
Height: set height [ in px ]
Line Height: set line height [ in px ]
Font Size: set font size [ in px ]

CSS Options.

Go to Weltpixel -> Product Page -> CSS Options and set thumbnail image border on the product page:

Thumbnail Image Border: set border color for Thumbnail Image
Tab Active Background: set background color for active tab
Tab Background: set background color for tab
Tab Text Active Color: set text color for active tab
Tab Text Color: set text color in tab
Tab Container Padding: set padding for container [ in px ]

CUSTOM CSS & JS.

You can add your own Custom CSS and JS for categories, static pages and static blocks.

Your Custom CSS can be applied on each breakpoint which is set in Weltpixel -> Frontend options -> Breakpoints.

You can have your Custom CSS for each breakpoint set in the Weltpixel -> Frontend options -> Breakpoints area.

Custom CSS and JS for category pages.

You can add your own Custom CSS and JS for each individual category page.

Your Custom CSS for categories can be inserted in Products -> Categories -> [desired category] -> WeltPixel options.

So, if you wish to add custom CSS for a category page you just have to add desired CSS classes and declarations.

Custom CSS and JS - static pages

You can add your own Custom CSS and JS for any static page Your Custom CSS for static pages can be inserted in Content -> Pages -> [edit desired page] -> Design.

Custom CSS & JS - static blocks.

You can add your own Custom CSS and JS for any static block you wish.

Your Custom CSS for static blocks can be inserted in Content -> Blocks -> [edit desired block] and right below the magento editor you can find the fields for the custom CSS and JS.

Widgets.

Using Widgets you can insert several types of blocks in your static pages.

There are already built 6 types of widgets from which you can choose to insert in your pages, each one with its own functionality: Icon, Heading, Divider, Brands, Accordions and Toggles.

Icon Widget.

Insert a WeltPixel Icon Widget to display Icons in you page, from a very wide list of Icons, by following this steps:

1. Go to Content -> Pages and Edit the page where you wish to insert the Icon
2. Go to Content taband place place the cursor where you wish to have the widget in your page, then click Insert Widget button
3. Select WeltPixel Icon widget and you will be able to customize it in the Widget Options area:
- Select Icon: select the icon you wish to display on the page. Go to the presented link to preview the list of icons
- Icon Size: set icon size [ in px, for example: 20px ]
- Padding: set icon’s padding [ in px, for example: 20px 20px 20px 20px ]
- Custom class: set a custom class to be able to customize it in the Custom CSS field. You can name your custom class, for example: my-class
- Custom CSS: here you can customize the class with the name from the above field. You can set the color of the icon, for example: .my-class{ color: green; }
4. Click Insert Widgetbutton and the widget code will be placed in your page content
5. Save Page and check results in your store frontend

Heading Widget.

Insert a WeltPixel Heading Widget to display Headings in your page.

You can find lots of styles for you headings to insert them in your pages as you desire.

To insert an Heading Widget follow this steps:

1. Go to Content -> Pages and Editthe page where you wish to insert the Heading
2. Go to Content tab and place place the cursor where you wish to have the widget in your page, then click Insert Widget button
3. Select WeltPixel Heading widget and you will be able to customize it in the Widget Options area:
- Select Style: select the style for you heading. Go to the presented link to preview how the styles look.
- Title: insert text for the Heading Title
- Subtitle: insert subtitle text of the Heading
- Title Color: select color for the Heading
- Custom CSS: here you can make advanced customization for the heading. For example, to change the subtitle color: .heading-block.center span{ color: green; }
4. Click Insert Widgetbutton and the widget code will be placed in your page content
5. Save Page and check results in your store frontend

Note: To insert a Text Rotator in the Heading, you have to insert special signs $# in the front and end of the text, and | (vertical bar) between rotating texts.

Divider Widget.

Insert a WeltPixel Divider Widget to display dividers in your page.

You can choose from several different style of dividers and you can insert them in your page as you desire.

To insert a Divider Widget follow this steps:

1. Go to Content -> Pages and Edit the page where you wish to insert the Divider
2. Go to Content tab and place place the cursor where you wish to have the widget/divider in your page, then click Insert Widget button
3. Select WeltPixel Divider widget and you will be able to customize it in the Widget Options area:
- Select Style: select the style for you divider. Go to the presented link to view the list of dividers.
- Select Icon: select the icon you wish to display on the divider. Go to the presented link to preview the list of icons
- Custom class: set a custom class to be able to customize it in the Custom CSS field. You can name your custom class, for example: my-class
- Custom CSS: here you can make advanced customization for the heading. For example, to change the subtitle color: .heading-block.center span{ color: green; }
4. Click Insert Widget button and the widget code will be placed in your page content
5. Save Page and check results in your store frontend

Brands Widget.

Insert a WeltPixel Brands Widget to display a list of brands in your page.

You can view lots of dividers ready for you to insert them in your pages as you desire.

Before creating a Brands Widget you need to create a block with the images which will be part of the widget. Follow this steps to create a block containing the images:

1. Go to Content -> Blocks and click button Add New Block
2. Fill in all necessary data for the new block
3. In the Content area insert one by one the images, using Insert Image button
4. Click Save Block

Note: You can make each image to be a link if you use the href tag. For example:
<a href="http://www.weltpixel.com"><img src=" {{media url="your-image"}}" alt="" /></a>

Now you can use the created block with the images, to insert a Brands Widget. Follow this steps:

1. Go to Content -> Pages and Edit the page where you wish to insert the Brands
2. Go to Content taband place place the cursor where you wish to have the widget/divider in your page, then click Insert Widget button
3. Select WeltPixel Divider widget and you will be able to customize it in the Widget Options area:
- Select Style: select the style for your brands section. Go to the presented link to preview the styles available.
- Block: select the block with the images, previously created
4. Click Insert Widgetbutton and the widget code will be placed in your page content
5. Save Page and check results in your store frontend

Brands with style Carousel, block example :

               <img class="lazyOwl" src="{{media/image1.png}}" alt="
               Lazy Owl Image" data-src="{{media/image1.png}}" />

Toggles Widget.

Insert a WeltPixel Toggle Widget to display toggles in your page.

You can choose from different toggles style ready for you to insert them in your pages.

Before creating a Toggle Widget you have to create a block with the content of the toggle.

Follow this steps to create a block with the content:

1. Go to Content -> Blocks and click button Add New Block
2. Fill in all necessary data for the new block
3. In the Content area insert your content and images as you wish
4. Click Save Block

To insert a Toggle Widget follow this steps:

1. Go to Content -> Pages and Edit the page where you wish to insert the Toggle
2. Go to Content taband place place the cursor where you wish to have the toggle widget in your page, then click Insert Widgetbutton
3. Select WeltPixel Toggle widget and you will be able to customize it in the Widget Optionsarea:
- Select Style: select the style for you toggle. Go to the presented link to preview the list of toggles.
- Background Color: set the background color for toggles with background
- Border Color: set border color for toggles with borders
- Open Icon: set the icon name displayed when the toggle is open
- Close Icon: set the icon name displayed when the toggle is closed
- Title: set title of the toggle
- Block: set previously created block
4. Click Insert Widget button and the widget code will be placed in your page content
5. Save Page and check results in your store frontend

Accordions Widget.

Insert a WeltPixel Accordions Widget to display accordions in your page.

You can choose from different accordions styles ready for you to insert them in your pages.

Before creating an Accordion Widget you can create a block with the content of the accordion.

Follow this steps to create a block with the content:

1. Go to Content -> Blocks and click button Add New Block
2. Fill in all necessary data for the new block
3. In the Content area insert your content and images as you wish
4. Click Save Block

To insert a Accordions Widget follow this steps:

1. Go to Content -> Pages and Edit the page where you wish to insert the Accordion
2. Go to Content tab and place place the cursor where you wish to have the accordion widget in your page, then click Insert Widget button
3. Select WeltPixel Accordion widget and you will be able to customize it in the Widget Options area:
- Select Style: select the style for your toggle. Go to the presented link to preview the list of accordions.
- Background Color: set the background color for accordion with background
- Border Color: set border color for accordion with borders
- Block set previously created block
4. Click Insert Widget button and the widget code will be placed in your page content
5. Save Pageand check results in your store frontend

Accordion Block example:

               <div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>
               Our Mission</div> <div class="acc_content clearfix">Donec sed odio dui. Nulla vitae
               elit libero, a pharetra augue.Nullam id dolor id nibh ultricies vehicula ut id elit.
               Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>

ADVANCE PRODUCT QUICK VIEW AND AJAX CART FOR MAGENTO 2.

About Quick View and Ajax Cart for Magento 2.

Quick View allows users to get a quick look of products without opening the product page.

Add quick view functionality to any button, image, or product from a category listing page, product widget, recommended products or upsell. You can even embed your products on CMS pages or even create lookbook hotspots.

You can easily add to cart any product without leaving the current page by using the Quick View functionality. A popup window, with product details, will appear for each element that is defined to use this functionality: button, image, listing page product, product widget, recommended products or upsell. Easy to configure from settings. You can enable visibility for many elements/sections from quick view. Product zoom available on product page can also be enabled or disabled in quick view pop-up.

You can make this extension your own by configuring all the available options in admin: easily change the looks of the quickview box by using Custom CSS area from admin, control "Continue shopping" and "Go to Checkout" buttons, control where quick view pop-up opens (center, left or right), define number of seconds after the quick view box is closed, other useful settings.

Main features

Hide/Display product image, product thumbnail image, short description, qty selector, product availibity, SKU
Select Quick view button style
Enable/Disable 'Go to product' button in quickview frame
Close quickview in X seconds after adding product to cart
Enable/Disable to Auto scroll to top and open Quickcart
Enable/Disable the pop-up with Continue shopping/Go to Checkout buttons displayed after Add to cart is clicked
Enable/Disable zoom on product image from Quick view pop-up
Add Quick view functionality to any button in your website and link specific product.
SEO Optimization features (PRO version only)
Control the position where Quick View is displayed (center/left side/right side) DEMO CENTRED, DEMO RIGHT, DEMO LEFT (PRO version only)
Choose to Close when background is clicked (PRO version only)
Hotspot functionality, insert hotspots with quickview functionality and create awesome lookbooks, SEE HOTSPOT DEMO (PRO version only)

Configure everything in less than 1 minute.

Go to Admin > WeltPixel > Quickview and Ajax Cart > General

You can customize the extension by completing the fields listed in the left image:

General

Enable on product listing [ Yes / No ] Enable / Disable quick view on product listing
Quickview Type (PRO version only)
- [Default] - Quickview pop-up displayed in the center of the page
- [Right side] - Quickview Slides in the right side of page
- [Left side] - Quickview Slides in the left side of page
Close on Background Click (PRO version only) [ Yes / No ] Enable / Disable to close Quickview pop-up when page background is clicked
Remove product image [ Yes / No ] Show / Hide main product image
Remove product image thumb [ Yes / No ] Show / Hide thumbnails below main product picture
Remove short description [ Yes / No ] Show / Hide short description of products

Remove qty selector [ Yes / No ] Show / Hide product quantity selector in quick view
Enable go to product button [ Yes / No ] Show / hide “go to product” button in quick view
Remove availability [ Yes / No ] Show / hide product availability in quick view
Remove sku [ Yes / No ] Show / Hide product sku in quick view
Button style [ Version 1 / Version 2] Select between 2 types of quick view buttons on product listing page
After adding product to cart, close quick view in X seconds [ Number ] Number of seconds after quick view closes automatically. If you enter 0, it will remain open until you close it.
Auto scroll to top and open mini cart [ Yes / No ] Enable / Disable auto scroll to top of the page and open mini cart
Enable continue shopping / go to checkout buttons [ Yes / No ] After add to cart, Show / Hide navigation buttons “Continue Shopping / Go to Checkout”
Custom CSS [ CSS code ] Enter custom CSS code and easily change the way quick view looks
Enable Zoom [ Yes / No ] Enable / Disable zoom on product picture shown in quick view

SEO OPTIMIZATION.

Add no follow for the quickview link (PRO version only) [ Yes / No ] Add / Remove rel="nofollow" to / from the Quickview links
Add no index (PRO version only) [ Yes / No ] Add / Remove <meta name="robots" content"NOINDEX,FOLLOW"> to / from the head tag of the Quickview pop-up
Add canonical link (PRO version only) [ Yes / No ] Add / Remove canonical link for / from Quickview pop-up

ADVANCED SETTINGS.

Besides listing pages, quick view functionality can also be used in lookbooks, cms pages, blocks or anywhere in your magento2 store.

Check live quick view functionality on Pearl Theme presentation page.
You can see quick view in action by clicking "Buy Now" button.

How to configure quick view on cms pages or blocks:

1. You can add the quick view functionality using the following code:

<a href="javascript: void(0);" data-quickview-url="{{config path="web/unsecure/base_url"}}
weltpixel_quickview/catalog_product/view/id/11"
class="weltpixel-quickview"> <div class="title">
Your text here</div> </a>

2. ...but be sure to replace "id/11" from example with your product ID from your store , in order to find your ID, in admin go to Products > Catalog to the specific product.
3. Put your final code in the content of your specific page or block.

How to configure quick view as hotspots on lookbooks:

You can add the quick view hotspot functionality by following next steps:

1. Go to your CMS page which is the lookbook

2. Click Insert Widget button

3. Select Widget Type to be WeltPixel - Quickview Hotspot

4. Complete the hotspot configuration

5. Click Insert Widget button to insert the hotspot widget in your CMS page

Please make sure to add the widget into a div with the class name "wp-hotspot-quickview" that contains the image tag and the hotspot quickview widget..

You can add the quick view hotspot functionality using the following code:

                        <div class="wp-hotspot-quickview">
                        <img src="my_image.jpg" style="width: 100%" alt="my image">
                        {{widget insert here}}
                        </div>

Multiple hotspots can be inserted in one image.

BANNER SLIDER AND OWL CAROUSEL PRO.

About Banner Slider For Magento 2.

This fully customizable carousel enables you to create and automate visibility for responsive sliders / banners and place them anywhere on your Magento store.

Responsive Banner Slider for Magento 2 is built on top of owl.carousel.js javascript library. It allows you to add banners with images, videos or custom content in your Magento 2 store and automate banners visibility. Sliders are known to increase page engagement and also reduce the bounce rate. Once you add sliders to your pages you can highlight promotions, direct customer attention to special offers, products or pages from your Magento 2 store and attract customers attention from the very first moment.

By using this extension you will be able to:

Attract customers right from the very first moments they are on site.
Highlight your promotion, campaign or any events by using banner slider
Direct customer attention to special offers
Easily insert sliders using magento widgets, no coding needed
Automate promotions by scheduling banners visibility

Create Banner Sliders with the following content:

Images (Separate Mobile and Desktop Image now available in Pro version)
Videos
Links
Buttons
Description
Custom Content

Banner Slider Features.

Responsive design with slider breakpoint control.
Banners can be displayed on any CMS, product and category page
Banner scheduling - each banner may be scheduled to be activated and deactivated at specific time
Feature amazing images and videos - create a unique experience for your customers and grow engagement
Full control over Slider behaviour with functionalities as autoplay, lazyload, loop,transition effect, autoplay hover pause.
Gesture support – mobile friendly;
Add custom CSS and HTML content for each banner
Easy to use - insert slider using magento widgets, no coding needed, unlimited banners

About Owl Product Carousel for Magento 2.

OWL Product Carousel is built on top of owl.carousel.js javascript library. It allows you to add product carousels to any section of your store.

Creating and managing products carousels has never been easier. Using carousels is a good way to showcase the latest or hot products. You can create any number of responsive carousels and place them on your homepage, product page or anywhere on your store. OWL Product Carousel allow store owners to control frontend visibility of product price, compare option, add to cart button, enable carousel auto sliding and much more. You can also add catchy labels to each carousel type so that it could stand out among others.

Create OWL Product Carousels with the following products types:

New Products
Best Sell Products
Sale Products
Recently Viewed Products
Related Products
Upsell Products
Cross-sell Products
Custom Category Products (show products from specific category, now available in Pro version )

OWL Product Carousel Features.

100% Responsive and mobile friendly with support all modern browsers.
Advanced settings for enhanced flexibility.
Unique settings for each carousel slider.
Unlimited products display.
Control number of items to display on desktop, tablet and mobile devices.
Navigation arrows visibility control on desktop, tablet and mobile devices.
Navigation dots visibility control on desktop, tablet and mobile devices.
Product Title, Price and Cart button display/hide options.
Autoplay with speed control.
Mouse over stop.
Loop control.
Lazy load control.
Touch and Swipe enabled so works great on devices like iPhone, iPad, Blackberry, Android etc.
Very lightweight.
Hover Image - show a second product image on mouse hover (now available in Pro version )

How to create a Banner Slider.

Step 1: Define breakpoints

Go to Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders, and set up to four breakpoints for different screen resolutions.
In next steps you will be able to set slider item numbers for each breakpoint . For example, you can set to display 2 items on mobile screens, 3 items on tablets and 4 items on desktop.

a. Go to WeltPixel > Banners for Sliders settings, click on Add New Banner button to create a new banner.

b.1 configure the banner using the Banner Settings:
- Title - set a title for the banner
- Show Title [Yes / No] - show the banner title in frontend, it will show on the banner
- Description - set a description for current banner
- Status [Enabled / Disabled] - enable or disable current banner
- Slider - assign current banner to a specific Slider. Slider Note: If no slider is created yet, you can ignore this option and assign the banner later from Slider Manager
- URL - set the URL where the banner/button should link when clicked on.
  URL Note: set the URL without your store baseurl, ex: /women.html;
  
  URL Note 2: If ‘Text Button’ option is filled, URL will be linked to the button instead of banner

..Banner Settings:
- Target [Same Window / New Window Tab] - choose where the banner/button link should open
- Button Text - fill any text here and it will be displayed on a button on your banner
  Button Text Note: you must set a URL link in order for the button to be displayed on the banner
- Banner Type [Image / Video / Custom] - banners can be Images (upload mobile and desktop images), Videos (insert embed iframe) or Custom (insert custom HTML).
  Example of banner type: Video
```
<iframe id="ytplayer" type="text/html" width="1400"height="900" 
src="https://www.youtube.com/embed/4KEBnFEOOv0?autoplay=1" 
frameborder="0" allow="autoplay; encripted-media" 
allowfullscreen> </iframe>
```
- Create custom banner here - available and applicable only for Banner type ‘Custom’; Here you can create a custom banner different than Image or Video.
- Alt Text- set alternative text if the Banner if an Image; it will show on image hover as tooltip.
- Banner class - here you can view the name of the Wrapper class of the current banner. It can be used in Custom Content field to style each banner from the slider. The name of the class is displayed only after you save the banner.

..Banner Settings:
- Custom HTML Content - insert your custom HTML Content, applicable for current banner, all banner types.
  Example of custom HTML content:
```
        <p class="myclass"> Custom HTML content</p>
     
```
- Custom CSS - insert your custom CSS, applicable for current banner, all banner types.
  Note: Use above ‘Banner Class’ option to apply the CSS only for this banner.
  
  Note 2: ‘Banner Class’ option is generated only after the first banner save, if not present, please save the banner and continue to edit.
  
  Example of custom CSS:
```
  .banner-6 .myclass{ font-size: 38px; }
```
- Banner Valid From - start date for banner to be displayed in Slider.
- Banner Valid To - end date for banner to be displayed in Slider.

C. Save the banner and repeat steps 1.a and 1.b until you have created all necessary banners for your slider.

Step 3: Create and configure your slider

a. Go to WeltPixel > Sliders Manager settings, click on Add New Slider button to create a new slider.

b. configure the Slider using the Slider Settings:

Slider General Configuration

Title - set the slider Title
Show Title [Yes / No] - if enabled, the slider title configured above will show in frontend
Slider Status [Enabled / Disabled] - enable or disable the current slider
Next/Prev buttons [True / False] - show slider navigation buttons
Note: This setting is overwritten by responsive settings

Dots [True / False] - show navigation dots in bottom area of the slider
Banner Transition Effect [Slide / Fade] - slider transition effect
Center Item [True / False] - shows banners on center of the slider and shows neighbour banners
Note: Center option only available for Banner Transition Effect: Slide
StagePadding - shows banners on center of the slider and neighbour banners with specified padding on the sides.
Note: Only available if Transition: Slide and Center:False
Margin - right margin of banners present in slider (in px), by setting this parameter you define the space between banners present in slider.
Items - number of items/banners visible at the same time on the slider
Note: This setting is overwritten by responsive settings

Loop [True / False] - control slider banner loop
LazyLoad [True / False] - Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to the items.
Autoplay [True / False] - activate autoplay for slider items
Autoplay Timeout - set time between changing banners (in miliseconds, for ex: 4000, for 4 seconds)
Autoplay Hover Pause [True / False] - set the autoplay to pause on mouse hover
Auto Height [True / False] - set auto height of the banners in the slider.

Slider Responsive Breakpoints

NOTE: Below responsive settings will overwrite Slider General Configuration

NOTE 2: Breakpoints are already configured in Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders.

If necessary you can change default settings with the ones you require in your project.

Next/Prev Buttons [True / False] - show slider navigation buttons for each breakpoint configured.
Items - number of items/banners visible on the slider for each breakpoint

Step 4. Assign Banners to your Slider

Go to ‘Slider Banners’ tab under ‘Slider Information’
Click on Reset Filter to display all your banners.
Choose the banners you want to display in your slider.
Fill in the banners order in the slider, starting with position 0. If not filled, banners will have by default sort order ‘0’.
Hit ‘Save Slider’.

Step 5 : Insert the slider in your page

You can insert multiple sliders in your pages. Follow next steps to insert in your pages sliders with images/videos or other custom content, using widgets:

Go to Admin > Content > Pages and edit the page where you wish to insert the slider
In Content tab Show Editor click Insert Widget button
Select WeltPixel - Custom Slider Widget
In Widget Options choose the Slider you wish to insert in the page
Click button Insert Widget
Save the page and check results

Advanced Settings:

Advanced users can insert sliders pages that do not have an admin editor by inserting a custom code in the corresponding phtml file.

Inserting Slider code in phtml file

1. Use the following code to insert the slider in your desired phtml file:

      <?php echo $this->getLayout()->createBlock
      ("\WeltPixel\OwlCarouselSlider\Block\Slider\Custom")->setSliderId('3')->toHtml(); ?>

2. Replace the sample value ‘3’ with the desired existing slider id from Weltpixel > Sliders Manager admin grid.

HOW TO CREATE A PRODUCT CAROUSEL.

Step 1: Define breakpoints

Go to Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders ,and set up to four breakpoints for different screen resolutions.

In next steps you will be able to set item numbers in the carousels for each breakpoint . For example, you can set to display 2 items on mobile screens, 3 items on tablets and 4 items on desktop.

!Note: Options set on breakpoints area will overwrite the general carousel options.

Step 2: Choose the type of product carousel you want to include in your store

You can insert/customize Products Carousels with the following product types:

New Products
Sale Products
Best Sell Products
Recently Viewed Products
Related Products
Upsell Products
Cross-sell Products
Custom Category Products (show products from specific category)

New Products Carousel - will be populated with products defined as 'New' in your magento catalog.
Sale Products Carousel - will be populated with products defined as Sale in your magento catalog.
Best Sell Products Carousel - will be dynamically populated with best selling products based on your magento admin statistics (make sure magento statistics are activated and products are visible in catalog in order to show up.)
Recently Viewed Products Carousel - will be dynamically populated with products that users visit in your store while they are logged in
Related Products Carousel - makes sense only on product page, will be populated with related products defined in magento catalog for each specific product.
Upsell Products Carousel - makes sense only on product page, will be populated with upsell products defined in magento catalog for each specific product
Cross-sell Products Carousel - makes sense only on product page, will be populated with cross-sell products defined in magento catalog for each specific product
Note If no products are available to populate a carousel then the carousel will not be displayed in frontend
Custom Category Carousel - carousel will be populated with products from specified category.

Step 3: Enable and configure the product carousel

Go to Admin > WeltPixel > OWL Product Carousels > select desired product carousel tab and select 'Enable'.

You have a wide range of options available to customize behaviour of the carousels:

Enable [Yes / No] - Enable or disable the carousel. If Enabled make sure you have inserted the carousel widget in your page/block.
Note: Related, Cross-sell and Upsell products carousels make sense only on product page, if Enabled the products will be displayed on product page in a carousel instead of default product grid.
Title [Custom title] - insert text with the title desired, leave the field empty if you do not want the title displayed
Show Price [Yes / No] - show / hide the product price for products in the carousel
Show Add To Cart [Yes / No] - show / hide ‘Add to cart’ button for products in the carousel
Show Wishlist [Yes / No] - show / hide wishlist icon for products in the carousel
Show Compare [Yes / No] - show / hide Compare icon for products in the carousel
Random Sort [Yes / No] - if enabled, the products in the carousel are displayed in random order on each refresh
Max Items - the total number of products to be loaded in the carousel.

Beside this general options, there are additional options for customizing each type of carousel:

Next/Prev Button [True / False] - If True, Next / Prev buttons are displayed.
Note: This setting is overwritten by responsive settings
Dots [True / False] - Show / Hide navigation bullets on the bottom of the carousel
Center - [True / False] - shows products on center of the carousel and shows neighbour products on the sides.
Note: This setting is overwritten by responsive settings
StagePadding - shows products on center of the carousel and neighbour products with specified padding on the sides
Note: Only available if Center:False

Note 2: This setting is overwritten by responsive settings
Items - number of items/banners visible at the same time on the slider. This value should be smaller than Max Items.
Note: This setting is overwritten by responsive settings

Loop [True / False] - activate/deactivate loop through items.
Margin - Set right side margin for each item in carousel. Example: for a margin of 30px enter 30 in the field.
LazyLoad [True / False] - Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to them.
Autoplay [True / False] - autoplay the carousel
AutoplayTimeout - set time between changing products (in miliseconds, for ex: 4000, for 4 seconds))
AutoplayHoverPause [True / False] - set the the autoplay to pause on mouse hover

Step 4: Insert product carousel in your page

For New, Sale, Best Sell, Recently Visited Product Carousels:

Go to Admin > Content > Pages and edit the page where you wish to insert the carousel
In Content tab Show Editor click 'Insert Widget' button
Select 'WeltPixel - Product Carousels Widget'
In Widget Options choose the carousel you wish to insert
Hit 'Insert Widget'
Save the page and check results

For Custom Category Product Carousels:

Go to Admin > Content > Pages and edit the page where you wish to insert the carousel
In Content tab Show Editor click 'Insert Widget' button
Select 'WeltPixel - Custom Category Product Carousel'
In Widget Options select the category. The products from selected category will be added in this carousel.
Hit 'Insert Widget'
Save the page and check results.

For Related, Upsell and Cross-sell Product Carousels

1. All you have to do is to Enable this types of carousels and the products will be displayed in a carousel instead of default product grid. You can do this here: WeltPixel > OWL Products Carousel -> Related, Up-sell, Cross-sell Products Carousel -> Enable
2. For Related Products to be displayed, make sure you have defined Related products in your catalog and check the bottom of product detail page.
3. For Up-sell Products to be displayed, make sure you have defined Up-sell products in your catalog and check the bottom of product detail page the section “You may also be interested in the following product(s)”.

My carousel is not showing up, help !?

In order for New and Sale Product Carousel to be displayed, make sure you inserted the carousel in your page/block and there are some products defined as "New" respectively “Sale” in your catalog..

In order for Best Sell Product Carousel to be displayed make sure you inserted the carousel in your page/block and there are some orders in your store, best selling products are determined based on magento statistics. Make sure Magento statistics are activated and best selling products show up in your magento admin statistics. Make sure your products are visible in Catalog in order to show up in this carousel - simple products marked as not visible individually, will not show up in this carousel only if product visibility is enabled.)

In order for Recently Viewed Carousel to be displayed, make sure you inserted the carousel in your page/block. Users must be logged in and visited at least one product in order for this carousel to be populated.

In order for Related Products Carousels, Up-sell Products Carousels to be displayed on product page make sure the carousels are Enabled and the product you are checking have defined at least one related or up-sell product in magento catalog.

For Cross-sell Products to be displayed, make sure you have defined Cross-sell products in your catalog, add that product to cart and check the shopping cart page.

For Custom Category Carousel to be displayed, make sure you entered the correct category and the category contains at least one product. (option available only in Pro version of this extension)

GOOGLE ANALYTICS ENHANCED ECOMMERCE TAG MANAGER FOR MAGENTO2.

PRO version of this extension included only with Pearl Theme Professional Pack.

About Google Analytics For Magento 2.

Google Analytics Enhanced Ecommerce for Magento 2 allows you to get full Enhanced Ecommerce tracking implemented within minutes so you can start gathering valuable data and take data driven decisions.

Easy Installation and Configuration: predefined Variables, Triggers and Tags can be automatically created in your Google Anaytics and Google Tag Manager accounts with one click API sync between your Magento 2 store and your GA and GTM accounts.

Google Analytics Enhanced Ecommerce is implemented using Google Tag Manager and allows you to track Product Impressions, Product Clicks, Product Detail Impressions, Add/Remove product to cart, Promotion Impressions, Promotion Clicks, Measure each step in checkout process, Purchases and Full and Partial Refunds.

With Google Analytics Enhanced Ecommerce, marketers will be able to add, edit or remove marketing and measurement tags without the intervention of webmasters. Google Analytics Enhanced Ecommerce is a free tag management tool where you can deploy and manage various tags and code snippets on a Magento 2 store, such as those intended for traffic analysis and marketing optimization.

At a high level, Google Analytics Enhanced Ecommerce works like this: A small snippet of code is placed on your Magento 2 store, that is connected to the Tag Manager servers. A web based interface is used to install tracking codes on your store automatically. The benefits of this extension is that you usually will have to write no additional code to deploy or modify tracking codes for your marketing or analytics campaigns.

Features of the Extension.

Track product impressions by position in the Category Page
Track product clicks by position in the Category Page
Track product impressions by position in the Search Result Page
Track product clicks by position in the Search Result Page
Track product impressions by position in the Related, Up-sell and Cross-sell section
Track product clicks by position in the Related, Up-sell and Cross-sell section
Track the number of times a product was added to the shopping cart
Track the number of times a product was removed from the shopping cart
Track the number of times a product was included into the checkout process
Track each Checkout Step (billing address, shipping address, shipping options, payment options)
Track purchases with or without shipping and tax fees
Track coupon usage
Track product Brand
Track internal Promotion Impressions
Track internal Promotion Clicks
Internal Promotion Widget
Support for IP anonymization to be in compliance with EU countries
Support for Display Advertising Features
Child Vs Parent (Send Parent Id or Child id cart, checkout and thank you page)
Multi Currency Ready
GDPR compliant with native magento accept cookie functionality
Multi Store Ready
Varnish Cache Ready
Full Page Cache Ready
8KB payload support
Order Success Page Total Calculation (subtotal / grandtotal)
Track Magento User ID
Track user type (customer group)
Google AdWords Remarketing Tracking
Google AdWords Conversion Tracking
GTM API - Create tag, trigger, variables
GTM API - Update tag, trigger, variables (PRO)
Track product review count (PRO)
Track product review score (PRO)
Track stock status (PRO)
Track Sale products (PRO)
Track transactions by product variants (configurable product) (PRO)
Track transactions by product custom options (PRO)
Track custom dimension Page Type (PRO)
Track custom dimension Page Name (PRO)
Product level Custom Dimension / Metric sending (Send up to 5 product attributes to GTM) (PRO)

Made for Web Merchandisers.

"Enhanced Ecommerce gives me information beyond shopper behavior, I actually know what products my customers need!"

Web Merchandisers question:

"How visitors are navigating through my web store, which categories are the most visited, which products are the most often clicked through from a certain category based on their position?"

The Solution:

Our extension allows you to have visibility over merchandise by category, position, products and SKU. You can also extend each report to understand which products from a certain category gets the most views and has the best click through rate based on position in the listings.

Enhanced Ecommerce will also track how many times a product was added to the cart, removed from it or was succesfully purchased. Have full visibility of your customers interaction with your website.

Web Merchandisers question:

"I want to increase Average Order Value, what products are converting as Related, Upsell and Cross-sell? Am I recommending the right products?"

The Solution:

Get a real understanding of how much revenue related, upsell and cross-sell products generated? You can now easily track the Impressions, Click Through Rate, how many times an item was added to the cart and Sales generate. Understand what is working and what doesn’t so you can take quick actions to improve your average order value!

Web Merchandisers question:

"How visitors are navigating through my web store, which categories are the most visited, which products are the most often clicked through from a certain category based on their position?"

The Solution:

Made for Ecommerce Manager.

"All of my data is in one place, and I can see the details behind the big picture so I can optimize marketing programs, and increase sales."" weltpixel

Ecommerce Manager question:

"I don’t have many reviews on my website, should I focus on getting more reviews or really good reviews? How many reviews/product and what review score starts improving conversion rate? "

The Solution:

Custom Dimensions for Product Reviews will allow you to track and understand how product reviews are influencing conversion rate. You will be able to attach a monetary value to every review that you get and be able to understand which review score is positively/negatively influences conversion rate.

Ecommerce Manager question:

"I have many coupon codes and they are posted all over the Internet! How can I understand which coupon from which marketing channel performed the best?"

The Solution:

Enhanced Ecommerce can track coupon code performance by traffic source and medium. This will allow you to quickly understand how much revenue each coupon code generated, what coupons are working on some marketing channels what doesn’t. This way you can optimize your marketing efforts and really understand what kind of promotions are working and where.

Ecommerce Manager question:

"I am wondering if my website is intuitive enough, is my checkout process easy to follow? Are my customers getting stuck in the purchase funnel?"

The Solution:

The Shopping behavior report will let you analyze your users shopping experience form product impressions to transactions. You will better understand which part of your website is not optimized enough and results in abandonment.

The Checkout Behavior Analysis report lets you see how successfully your users moved through your checkout process. The checkout-funnel visualization illustrates how many users moved on from one step to the next, how many abandoned the process at each step, and how many entered the process at each step.

Ecommerce Manager question:

"All the sudden I started selling a product that never got sold before! How can I find out which marketing channel helped me sell this product?"

The Solution:

With Enhanced Ecommerce you can now track which traffic source and marketing initiative generated the sale of an exact product! Stop wondering and start optimizing your marketing efforts to start selling products that you had a hard time to sell before!

Ecommerce Manager question:

"My homepage has multiple banners in the slider, are people actually seeing my 4th slide? Are they clicking through?"

The Solution:

Enhanced Ecommerce has the ability of tracking both impressions as well as click of a specific promotional banner on your website. More then that, it can exactly track how many transactions it generated and what was the total revenue generated by a banner by position. This report will allow you to better optimize the position and the messaging of each of your banners.

Ecommerce Manager question:

"How can spending on traditional marketing channels, such as search engines, comparison engines, emails and affiliates be tied to ROI or optimize?"

The Solution:

See all of your marketing data in one place, with attribution by source so you manage marketing ROI.

Configure.

Step 1:

Go to WeltPixel > Google Analytics Enhanced Ecommerce > General Configuration > Enable Google Tag Manager and set this option to [ Yes ].

Step 2:

You need to create a Google Tag Manager account if you don’t have one already at this link: https://www.google.com/analytics/tag-manager/
Setup Account name, Setup Container from yout Google Tag Manager like in the image.

Step 3:

Once the account is created get the Google Tag Manager (GTM) scripts in admin section of your Magento 2 store WeltPixel > Google Analytics Enhanced Ecommerce > General Configuration.
You need also to get the code for the "<body>" section.

Note: If you already have a Google Tag Manager (GTM) account you can find the script in you Google Tag Manager account in Admin section, as seen in the screenshot.

Go to WeltPixel > Google Analytics Enhanced Ecommerce > General Configuration > Google Tag Manager Javascript Code and paste the code for "<head>" section in your magento store.
Then go to WeltPixel > Google Analytics Enhanced Ecommerce > General Configuration > Google Tag Manager Non-Js Code and paste the code for "<body>" section in your magento store.

Step 4:

In Magento admin configure your Google Tag Manager (GTM) API Credentials in order to automatically link your store with your GTM account and create all default provided triggers automatically with one click.
For this you need to go to WeltPixel > Google Analytics Enhanced Ecommerce > GTM API Configuration and fill in Account ID, Container ID, Universal Analytics Tracking ID. All this information can be found in your

Get information from Google Tag Manager and Google Analytics accounts.
a) Go to Google Tag Manager (GTM) Identify the IDs in your GTM account like in the picture.

b) Go to Google Analytics (GA) You can see how to get your Universal Analytics ID credentials from your Google Analytics account.
Tracking code is available under GA account > Admin > Property settings > Tracking ID as you can see in the picture.

After you click you will find the Tracking ID you need.
Note: Once you fill in the above ID’s save the GA settings in order not to lose the credentials on page refresh.

Step 5:

After filling Accout ID, Container ID and Universal Analytics Tracking ID, hit Sign in to Google and allow to link your Google Tag Manager (GTM) account with your Magento Store

You will be notified to save your credentials in order not to lose them before continuing with the process.

Hit Save Config button.

Go to WeltPixel > Google Analytics Enhanced Ecommerce > GTM API Configuration and hit Create Variables, Triggers and Tags button.

You will be notified about the Variables, Triggers and Tags created.

After all your tags have been created in Google Tag Manager (GTM), go to Google Tag Manager (GTM) and simply publish all your tags. Just follow the steps from Google Tag Manager to finnish the publish.

Step 6:

Woohoo, the extension is configured!
Note: Your GA and GTM account are now configured with our pre-generated settings and ready to receive valuable information from your Magento 2 store! You can now gather valuable data and take data driven decisions! Congrats!
Note 2: If you would like to receive even more personalized tracking data, you can always extend your GTM and GA default configurations from your account. If you would like our Google Certified Specialists to help you with that please contact our support for a quote.

General Configuration

Google Tag Manager Javascript Code Position [ In the head tag / Before body close tag ] - choose position where Javascript code to be inserted. Default: In the head tag.
Impression Chunks Size - allows you to break up the payload into smaller chunks. We recommend limiting it to 15. The analytics.js library refuses to send a hit if the full payload size is larger than 8192 bytes. This does require quite a lot of data to be stuffed within, but it only takes some dozens of product impressions to clog up the channel
Product identifier [ SKU / ID ] - you can identify products in GA and GTM either by SKU or by product ID from your Magento catalog
Enable Brand - if you would like to have each product brand tracked in Google Analytics Ecommerce Reports - select yes and use appropriate brand attribute
Order Success Page Total Calculation [ Subtotal / Grandtotal ] - Caculates total amount on success page based on Subtotal or Grandtotal
Measure Product Clicks - This option allows 'Product Click tracking on Category Page , Search results page and Related/Cross-sell/Up-sell product grids. If Product Click Tracking is enabled this option rewrites Magento_Catalog::product/list.phtml and Magento_Catalog::product/list/list.phtml. If you are using a custom theme/extension already re-writing this templates check here how you can make the necessary compatibility adjustments: How to solve GTM compatibility issues

General Configuration

Promotion Tracking [ Yes / No ] - Example of usage:

                               <a href="#" data-track-promo-id="PROMOID"
                               data-track-promo-name="PROMONAME"
                               data-track-promo-creative="PROMOCREATIVE"
                               data-track-promo-position="PROMOPOSITION">Content
                               </a>

Exclude Tax From Transaction [ Yes / No ] - Exclude taxes amount from transaction
Exclude Shipping From Transaction [ Yes / No ] - Exclude shipping amount from transaction
Custom Dimension - Customer ID [ Yes / No ] - Use customer ID as a custom dimension
Custom Dimension - Customer Group [ Yes / No ] - Use customer group as a custom dimension
Custom Dimension - Stock Status (insctock/out of stock) [ Yes / No ] - Use customer dimension as a custom dimension

GTM API Configuration

Account ID - Must be set as seen in Step 4 from Configure section
Container ID - Must be set as seen in Step 4 from Configure section
Universal Analytics Tracking ID - Must be set as seen in Step 4 from Configure section
I.P Anonymization [ Yes / No ] - Allows website owners to request that all of their users' IP addresses are anonymized. It help website owners comply with their own privacy policies or, in some countries, recommendations from local data protection authorities, which may prevent the storage of full IP address information.

Google Adwords conversion tracking

Enable [ Yes / No ] - Enables Google AdWords conversion tracking
Google Conversion ID - You need a Google AdWords account adwords.google.com. Follow Google documentation on how to find Google Conversion ID for AdWords.
Google Conversion Label - Follow Google documentation on how to find Google Conversion Label for AdWords.
Google Conversion Currency Code - Fill in currency used in AdWords account. e.g. usd

Google AdWords Remarketing

Enable [ Yes / No ] - Enables Google AdWords remarketing.
Google Conversion Code - Follow Google documentation on how to find Google Conversion Code for Google AdWords Remarketing.
Google Conversion Label - Follow Google documentation on how to find Google Conversion Label for Google AdWords Remarketing.

RICH SNIPPETS & CARDS (SCHEMA.ORG) PRO

About RICH SNIPPETS & CARDS.

Boost online store SEO, improve usability and attract more customers by adding Rich Snippets for Google Search, Facebook Open Graph, Twitter Cards and Pinterest Rich Pins.

Rich Snippets

When you use structured data to mark up content, you help Google better understand its context for display in Search, and you achieve better distribution of your content to users from Search.

Rich Snippets enable users to quickly identify specifics about your products and website. Increases real-estate on the Search Result page and increases Click-Thru-Rate (CTR).

Google will discover the structured data as soon as it crawls your site (although it may take some time for the the Rich Snippets to appear in search results). When Google algorithms discover technically correct markup on a page, Google uses a variety of signals to determine when to show Rich Snippets on the search result page.

Twitter Cards

The Product Card is a great way to represent product and retail items on Twitter. This Card type is designed to showcase your products via image, description, price, and highlight site and tweet creator.

With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. By using this extension, users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.

Facebook Open Graph

The Facebook Open Graph protocol enables products sold on your store to become a rich object in a social graph. For instance, this is used on Facebook to allow your store product pages to be highlighted in Facebook feeds.

Pinterest Rich Pins

Rich Pins are Pins that include extra information right on the Pin itself. Rich Pins show metadata right on the Pin itself, giving Pinners a richer experience and increasing engagement. Information in a Rich Pin is independent of the Pin description, ensuring that important information is always tied to the Pin. There are 6 types of Rich Pins: app, article, movie, place, product and recipe Pins.

Rich Pins work by displaying metadata from marked up pages on your website. Once you've applied for Rich Pins, any content on your site with metadata will turn into a Rich Pin when a user saves it.

Features.

Product Structured Data

Name - product name added to structured data
Product Image - first product image added to structured data
Price - TAX control, Special Price control, Special Price End period
- Including / Excluding TAX - In case price is listed with Tax and without Tax select which price should be used
- Special Price - From / To - special price and end date is added to structured data if available
- Price currency - automatically added from store settings
Availability - Indicates that the item is in stock.
Description - ability to select between short and long description when adding product details to structured data.
- Short Description / Long Description
Brand - Select an additional brand that will be added to structured data (Country of manufacture, Shipping, etc..)
SKU - Control over the attribute that is used for product SKU
Review Markup Format - select between Agregate Ratings and Agregate Ratings with Detailed Reviews
- Agregate rating - show only review score and number. ex 4.8 / 5 from 287 reviews
- Agregate rating with Rewiews - add both agregate rating and also latest user rewiews: author, date, message, rating, review name. Specify the number of latest reviews to include. (Pro version)
GTIN - Control over the attribute that is used for product GTIN code (Pro Version)
MPN - Control over the attribute that is used for product MPN code (Pro Version)
Item condition - Control over the attribute that is used for product Item condition New / Damaged / Refurbished / Used (Pro Version)
Breadcrumbs - structured data for links that can help a user understand and navigate a website hierarchy. (Pro Version)

Website Structured Data

Sitelinks Searchbox - When enabed, Google Search will expose a search box scoped to your website when it appears as a search result. (Pro Version)
Rich Snippets Logo - Specify the image Google Search uses for your organization's logo in Search results and in the Knowledge Graph. (Pro Version)
- Use Store Logo - the Logo snippet will use the store default logo
- Upload Custom Logo - you can upload a custom logo, different than the logo used for your store.
Corporate Contact - Use corporate contact markup on your official website to add your company's contact information to the Google Knowledge panel in some searches, for example when a user enters your company’s name into the Search bar (Pro Version)
Social Profiles - Use markup on your official website to add your social profile information to a Google Knowledge panel. Knowledge panels prominently display your social profile information in some Google Search results. (Pro Version)

Twitter, Facebook, Pinterest Structured Data

Twitter Cards - showcase your products on Twitter using Image, Long / Short description, Price (with/without tax) and highlight site and tweet creator.
Facebook Open Graph - showcase your products on Facebook with rich product information using Image, Long / Short description, Price (with/without tax), and highlight Site name and app Id.
Pinterest Rich Pins - showcase your products on Pinterest with rich product information.

Configuration.

General Settings

Go to Admin > WeltPixel > Rich Snippets & Cards > General Settings:

Enable [ Yes / No ] Activate or deactivate Rich Snippets and all related options.
Description Choose between Short description and Long description, option chosen will be added to rich structured data.
Price - TAX control, Special Price control, Special Price End period
- Including / Excluding TAX - In case price is listed with Tax and without Tax select which price should be used
- Special Price - From / To - special price and end date is added to structured data if available
- Price currency - Automatically added to strucutred data from store settings.
Availablility - Automatically added to structured data from prodcut inventory.
Item Condition Select attribute used for product condition ( Attribute should have the following options: DamagedCondition / UsedCondition / NewCondition / RefurbishedCondition according to schema.org)

Brand - Select an additional brand that will be added to structured data (Country of manufacture, Shipping, etc..).
SKU - Control over the attribute that is used for product SKU, usually it is used the magento default attribute SKU but in special cases a different attribute can be used.
GTIN - Control over the attribute that is used for product GTIN code. A 13 digit code is necessary to be added on product details for this partiular attibute in order to be correctly validated. If you do not use a GTIM code, do not select any attribute for this option and it will not show up in your structured data.
MPN - Control over the attribute that is used for product MPN code. This code is necessary to be added on product details in order to show up in structured data. If you do not use a MPN code, do not select any attribute for this option and it will not show up in your structured data.
Review Markup Format - select between Agregate Ratings and Agregate Ratings with Detailed Reviews
- Agregate rating - show only review score and number. ex 4.8 / 5 from 287 reviews
- Agregate rating with Rewiews - add both agregate rating and also latest user rewiews: author, date, message, rating, review name. Ability to specify the number of latest reviews to include. (Pro version)
Number of reviews - Specify the number of latest reviews to included in structured data.
Use Breadcrumb Snippet - Add data related to Breadcrumbs to structured data. A breadcrumb trail on a page indicates the page's position in the site hierarchy. A user can navigate all the way up in the site hierarchy, one level at a time, by starting from the last breadcrumb in the breadcrumb trail.

Sitelinks Searchbox

Google Search can expose a search box scoped to your website when it appears as a search result. This search box is powered by Google Search. However, if you wish to power this search box with your own search engine, or if you want search results also to include an associated mobile app, you can do so using structured data embedded on your website.

Go to Admin > WeltPixel > Rich Snippets & Cards > Sitelinks Searchbox:

Enable Searchbox [ Yes / No ] - Activate searchbox functionality in Google Search.

Rich Snippets & Cards - Logo

Specify the image Google Search uses for your organization's logo in Search results and in the Knowledge Graph. Google Search uses the markup in the use case example to recognize the image to use as the organization’s logo. This ensures that, when possible, the image appears in search results about the company. Markup like this is a strong signal to Google Search algorithms to show this image in Knowledge Graph displays.

Go to Admin > WeltPixel > Rich Snippets & Cards > Rich Snippets & Cards Logo:

Enable Rich Snippet for Logo and Corporate [ Yes / No ] - Enable Google Search to show logo in Search results and in the Knowledge Graph.

Use Store Logo - the Logo snippet will use the store default logo. The image must be in .jpg, .png, or. gif format
Upload Custom Logo - you can upload a custom logo, different than the logo used for your store. The image must be in .jpg, .png, or. gif format

Rich Snippets & Cards - Corporate Contact

Go to Admin > WeltPixel > Rich Snippets & Cards > Rich Snippets & Cards - Corporate Contact:

Enable Rich Snippet for Corporate Contact [ Yes / No ] - Enable Google Search to show Corporate contact in Search results and in the Knowledge Graph.
Contact Telephone An internationalized version of the phone number, starting with the "+" symbol and country code (+1 in the US and Canada). Examples: "+1-800-555-1212", "+44-2078225951"
Contact Type - Examples: "customer support", "technical support", "billing support", "bill payment", "sales", "reservations", "credit card support", "emergency", "baggage tracking", "roadside assistance", "package tracking"
Contact Area Served - The geographical region served by the number, specified as a AdministrativeArea. Countries may be specified concisely using just their standard ISO-3166 two-letter code, as in the examples below. If omitted, the number is assumed to be global. Examples: "US", "GB", ["US","CA","MX"]
Contact Option - Details about the phone number. Currently only these are supported: "TollFree" and "HearingImpairedSupported"
Contact Language - Details about the language spoken. Languages may be specified by their common English name. If omitted, the language defaults to English. Examples: "English", "Spanish", ["French","English"]

Rich Snippets & Cards - Social Profiles

Use markup on your official website to add your social profile information to a Google Knowledge panel. Knowledge panels prominently display your social profile information in some Google Search results.

Enable Social Profile - Enable Google Search to show up to 10 Social Profiles in Search results and in the Knowledge Graph.
Facebook Url - If added, Facebook profile will show in Search results and Knowledge Graph.
Twitter Url - If added, Twitter profile will show in Search results and Knowledge Graph.
Instagram Url - If added, Instagram profile will show in Search results and Knowledge Graph.
Google+ Url - If added, Google+ profile will show in Search results and Knowledge Graph.
Youtube Url - If added, Youtube profile will show in Search results and Knowledge Graph.
Linkedin Url - If added, Linkedin profile will show in Search results and Knowledge Graph.
Pinterest Url - If added, Pinterest profile will show in Search results and Knowledge Graph.
Myspace Url - If added, Myspace profile will show in Search results and Knowledge Graph.
SoundCloud Url - If added, SoundCloud profile will show in Search results and Knowledge Graph.
Tumblr Url - If added, Tumblr profile will show in Search results and Knowledge Graph.

Twitter Cards Settings

Go to Admin -> WeltPixel -> Rich Snippets & Cards -> Twitter Cards Settings and set the Twitter Cards:
- Enable [ Yes / No ] Activate or deactivate the Twitter Cards feature
- Description Choose between short description and long description
- Twitter Site Type your store Twitter username. For example @site_username
- Twitter Creator Type Twitter username of the administrator of Magento store or owner of the store. You can use the site username or leave empty.

Facebook Open Graph Settings

Go to Admin -> WeltPixel -> Rich Snippets & Cards -> Facebook Open Graph Settings and set the Facebook Open Graph:
- Enable [ Yes / No ] Activate or deactivate the Facebook Open Graph feature
- Description Choose between short description and long description
- Site name Insert Website’s name

Pinterest Rich Pins Settings

Go to Admin -> WeltPixel -> Rich Snippets & Cards -> Pinterest Rich Pins Settings and set the Pinterest Rich Pins:
- Enable [ Yes / No ] Activate or deactivate the Pinterest Rich Pins feature

How it works.

Rich Snippets & Cards

You can test the Google Cards & Rich Cards functionality by using this testing tool from Google, just place a link from one of your products and you will see data is structured as Google expects: Google Structured Data Testing Tool
Note: Do not forget to login to Google account for the Google Structured Data Testing Tool to work
Based on Google policy this data will be shown in the search results. Stores using this data structure will be highly advantaged by search engines, like Google, Yahoo, Bing and other search engines.

Twitter Cards

You can test the Twitter Cards functionality by using this testing tool from Twitter, just place a link from one of your products and you will see data is structured as Twitter expects: Twitter Cards Tool
Note: Do not forget to login to Twitter account for the Twitter Cards Tool to work

Facebook Open Graph

You can test the Facebook Open Graph functionality by using this testing tool from Facebook, just place a link from one of your products and you will see data is structured as Facebook expects: Facebook Developpers Tool
Note: Do not forget to login to Facebook Open Graph for the Facebook Developpers Tool to work
Based on Google policy this data will be shown in the search results. Stores using this data structure will be highly advantaged by search engines, like Google, Yahoo, Bing and other search engines.

Pinterest Rich Pins

You can test the Pinterest functionality by using this testing tool from Pinterest, just place a link from one of your products and you will see data is structured as Pinterest expects: Pinterest Rich Pins Tool
Note: Do not forget to login to Pinterest for the Pinterest Rich Pins Tool to work

After you click debug button, then you will get the analysis.

GOOGLE XML SITEMAP FOR MAGENTO 2

About GOOGLE XML SITEMAP FOR MAGENTO 2.

Dynamically generate XML sitemaps, help search engines faster crawl and index your store.

Google has specific rules for sitemap generation. It is useful to have your XML sitemaps built automatically with a help of Google XML Sitemap for Magento 2 extension in order to meet all search engines requirements. Faster indexing of new pages shortens the time your new products to appear in Google.

This extension helps you gain a granularly control over your Magento 2 sitemap by allowing you to control visibility in sitemap for each Product , Category and CMS page. Also it allows you to add into the sitemap custom URLs that are not included with default magento sitemap with full control over attributes like store-view, priority, change frequency and update date.

By using this extension you can dynamically exclude from sitemap Products, Categories and Pages that you do not want to be indexed by search engines but are still required in your store.

Include any links in your sitemaps:

Google XML Sitemap for Magento 2 allows to include/exclude links from various locations:

Category pages;
Product pages;
CMS pages;
Custom URLs.

Better sitemap reliability using advanced settings

You can configure detailed settings like storeview, priority, update date and change frequency. You can set the values specifically for each group of links: Products, Categories, CMS pages, and individually for each Custom URL. The more appropriate settings you have, the more reliability and trust to your site from Google.

Features of the Extension.

Faster indexation of your store content - better SEO score
Configure frequency updates - for each type of page CMS, Product, Category, Custom URL
Individual Product control - control what Products you want to be included/excluded from sitemap
Individual Category control - control what Categories you want to be included/excluded from sitemap
Individual CMS Pages control - control what CMS Pages you want to be included/excluded from sitemap
Add unlimited custom URLs - full control over each URL’s priority, store-view, change frequency and update date.
Dynamic generated sitemap - once configured, always up to date.
Increase conversions and reduce bounce rate - allow search engines to index the appropriate elements of your store in order to reduce bounce rate and improve conversions.
Reduce return rate - help buyers find the best product for them using specific relevant information already indexed in search engines using your advanced sitemap
Easy to use - no coding needed
Best practice coding - extending the functionality of the default Magento 2 XML sitemap

How to Configure.

Step 1: Create your sitemap

Go to Marketing -> SEO & Search -> Site Map and add your sitemap by clicking on "Add Sitemap" button

Select the name for your sitemap, example: sitemap.xml
Select the path for your sitemap, example: "/sitemap/" or "/" for base path (path must be writeable)

Step 2: Configure your sitemap

Go to Stores -> Configuration -> Catalog -> XML Sitemap and configure default settings for your sitemap.

a. Select Frequency and Priority for each type of page in your store: Category Pages, Product Pages, CMS Pages.

Frequency

How frequently the page is likely to change. This value provides general information to search engines and may not correlate exactly to how often they crawl the page. Valid values are:

always / hourly / daily / weekly / monthly / yearly / never

The value "always" should be used to describe documents that change each time they are accessed. The value "never" should be used to describe archived URLs.

Please note that the value of this tag is considered a hint and not a command. Even though search engine crawlers may consider this information when making decisions, they may crawl pages marked "hourly" less frequently than that, and they may crawl pages marked "yearly" more frequently than that. Crawlers may periodically crawl pages marked "never" so that they can handle unexpected changes to those pages.

Priority

The priority of the URL relative to other URLs on your site. Valid values range from 0.0 to 1.0. This value does not affect how your pages are compared to pages on other sites—it only lets the search engines know which pages you deem most important for the crawlers. The default priority of a page is 0.5.

Please note that the priority you assign to a page is not likely to influence the position of your URLs in a search engine's result pages.

Search engines may use this information when selecting between URLs on the same site, so you can use this tag to increase the likelihood that your most important pages are present in a search index.

Also, please note that assigning a high priority to all of the URLs on your site is not likely to help you. Since the priority is relative, it is only used to select between URLs on your site.

b. Configuring sitemap generation settings
- Enable - [ Yes / No ] - this option enable sitemap generation. Make sure cronjobs are setup on your server in order for this automated task to be triggered.
- Start time - set the time when sitemap generation should start
- Frequency - set how often you want your sitemap to be updated
- Error email recepient - configure an email where you should receive potential error reports
- Error email sender - configure store default sender of the email
- Error email template - configure store default template for the email
- Maximum No of URLs per file - set the maximum number of URLs in sitemap.
- Maximum file size - set sitemap file size in bytes
- Enable submission to Robots.txt - [ Yes / No ] - if enabled sitemap will be included in robots.txt file of your store, facilitating search engines to faster discover it.

Step 3: Customize your sitemap and make it your own using GOOGLE XML SITEMAP for Magento 2

a. Exclude from sitemap particular CMS Pages you do not want indexed in search engines
- Go to Content -> Pages -> Edit Page -> WeltPixel Options -> Exclude from Sitemap -> Yes
  This option is useful when you want to exclude certain CMS Pages from sitemap. Ex: ‘404 Not Found Page’ makes no sense to be indexed by google, you do not want your customers there.

b. Exclude from sitemap particular Product Pages you do not want indexed in search engines
- Go to Products -> Catalog -> Edit Product -> WeltPixel Options -> Exclude from Sitemap -> Yes
  This option is useful when you want to exclude certain Product Pages from sitemap. Ex: maybe you have a lookbook where your products can be purchased using a quick view functionality and you don’t want to sell the products individually on separate product pages, in this case you can exclude that particular product pages from sitemap indexation.

c. Exclude from sitemap particular Category Pages you do not want indexed in search engines
- Go to Products -> Categories -> Select Category -> WeltPixel Options -> Exclude from Sitemap -> Yes
  This option is useful when you want to exclude certain Category Pages from sitemap. Ex: You may want to include in sitemap only level 2 categories and exclude level 1 categories in order for clients to land on a more segmented category.

d. Add custom URL to sitemap

By default magneto doesn’t add to sitemap custom url that may be still relevant to your business, for example a html page presenting your product. Ex: Weltpixel Cleo Theme is presenation of one of our products but is not included in default Magento sitemap.

By using Google XML custom sitemap URL functionality we’ll be able to add also this link to our dynamically generated sitemap.

Go to WeltPixel -> Sitemap -> Add New Url
- URL - Insert link without base url, ex: /cleo and the link in your sitemap will be www.yourbaseurl.com/cleo
- Updated at - set the time and date when this page was last updated
- Store View - Select in what store view to insert this custom URL in sitemap
- Change Frequency - How frequently the page is likely to change. This value provides general information to search engines
- Priority - The priority of the URL relative to other URLs on your site. Valid values range from 0.0 to 1.0
- Woohoo, the sitemap is configured!

SEO PAGE TITLE OVERWRITE FOR MAGENTO 2.

About SEO PAGE TITLE OVERWRITE FOR MAGENTO 2.

This extension allows you to rewrite products and categories page titles, which greatly improves SEO results. By rewriting only the H1 tags you don’t have to worry about awkwardly long titles for your products or categories.

HOW TO USE THE EXTENSION.

Change H1 Title on product pages

In order to use this extension go to your catalog, open detail view for products and you will find a new field named ‘Product Name Rewrite’ just under product name.

You can use a Product Name that will be visible only in your store, and a rich long SEO friendly Rewrite Name for your product that will be indexed by search engines.

This way your product names will be SEO friendly but in your store you will be able to use a shorter commercial name under ‘Product Name’.

Example: Product Name Rewrite (seo friendly) : ‘SEO Page Title Overwrite Extension for Magento 2 | Improve your SEO score on Magento 2 | WeltPixel Agency’ and Product Name (displayed in your store): ‘ Page Title Overwrite ’.

Change H1 Title on category pages

The same for categories, open category details and you will find a new field named ‘Category Name Rewrite’ just under the category name.

You can use a rich long SEO friendly category name rewrite that will be indexed by search engines, and category name you want visible in your store. Example: Category Name rewrite (seo friendly): 'Woman Clothes Winter Collection 2016, Hand Tailored in the USA' and Category Name (displayed in your store): 'Woman'.

Features of the Extension.

Better SEO score - Rewrite page titles and use SEO friendly description for your products and categories
Boost search results - Provide search engines descriptive long tail keywords for products and category page names
Reduce bounce rate - Customers will be able to find the products they are looking for
Improved aesthetics - By overriding only the H1 tags you don’t have to worry about awkwardly long titles for your products or categories
Easy to use - Easily fill in the commercial title and the SEO title on product / category details

SMART PRODUCT TABS FOR MAGENTO 2.

About SMART PRODUCT TABS FOR MAGENTO 2.

Deliver excellent browsing experience for your customers by dynamically showing custom blocks (new tabs on product page) based on product attribute options.

This extension for Magento 2 gives you custom control over your product page tabs and their dynamic content. You can configure product tabs to display custom content based on product attribute value using specific static blocks, without the need to touch any code.

Default Magento doesn't give you proper control over your product tabs and corresponding content, making product page content customisation extremely limited. Smart Product Tabs allows you to show new tabs, based on the value of dropdown attributes. You can create Smart Tabs directly from Magento admin and when visibility conditions are met, the tabs containing the specific block will be displayed in frontend as a new tab on product page.

This will help to dynamically show specific product information only for certain products, based on material, size-chart, country of manufacture, man/woman, price, promotion, product features etc... Applicability of this functionality is wide, can be adapted to any business model in order to increase store usability.

Features of the Extension.

Display relevant content - display relevant content to customer based on product type and attribute values
Increase conversions - use rich relevant descriptions and improve conversions
Reduce return rate - help buyers find the best product for them using specific relevant information
Reduce bounce rate - describe the product better and reduce bounce rate
Rich product description - use smart static blocks to create rich descriptions for your products
Save page space - use the smart tabs and save page space
Increase store usability - help users engage with your store
Easy to use - no coding needed

HOW TO USE THE EXTENSION

STEP 1

Smart Product Tabs works only with "Dropdown" product attributes.

You can use one of your already created attributes (dropdown), or you can create a new dropdown attribute in Admin > Stores > Attributes > Products.

! Important: Please note that configuration in next steps depend on the attribute code which is CASE SENSITIVE. You will need the attribute code to configure the smart block name. Using the wrong attribute code (typo, capital letter instead of small leter, etc) will result in tabs not showing in your product page.

STEP 2

If you created a new dropdown attribute, you'll have to assign it to the product attribute set used by the product before this attribute will be visible in product details.
To assign the new attribute to a product Attribute Set go to Admin > Stores > Attribute Set menu and add the new attribute to your Attribute Set
Later, at step 6 you'll may need to assign the Attribute Set to the product where you want to use Smart Tabs if not assigned already.

STEP 3

The new created Attribute can be found in Unassigned Attributes.
To assign the attribute just drag and drop it in Attribute Set Groups.

! The attribute will be available only for products using this attribute set. If necessary you can add the attribute to multiple attribute sets.

STEP 4

Go to Admin > WeltPixel > Smart Products tab menu, activate the extension and set your smart tabs.
You can insert up to 3 new tabs to be displayed in the product page based on dropdown attribute configuration. From this settings you can define the smart tab name (visible in product page) and the attribute that controls delivery of relevant content for each particular smart tab.
From this settings you can define the smart tab name (visible in product page) and the attribute that controls delivery of relevant content for each particular smart tab.

STEP 5

Go to Admin > Content > Blocks and create blocks for each option of the attributes. Block identifier name must have the following syntax:
smartproducttabs_attributecode_option

- Keep smartproducttabs_ prefix unchanged.

- Replace attributecode with your attribute code.

- Replace option with option of the attribute.

- If an option has words separated by spaces, replace the spaces with - (minus) sign.

Example 1, where attribute code is 'color' and attribute option is 'blue', smart block name will be: 'smartproducttabs_color_blue'
Example 2, where attribute code is 'material' and attribute option is 'cotton', smart block name will be: 'smartproducttabs_material_cotton'
Example 3, where attribute code is 'manufacturer' and attribute option is 'United States', smart block name will be: 'smartproducttabs_manufacturer_United-States'

! Troubleshooting Smart Tabs not showing in product page:

#1 Using wrong prefix smartproducttab_ instead of smartproducttabs_ will lead to tab not showing in product page. Please check if you are using the correct prefix.

#2 Attribute code and option are CASE SENSITIVE. Double check for typo, capital letter instead of small leter, etc.

#3 Make sure you selected an attribute option for the product you are checking smart tab functionality.

#4 Do not insert underscore between the prefix, the attribute and the attribute option.

Step 6

Go to Admin > Catalog > Products > Edit Product and set the attribute option for each product. The corresponding block created at Step 3 will show up on product page.
If no attribute option is selected, smart block will not show for that specific product. Once an attribute option is selected, if there is a block created corresponding with selected attribute code and option (as described in Step 3) -> smart block will show up on product page.

Step 7

Clear all store caches.
Reindex product catalog if necessary, check here How to reindex your Magento 2 store
Go to your store frontend and check the results.

INSTAGRAM WIDGET ADVANCED for Magento 2

About Instagram Widget Advanced For Magento 2.

The social networks influence has become so big nowadays and has spread all over, including sales. Being one of the most popular social networking services ever, Instagram is what you need to have on your store to take relationship with your customers to a new level.

If you are using Magento 2 for your Ecommerce site, and you want to add new products just by taking a photo of it and photos with a special tag on Instagram, this extension fits you perfectly.

This Extension provides the possibility to display instagram images feed on category, homepage, product page or other cms pages.

With our Instagram Widget Advance for Magento 2 you can easily integrate this service into your store to get closer to the customers.

This widget comes with an extended list of options compared to other widgets: you can select from admin the background color of widget container in order to fit your page. You can also select the number of pictures you want to display per row and the maximum number of displayed pictures. Pictures can be sorted and ordered by a lot of criteria like most recent, most liked, most commented and so on. Picture resolution is available in 3 formats Thumbnail, Low resolution and Standard Resolution. You can display pictures based on user, geolocation or pictures in which you are tagged. This multitude of options will allow you to customise the widget and it’s content to fit your business needs.

Features of the Extension.

Display instagram feed - on your web page display the Instagram feed according to user; location or tag
Select number of images - possibility to select the maximum number of the images you want to add
Add title - option to add Title
Add description - option to add Description
Images per row - possibility to change the images per Row from 2 - 6
Set order - option of sorting the images in a set order
Image size - you can change the resolution of instagram images (thumbnail/low resolution/standard resolution)

HOW TO USE THE EXTENSION.

Step 1:

To be able to use Instagram Widget extension first you need to set your Instagram username and authorize the widget to use your account.
The only thing you’ll need to get going is a valid client id from Instagram’s API. You can easily register for one on Instagram’s website.
Go to Instagram Developer. Login to your account or create one. Then click on Manage Clients, and finally on Register a New Client.

Step 2:

Fill out the Application Name, Description, Website(which should be your website). Fill our http://localhost in the field Valid redirect URIs and press enter to confirm that field.

Step 3:

In Security tab DO NOT CHECK Disable implicit OAuth or Enforce signed requests.

Step 3:

Now you should see a Success message as seen in the image below. From this page you need the CLIENT ID code.

STEP 5

Paste the following url into your web browser.
```
                              https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]
                              &redirect_uri=http://localhost&response_type=token&scope=public_content
                           
```
Add the client id you generated to the url replacing [CLIENT_ID_HERE] Hit enter, and you will connect to Instagram’s servers.

Instagram will ask you whether you want to grant the client you registered in Step 2 access to your account.

Once your client has been granted access to your account, Instagram will redirect your browser to your localhost and your newly generated access token will be appended to the url after localhost/#access_token=Treat your Instagram access token like you would your password.

Do not share your access token with anyone.

STEP 6

This is the last page you will see after Authorizing access. Now copy code you see after localhost/#access_token=”yourcode” . You will use this code on step 7 and when configuring the Instagram widget connection data.

STEP 7

Find your user ID:

Your user ID is the number before the first period from the access token received at Step 6 (user ID is 1127918776 in this example).

STEP 8

After receiving Instagram Client Id, Access Token and User ID, go to Content > Pages or Content > Blocks. From there the steps are the same for Pages or for Blocks. Edit the page or block content.

STEP 9

Click Insert Widget button, select WeltPixel Instagram Widget and configure Widget Options.

STEP 10

Instagram Widget Advanced is a simple way to add Instagram photos to your site. Setting up Instagram Widget Advanced for Magento 2 is quite easy.
- Instagram Client Id - Instagram Client Id
- Instagram Access Token A valid oAuth token. Can be use in place of a client Id
- Title Insert a title for widget
- Description Insert a short description
- Container Background Color Select the color that you want to use as a background on the widget
- Images Per Row Select from 2-6 images that you want to be on a row
- Limit Maximum number of images you want to add
- Sort By Sort the images in a sort order. Available options are:
  - Non(as they come from Instagram)
  - Most recent
  - Least Recent
  - Most Liked
  - Least Liked
  - Most commented
  - Least commented
  - Random
- Resolution Size of the images to get. Available options are:
  - Thumbnail (150x150)
  - Low Resolution (306x306)
  - Standard Resolution (612x612
- Select your feed type:
  - Feed type User Enter *User ID* received at step 7
  - Feed type Tagged Enter a specific *Tag name* , pictures with that tag will be shown
  - Feed type Location Enter *Location ID* (not name), search on google how Instagram assigns location id to pictures.

Full Page Scroll for Magento 2.

About Full Page Scroll for Magento 2.

Full Page Scroll for Magento 2 is a simple and easy to use extension that allows users to create full page scrolling on CMS pages. Extension also allows adding landscape sliders inside the sections by defining one CMS block for each section. This functionality is a useful tool for creating great presentation pages.

You can create a new, fresh, layout, inspired from the 2016 fashion trends and the clients can see the products presented in a new perspective.

It’s a versatile and modern extension that make your pages much more attractive. fullPage.js is fully functional on all modern browsers, it also provides touch support for mobile phones, tablets and touch screen computers.

Features of the Extension.

Fully responsive.
Highly scalable, each full page section is a different CMS block
Easy to switch sections and reorder the page at any time
Unlimited number of sections and pages
Easy to use, no coding needed
Constantly updated to latest Magento 2 release

HOW TO USE THE EXTENSION.

1 Go to Content > Pages > Add New Page, and create a new page that you want to include ‘Full Page Scroll’ functionality.

2 Insert in the code below in the CMS page:

                              {{block class="WeltPixel\FullPageScroll\Block\FullPageScroll" name="fullpagescroll"
                              template="WeltPixel_FullPageScroll::fullpagescroll.phtml"}}

3. Go to Content > Blocks > Add New Block
4. Each section has to be created as CMS block and block name should respect the following format:
fullpagescroll_cmspageurlkey_sectionorder
5. The page identifier(cmspageurlkey) that you need when creating CMS blocks can be found in Page Description -> Search Engine Optimisation Tab -> URL Key. Page Url key is created automatically based on Page Title. Using this url key you associate the blocks to the page.
Note1: Identifiers, page url, section name are case sensitive. In case the blocks do not show up in the page, make sure to verify this first.

Note2: If the page will be used for homepage you need to use the following format, where ‘home’ is mandatory to be used and ‘storeviewcode’ is the store code where that homepage will be used.

fullpagescroll_home_storeviewcode_sectionorder
6. All the blocks are ordered by section order, alphabetic or by numbers.
For example: Summer1; Summer2; Summer3; Summer4 are ordered by numbers. Spring; Summer; Autumn; Winter will be alphabetically ordered: Autumn; Spring; Summer; Winter.
7. When you want to insert a image as a background in the block, keep in mind that the first image that you upload will be automatically set as background.
8. For the rest of the images or content you can use default editor settings.
9. Make sure you set the page layout as ‘Fullscreen’, if the layout is set otherwise it will affect the Header, Footer and page functionality.
10. After you created all the blocks(one block for each section), take a look on the page that you initially created with the full page scroll functionality. You can see that all the sections are alphabetically or numerically ordered using the “sectionorder” identificator.

QUICK CART FOR MAGENTO2.

About Quick Cart for Magento 2.

This extensions takes the mini cart to a whole new level. The modern responsive design combined with conversion oriented features offers the customer the ultimate shopping experience by allowing cart summary review in one glance without leaving the shopping page.

The checkout steps are reduced to minimum and conversion rate is improved as the user goes directly to checkout without the need to visit the cart page.

Features of the Extension.

Improve the shopping experience by reducing the number of steps necessary for checkout.
Easily preview your cart summary.
Designed to improve conversions.
Modern responsive design.
Easily customize design from admin options, no coding needed.

Configure Quick Cart on your store in just 1 minute.

Go to Admin > WeltPixel > Quick Cart > Quick Cart Settings
You can enable the extension:
General Settings
- Enable - [ Yes / No ] Enable / Disable Quick Cart on your store
- Open Quick Cart after items is added - [ Yes / No ] Opens the Quick Cart each time an item is added to the cart
Quick Cart Header
- Height - Set the height of Quick Cart header [ in px ]
- Background Color - Set background color for Quick Cart Header
- Text Color - Set text color on Quick Cart header
Quick Cart Footer
- Subtotal Background Color - Set background color for Quick Cart Subtotal section
- Subtotal Text color - Set text color on Quick Cart Subtotal section

CMS PRODUCT REVIEWS WIDGET for Magento 2

About CMS Product Reviews Widget For Magento 2.

Product Reviews Widget for Magento 2 allows adding product reviews to any page, not just product page. The simple yet powerful functionality allows to add review section to single product presentation pages, blocks, category pages, look books.

Simply edit desired page/block from your Magento admin, click Insert Widget, Product Reviews Widget, select the product from your product list and the review section from selected product is added to your page.

Product Reviews Widget for Magento 2 adds both review section and review form so that users will be able to submit product reviews directly from the presentation page without the need to visit the product page of that specific product.

Features of the Extension.

Create look books and add product reviews to increase your conversion rate
Create beautiful presentation pages and include user opinions to encourage purchases
Build single product pages with magneto default reviews without product page layout restrictions
1 minute configuration
Easy installation
Constantly updated

HOW TO USE THE EXTENSION.

Step 1:

Go to Content > Pages and edit the content of the CMS page where you wish to view the reviews.
Click Insert Widget button.

Step 2

From the Widget Type dropdown choose the WeltPixel Reviews Listing and Form option.
Click on Select Product button and choose tne product from where you wish to view the reviews.
Click Insert Widget to have the widget code inserted in your page.

Step 3:

Check if widget code is inserted in the page.
Save the page and check the results.
You should view the reviews section in your CMS page.

Mega menu for Magento 2.

About MEGA MENU For Magento 2.

WeltPixel Mega Menu extension for Magento 2 helps merchants create a better look and professional Magento 2 navigation menu easily without technical skils. Categories can be presented in multiple formats in order to fit each category structure and provide a better navigation experience for the end user.

Customers will be able to navigate and explore your store easily.

Store owners have the possibility to select a custom menu view for each category in order to best highlight containing subcategories: Boxed, Sectioned, Full Width or Default magento view. In order to efficiently organise subcategories, columns width can be adjusted from admin options for each individual category. The numbers of columns in dropdown view is also configurable from admin options, offering the store owner possibility to organise the subcategory grid width.

Easy to set up without technical skills

WeltPixel Mega Menu comes not only with a nice design but also with powerful functionalities like the possibility to open menu links in new tabs, disable category links, or even overwrite category links with other internal or external links. This allows store owners to add in their Magento 2 Menu links to external pages like support platforms or other internal links like About us / Contact us pages.

Features of the Extension.

4 display versions for each menu category: Full Width, Sectioned, Boxed, Default
Configurable number of columns in dropdown menu
Configurable columns width in dropdown menu
Link categories, CMS pages, external URLs
Open menu links in new tab
Disable menu links
Supports multiple stores and multiple languages
Responsive design
Light extension, optimised code.
Easy to install, easy to upgrade

HOW TO USE THE EXTENSION.

Step 1

Go to WeltPixel > Mega Menu in order to read the instructions about how to configure your menu.

Step 2 - Configure your menu

Go to Categories (only Level 1) > WeltPixel Mega Menu
You will be able to configure a different display mode for each category:
- Menu display mode for each level 1 category: Width / Sectioned / Boxed / Default Magento
- Number of columns for each category menu
- Width of the columns
Go to Products > Categories (any level) > WeltPixel Options
- Link - set a custom link for any category in the menu
- Open in new tab - opens the custom link/category page in new tab

MAGENTO 2 CUSTOM THANK YOU PAGE.

About Custom Thank You Page For Magento 2.

WeltPixel Custom Thank You Page for Magento 2 allows merchants to take full control of their Thank You Page and add new elements like Newsletter subscribe and custom blocks with relevant information for customers. The new modern responsive design as well as enhanced control over each page element offers great utility and a new way to connect with and inform your final customers.

By installing this extension, new options will become available in your Magento admin, offering possibility to control visibility for each section of the Thank You Page. Moreover, section descriptions can be customised and adapted to your business and sort order feature allows to organize the information on success page as you find necessary.

Success Page is a great way to connect with your customers. Offering relevant information about the order and delivery process most probably will save support time and will provide the customer a nice shopping experience with your business. Also customers are more likely to connect with you after a purchase, so offering a pre-populated one click away subscribe option will help in this regard.

FEATURES OF THE EXTENSION.

Enhanced Order details.
Subscribe to Newsletter functionality with user pre-populated email address.
Powerful Custom Block functionality, create rich relevant thank you page for your customers.
Possibility for guest users to create account, directly from Thank You page.
Sort order functionality, order the sections any way you want.
Full visibility control for each section with individual visibility options.
Customize descriptions for each section from admin options.
Modern responsive design.
Improve the shopping experience for all your customer.
Collect email addresses from relevant shoppers.
Deliver relevant custom content on Thank You Page via custom Block functionality. Eg. promotions carousel, promotion banners, campaigns, relevant delivery information, thank you video etc.
Easy to use, easy to install, no coding needed.

HOW TO USE THE EXTENSION.

Step 1: Enable the Extension.

Go to Admin sidebar → WeltPixel → Thank You Page
General: Enable module- [ Yes / No ] Enable or Disable the extension on your web store.

Step 2: Order Details.

Enable: [ Yes / No ] Enable or Disable the Order Details section.
Title: Add here a specific text for the order confirmation. Eg. "Thank you for your purchase!"
Subtitle: Add here a specific message for the order. Eg. Can be added the order number (Use %1 as placeholder for order increment id)
Description: Add here a text for additional details about this section. You can add shipping details and delivery information or any other information you find necessary.
Show “Continue Shopping”: This option controls visibility of the "Continue Shopping" button. If enabled, the button will show at the end of the section and will redirect the customers back on your store.
Sort Order: This option can be used to customize the sorting order of the 4 module’s sections. If no value is entered, default value is 0 (the sections will be sorted in ascending order, starting with 0).

Step 3: Create Account.

Enable: [ Yes / No ] Enable or Disable the Create Account section. This section will only show for Guest users. Users that already have an account will not see this section as it doesn't make sense for them.
Description: Add here a specific text for the account confirmation. Eg. "You can track your order status by creating an account".
Email Label: Customize the default email label description. Eg. "This email address will be used for the account creation".
Message displayed after account creation: Add a relevant text which will show after the account will be created. Eg. "Congrats! An account was created for you, check your email for additional details".
Sort Order: This option can be used to customize the sorting order of the 4 module’s sections. If no value is entered, default value is 0 (the sections will be sorted in ascending order, starting with 0).

Step 4: Newsletter Subscribe.

Enable: [Yes / No ] Enable or Disable the Newsletter Subscribe section. Email field will be pre-populated with the email address of the user that checked out.
Description: Add here a specific text for the newsletter confirmation. Eg. "Subscribe to receive Important Product Updates and occasional discounts".
Sort Order: This option can be used to customize the sorting order of the 4 module’s sections. If no value is entered, default value is 0 (the sections will be sorted in ascending order, starting with 0).

Step 5: Custom Block.

Enable: [ Yes / No ] Enable or Disable the Custom Block section.
Select Block: You can use a specific Custom Block for to customize you Thank You Page Module (you can use an existing one or create new one from Admin sidebar → Content → Blocks → Add New Block).
Sort Order: This option can be used to customize the sorting order of the 4 module’s sections. If no value is entered, default value is 0 (the sections will be sorted in ascending order, starting with 0).

Enhanced Multi-Store Multi-Brand for Magento 2.

About Enhanced Multi Store For Magento 2.

Multi-store module for Magento 2 allows you to show different Brands or Languages in the header of your store, while offering the possibility to navigate between these store-views.

This flexible solution enables the merchant to display the store-view Brands or Languages in the header of each store, offering the end user an omnichannel experience while purchasing on the website. The end user wil be able to purchse from any store-view and checkout with the same account.

With this extension you can have multiple store-views share cart, user sessions, payment gateways, and so on, but with separate catalog structures and page presentation while making the user aware that you are selling under multiple brands or languages.

You don't have to start from scratch with your new brand, but take advantage of the popularity of your main brand and add the rest of the brands in the header of your store. Example: one domain www.zara.com with multiple brands: Zara , Zara Kids, Zara Home

Features of the Extension.

Allows to easy create a Multi-Brand store and show the brands on all stores with the possibility to surf between the store-views.
Create store-views for different languages on the same Magento 2 installation, and display the language flags in order to change the language.
Multiple admin options for enhanced control and design.
Mobile responsive.
Easy installation.
Quality code.

Web Merchandisers question:

"I want the possibility to have different storeviews for different brands in the same magento installation, and display the brands on all storeviews in order to allow the customer to surf between each shop."

The Solution:

This extension allows you to do that. You can configure the brand image for each store, and it will show on all stores in the header, allowing the customer to scroll between your brands and have access to different products while keeping an omnichannel experience.

Web Merchandisers question:

" I want the end user to be able to checkout using the same account while purchasing from all storeviews in order to have an omnichannel experience."

The Solution:

This extension allows you to this possibility. Under the same Magento Website, you can create multiple store views and assign a different brand to each store-view. The user will be able to checkout using the same Magento account while purchasing from different Brand shops.

Configure.

Go to WeltPixel > Multistore > General Configuration > Enable and set this option to [ Yes ]; Make sure you have multiple storeviews created in order for the brand/language images to show up in your header.

Redirect to Home Page on store switch allows you to chose if you want to be redirected to the homepage when the store / language is activated, or remain on the current page and only change the language; This option can be used when you have different products on each store and you want to redirect the end user to homepage when changing the brand.

Set Active Store Image in order to know which store / language option is active; should be a different image than the inactive image, in order to highlight that this shop is not Selected and Active.

Set Inactive Store Image this image will be displayed as logo when another store /language is selected; should be a different image than the active image, in order to highlight that this shop is not active, you can use inverted colors or transparency to achieve this.

Set Display in one row displays the store view at the top in a single row; If this option is Enabled, all the brands or language flags will be displayed in a single row on top of the header. If this option is Disabled the imges will show in the header instead of the Store-View selector.

Visibility on storefront allows you to set the visibility on storefront; If this option is Disabled, the selected store-view image will not show up on the rest of the storeviews, allowing you to have an isolated store that will not show up in the Brand/Language images.

Logo Height and Width allows you to set the dimensions of the logo in the menu or top bar. You can only fill in the Height area in px, and the width will autoscale.

Exclude stores this option allows you to hide Brand/Language images in the current storeview while showing on others. It is usefull when for certain geographical areas you want to show only specific store-view languages and not all available languages.

Ajax Catalog and Infinite Scroll for Magento 2.

About Ajax Catalog.

Why is this important, how does it help?

Help your customers to explore more content and reduce website friction with ajax infinite scroll and ajax pagination.

When building your store, one of your most important task is to build a website that has the least amount of friction. Less friction = better user experience results in higher conversion rate, generating higher revenue and increased customer lifetime value. Category pages and search result pages are the most visited sections of your ecommerce store. Helping your customers to explore more content will result in longer browsing experiences which can help your customers find exactly what they are looking for.

You have the option to go with two major browsing behaviours, infinite scrolling (load more) and pagination. Each UX behaviour has its benefits and we often recommend testing what works best for your customers.

Infinite scroll is commonly used by social media websites such as Facebook, Instagram and Twitter. Your customers were educated to scroll down by the Social Media giants. You will often find that this user experience is best on mobile devices, which often reaches even 70% to 80% of the total traffic (highly influenced by your industry). Other benefits of using Infinite scroll is that new products will load dynamically without the need of refreshing the entire page, your customers can simply scroll up to view and compare previous products.

Pagination is also very commonly used around ecommerce websites such Amazon.com, REI.com. Pagination helps divide content into multiple pages. To reduce friction, we are now loading the next page using the Ajax technology by removing completely the need to reload the entire page. When the users reaches the bottom of the page and click to go from page #1 to page #5 we dynamically load page #5 content without a refresh of a page and automatically scroll the user to the top of the page. Pagination is also helpful in providing the customer an initial best selection of products, you can curate best 50 products from a category that you can promote first on the first page, this will give you a better sense of control of what you display first and stop the initial presentation.

Ajax Infinite Scroll and Catalog doesn’t simply stop at giving you the option to implement Infinite Scroll or to have an Improved user experience with less friction on pagination. We are also giving you the option of both worlds. Now you have the option to start with Infinite Scroll but only load automatically the first few pages (you can define how many) and then display the load more button. The benefits are that you can now display less products on the initial load, which helps you with page speed, then automatically load page two or three of best products. Your customers will not get annoyed by never reaching the bottom of your page and you have better control of displaying the best of the best of each category first. It’s basically a Win! Win! Win! Solution.

When implementing this solution we focused heavily on improving SEO as well. The solution closely follows Google’s Infinite Scroll implementation by generating rel=next and rel=prev at the correct page in conjunction with the canonical tag.

Features of the Extension.

Ajax Infinite Scroll - infinite product load while scrolling down
Ajax Next Page - loading next page without reloading entire page
Reduce website friction, improve user experience and conversion rate
Helps users explore more content
Control the number of the pages that autoload automatically
"Show More" button available after a speficied number autoloaded pages
Customizable notification messages
Possibility to disable for search result pages
SEO Optimized functionality
Speed improvements
Clean open source code
Easy installation

How to use Ajax Infinite Scroll.

General Settings:

Go to WeltPixel > Ajax Catalog & Infinite Scroll > General Configuration

Enable Ajax Catalog and set this option to [ Yes ].
Ajax Catalog Mode select Ajax Infinite Scroll

Functionality control for Category, Search and Advanced Search Page. When your store is integrated with external search solutions you may need to disable ajax for search pages in order to achieve default magento behaviour and therefore achieve full compatibility with other solutions.

Use Ajax Catalog on Category Page and set this option to [ Yes ]
Use Ajax Catalog on Search Page and set this option to [ Yes ]
Use Ajax Catalog on Advanced Search Page and set this option to [ Yes ]

Advanced Settings:

"Loading More Items" Text - Define the text that will display after the Load More button is clicked/tapped while the new content is loading
Show "Load more" button - In Magento you already predefined how many products to display on the category page. Let’s consider you set it to 25. This option defines after how many pages to display the load more button. Ex. 2 pages will load 2X25 products = 50 then it will display the Load More button. This option creates the balance by keeping your category pages light on initial load, having the ability to reach the footer easily and gives you the opportunity to have control over what is the most important on the page. By setting the value to 0, the Load more button will never display and it will automatically load new products until all the products from the category gets displayed.
"Load More" button text - The text that will display on the button “Load More” / “Show More”
No More Items Text - The text that will display as soon as all products from the category get loaded
Start Loading Early - To Make the scrolling experience even smoother, you have now the option to pre-load products when the customers are approaching the end of the list with new products. Setting this value to Yes will prevent when there is a normal browsing experience the customer from waiting on the next page to load. This option will only work for the first few pages defined in STEP 3 or for all if set to 0
Negative Margin - Load new items earlier considering the pixels offset configured. More items will start loading when you have less than specified pixels until the bottom of the page. Ex. 250. This option is only valid if Loading Early is set to Yes
Enable canonical and prev/next link elements - We followed closely how Google is recommending the implementation of the rel=next, rel=prev and canonical tag.

How to use Ajax Next Page.

General Settings:

Go to WeltPixel > Ajax Catalog & Infinite Scroll > General Configuration

Enable Ajax Catalog and set this option to [ Yes ].
Ajax Catalog Mode select Ajax Next Page

Use Ajax Catalog on Category Page and set this option to [ Yes ]
Use Ajax Catalog on Search Page and set this option to [ Yes ]
Use Ajax Catalog on Advanced Search Page and set this option to [ Yes ]

Advanced Settings:

"Loading More Items" Text - Define the text that will display after the Load More button is clicked/tapped while the new content is loading
No More Items Text - The text that will display as soon as all products from the category get loaded
Enable canonical and prev/next link elements - We followed closely how Google is recommending the implementation of the rel=next, rel=prev and canonical tag.

Ajax Search Autocomplete for Magento 2.

About Ajax Search.

Why is this important, how does it help?

Help your customers find the right products, increase conversion rate and reduce friction with ajax search autocomplete.

The search bar is often the starting point when browsing the internet “Google” or any other ecommerce website. Simply ask yourself: How many times you browsed Amazon or Ebay to find the product that you needed? And How many times you used the search bar to find exactly what you needed?

Customers will only purchase the products that they need and can find. If your customers cannot find the right product most likely they will leave your website and shop somewhere else.

Did you know that depending on website it can reach a usage rate of more then 60% and customers using the site search can have a 2X to 3X conversion rate? To find out how many of your customers are searching, what are they searching for or when go to your Google Analytics account and find out what your numbers are. Behavior > Site Search > Search Terms

Site Search is clearly a feature of your webstore that needs to be evaluated and improved! Effective site searches should guide your customers as they are typing and re-formulating their queries. The as-you-type suggestion are here to help users save time finding and correcting misspells before they hit the search button.

Autosuggest feature helps guiding your customers recall certain names or popular search terms by suggesting them search ideas that help them construct more useful queries.

Auto Complete takes the autosuggest feature even further by enhancing the experience by visually displaying the most relevant products and pages by reducing friction and taking the customer directly to the page they are looking for.

How does it help?

Increase conversion rate and reduce friction. This extension helps users find what they are looking for by returning real time results as they type in the search box. Finding the right products significantly increases conversion and user retention.

Fully customizable, allows to include custom CSS in search header and footer and advertise any promotions or call to action messages, right in the search results container.

Why is this important?

Customers will only purchase the products that they need and can find. If your customers cannot find the right product most likely they will leave your website and shop somewhere else.

Features of the Extension.

Show relevant search results as user types in the search box
Full design control over design of the search results container
Show Product Results, Popular Suggestions or both.
Set the minumum no. of characters to activate the ajax search
Show/hide product image in search results
Control over product image size
Show/hide product description in search results
Show/hide product price in search results
Customize displayed texts
Custom CSS/Html for container header and footer
Rich frontend options and color options
Clean open source code
Easy installation

How to use.

General Settings:

Go to WeltPixel > Ajax Search Autocomplete > General Settings

Enable Ajax Search and set this option to [ Yes ].

Product Search:

This section offers full control over product search results dispayed by ajax search box.

Enable Product Search and set this option to [ Yes ]. If enabled, ajax search will return products matching the search term in the search dropdown pannel.
Minimum number of characters to search - set the minimum number of characters which customers should enter to trigger autocomplete. Example: 3
Maximum number of items displayed - set the maximum number of items displayed in the dropdown list. Example: 7
Show product image [Yes / No] - show/Hide the product image in the dropdown results list.

Width of the product image - set the width for the products images in the dropdown results list [pixels]. Example: 80
Show Product Description - show/Hide product description in the dropdown results list.
Maximum number of words for the description - set te maximum number of words displayed for product description in the dropdown results list. Example: 10
Show product price - show/hide product price in the dropdown results list, if a promotion is enabled, the discounted price will show here. Once the promotion is over, the normal price will show.
Custom text when no results - set your custom text to be displayed if there is no search results. Example: Sorry, no results were found.
Header custom CSS/HTML - insert custom header text to be displayed in the dropdown results list. You can also insert CSS/HTML for design adjustments of product search header section.
Footer custom CSS/HTML - insert custom footer text to be displayed in the dropdown results list. You can also insert CSS/HTML for design adjustments of product search footer section. Note: Sample footer custom CSS uses image located under SearchAutoComplete/view/frontend/web/images/img-footer.svg, if needed you can use any other images from your server.

Popular Suggestions:

Go to WeltPixel > Ajax Search Autocomplete > Popular Suggestions Settings

Enable Popular Sugestions and set this option to [ Yes ]. - this is default magento popular sugestions functionality. You can choose to use this functionality along with the ajax search or simply disable it.

Frontend Settings:

Go to WeltPixel > Ajax Search Autosuggest > Frontend Settings

Width of results container - Set the width of the results container [pixels]. Example: 250
Show Product Divider - Show/Hide Product Divider.

Search container background color - Set color for search container, example #FFFFFF
Container Text Color - Set color for product results text in search container, Example #000000
Title Background Color - Set background color for search container titles like Product Results, Popular Suggestions, Example: #F0EFF0
Title Color - Set text color for search container titles like Product Results, Popular Suggestions, Example: #000000

LAYERED NAVIGATION FOR MAGENTO2.

PRO version of this extension included only with Pearl Theme Professional Pack.

About Layered Navigation For Magento 2.

Layered Navigation is a tool for narrowing down the displayed product list within a category by specifying one or more product attributes (e.g., narrowing the 750 products in the “Clothing” category by size, color, material, cut, etc). Multiple filters can be combined by the user to meet some very specific needs (e.g., “color: black,” “price: $19.99 - $49.99,” “waist size: 32,” and “length size: 34”). Customers that use the filters are usually converting at a much higher rate as they are able to find exactly what they are looking for in a matter of seconds.

With our extension we took the initial capabilities of the default Magento functionality and enhanced it with the most commonly used ones.

The new functionalities include:

Ajax Filter
Fully Opened/Closed/Expandable for any filter
Sorting Option by Name or Position defined by user
Show Item Counter
Hide/Show Compare Block
Hide/Show Wishlist Block
Multiselect options from the same attribute
Slide In Design (Pro Version Only)
Slide Down Design (coming soon Pro Version Only)
Hide Filter on Specific Categories (coming soon in Pro Version only)
Filter Search (coming soon in Pro Version only)
Filter by Product Ratings (coming soon in Pro Version Only)

Ajax Filtering weltpixel

We implemented the Ajax Filter do decrease time between the moment when the customer clicks a filter and moment when the products are filtered. The Ajax Filter eliminates the need of a full page refresh so your customers can experience a much faster and smoother transition while applying each filter.

Not having an Ajax Filter Option would apply 2-4 seconds (even more based on your website page load time) every time a filter is applied or removed. In addition it would interfere with the pageview count metric in Google Analytics.

To enable this filter, simply go to WeltPixel -> Layered Navigation -> Enable Ajax ( Yes / No )

Customize each filter – Fully Opened/Closed/Expandable

Magento does not allow by default to customize any attribute. With our extension now you can easily determine which filter is the most relevant so you can collapse the ones less used and allow focus on the most important ones.

This option can be found under:

Manage Attributes -> Select the attribute that you would like to customize -> Filter Display Option: ( Fully Opened / Closed / Expandable )

If you are looking for a midway solution, you will also have the option to use the Show more functionality. This option allows you to display by default 5 options (the number of options is configurable) and then have a “show more” button to reveal more.

You will also be able to select if you would like to display Quantity and how the sorting should be setup.

This option can be found under:

Manage Attributes -> Select the attribute that you would like to customize -> Show Item Counter: ( Yes / No )

Manage Attributes -> Select the attribute that you would like to customize -> Sort by: ( Position / Name )

Hide Unwanted Magento Blocks.

You probably already looked it up on Google how to remove the Category, Compare and Wishlist blocks. Look no further! You will now have the option to display or hide which block you want your customers to interact with.

This options can be found under:

WeltPixel -> Layered Navigation -> Show Category Filter: Yes/No

WeltPixel -> Layered Navigation -> Show Compare Products block: Yes/No

WeltPixel -> Layered Navigation -> Show Wish List block : Yes/No

Enable the Multi-Select functionality. weltpixel

The Multi-Select feature is the most often used by your customers. Some attributes such as size or color is often multi selected. Eg. In a shoe category that contains multiple sizes, the customer might select the following sizes 8.5/9/9.5 to make sure that he finds what he needs as sizing might often vary based on brand or style.

This option can be found under:

Manage Attributes -> Select the attribute that you would like to customize -> Enable Multiselect: Yes/No

SEO Implementation that drives results

We often seen implementations where certain attributes are added to the URL and delimited by a simple “/”. That implementation can often be very dangerous as there is no easy way of eliminating all the attribute combinations which often result in generation of ten’s of thousands of unwanted url.

Over many years of experience with Enterprise Customers, and working with leading SEO agencies, we found the most scalable implementation.

We are keeping each attribute as a query in the URL: https://weltpixel.com/women/tops-women/jackets-women.html?color=56&size=167

the attribute parameter Color and Size can be easily removed using Robots.txt file, excluded in various sitemap generator tools as well as excluded in Google Search Console.

The URL canonical tag remains the original URL https://weltpixel.com/women/tops-women/jackets-women.html

The above implementation helped rank our Enterprise Customers on top 3 position for the highest competitive keywords in the industry.

Slide In Design

Features of the Extension.

Ajax Filter
Fully Opened/Closed/Expandable for any filter
Sorting Option by Name or Position defined by user
Show Quantity
Hide/Show Compare Block
Hide/Show Wishlist Block
Multiselect
Slide In Design (Pro Version Only)
Slide Down Design (Pro Version Only)
Hide Filter on Specific Categories (coming soon)
Filter Search (coming soon)
Filter by Product Ratings (coming soon)

CONFIGURATION.

GENERAL SETTINGS

Go to Admin > WeltPixel > Layered Navigation > General Settings

Enable Layered Navigation [Yes / No] - enable Layered Navigation module
Enable Ajax [Yes / No] - Ajax Filter eliminates the need of a full page refresh so your customers can experience a much faster and smoother transition while applying each filter.

SIDEBAR SETTINGS

Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings

Sidebar Style [Default / Slide In] - Select the preferred style for the Layered Navigation sidebar block. If the 'Slide In' option is selected, the 'Compare Products' and 'Wish List' blocks will be removed from the sidebar.
Show Compare Products block [Yes / No] - Show/Hide Compare Products block from sidebar.
Show Wish List block [Yes / No] -Show/Hide Wish List block from sidebar.
Show Category Filter [Yes / No] - Show/Hide Category Filter section from Layered Navigation sidebar.
Filter Button [Icon Only / Icon + Label / Label Only] - Select the preferred style for the Layered Navigation filter button.

Attribute SETTINGS

For more settings on attribute level, go to Admin > Stores > Attributes > Product > [select attribute] > Storefront Properties > WeltPixel Layered Navigation Properties tab

Filter Display Options [Closed / Fully Opened / Exapandable] - Select how the attribute options are displayed. Can be used only with catalog input type Dropdown, Multiple Select and Price.
Initial Number of Visible Options - The number of attribute option(s) that will be initially visible. Can be used only with Filter Display Options - Expandable.
Expandable items behaviour [All / Show x more] - Select the number of attribute option(s) to show/hide when using Expand feature. Can be used only with Filter Display Options - Expandable.
Enable Multiselect [Yes / No] - Allow to filter multiple options from the same attribute.
Show Item Counter [Yes / No] - Show item counter next to the current attribute options.
Sort By [Position / Name] - Select the sorting of the current attribute options.

MAGENTO 2 EMAIL TEMPLATE EDITOR WITH GMAIL MARKUP SUPPORT.

Included only with Pearl Theme Professional Pack.

ABOUT MAGENTO 2 EMAIL TEMPLATE EDITOR.

Powerful Magento Email Template Editor with Gmail markup support. Fully responsive emails, rich design options to fully customize your transactional emails with a few clicks.

Your Magento Store is sending often emails to your customers that contain highly important information regarding their account creation, account password (forgot password), order confirmation and updates to credit memo.

These emails should always reflect detailed information, instructions, links and should closely align with your brand massaging, design and personality.

Carefully crafted emails will differentiate yourself from your competitors. The information and the way you communicate will also generate trust in your brand and a high level of customer engagement. Highly informative emails will decrease customer requests regarding their orders or their account, resulting in lower demand on Customer Service and higher Customer Satisfaction Rate.

We took Magento Emails a step further by integrating it with Gmail Markups to further increase user engagement with the appropriate actions directly in their inbox or search results.

Gmail Markups help you highlight your emails with important information and increase user engagement with interactive buttons in Gmail Inbox.

Email with Markups will appear in Google Search Results when the user searches for information about their orders.

Features of the Extension.

• Display Action Buttons in Inbox by Gmail

Reset Password
Sign In
Confirm Email
Create and Reset Password
View Wishlist

• Display View Order Buttons in Inbox by Gmail

New Order
Invoice
Credit Memo
Order Updates

• Email Template Editor for All Emails

Ability to change Text Colors, Backgrounds, Link Colors and Font
Custom CMS Block insert widget
Social Media Icons
Include Dynamic Category Navigation into Email
Google Font Support
Email Button Editor
Custom Dark and Light Logo

• Ability to send Test Emails

• Ability to customize the first line in the email for better engagement

How To use the Extension.

In order to configure your email templates there are a few steps to be completed, described in detail in below sections. A short summary of the steps:

Step 1: Set your store email addresses
Step 2: Set your store information
Step 3: Enable Enhanced Email Extension and start configuring
Step 4: Setup each email template
Step 5: Assign your templates for each email
Step 6: Submit to Gmail, for Mark-ups (optional)

Step 1: Store Email Address.

Configure Store Store Email Address. Go to Admin -> Stores -> Settings -> Configuration -> General -> Store Email Addresses and fill in the fields with your store details.

If you have already set this up, you can skip this step, else, make sure that you have configured the correct email addresses.

Step 2: Store Information.

Configure Store information. Go to Admin -> Stores -> Settings -> Configuration -> General -> General -> Store Information and fill in the fields with your store details.

Step 3: Enable the Enhanced Email extension.

Go to WeltPixel -> Email Template Editor -> General Settings.

Here you will have the options to:

Enable the extension (yes/no)
Enable Product imagens in Template (yes/no) - > this will show product images in sales order, invoice and credit memo emails.
Upload Light Logo -> in all email templates the default logo used is the light logo, make sure at least that one is uploaded
Logo width and Height -> we suggest around 150 (px) x 70 (px)
Further down you can setup the dark logo as well. This logo is not inserted by default into any template, however you can simply insert it anywhere using as a variable. The dark logo becomes valuable if your email template is using a secondary logo in the footer.

Email Header Options: make sure you have a good contrast between your logo and the background color
Email Footer Option: here you can determin the background color of the footer
Top Menu: in case you inserted the menu into the header template (it is added to all WeltPixel custom emails by default) you can set the menu background color as well as the color of each menu link and some passing.
Configure Fonts: our extension offers the possibility to configure each font (h1 to h3 as well as paragraph) by color, weight, size, style, height and spacing.

Google Font – you can set the primary font that loads to be a Google font and the fallback to be a websafe font.

Here are the email clients where Google Fonts is supported:

AOL Mail
Native Android mail app (not Gmail app)
Apple Mail
iOS Mail
Outlook 2000
Outlook.com app

Social Section Setup -> go to Content -> Blocks and search for -> weltpixel_social_media_email_block

Returns Section Setup -> go to Content -> Blocks and search for -> weltpixel_custom_block_returns

You can insert any other block into any email by using our variable:

Step 4: Setup Each Email Template.

This is probably the best time to customize a bit your emails as well (stores owners often forget to do this step) and introduce a bit of language that aligns with your brand and personality. By default, the extension creates predefined templates that you can start using or customize per you needs.

Load Template (optional)

In case you wish to create additional templates started from sample WeltPixel email templates, you can find default list under WeltPixel Enhance Email section.

Subject Lines and Name

Make sure you are maximizing the email Click-Thru-Rate by making your subject lines catchy

Email First Liner

The first line of an email often shows up in the email clients such as Gmail. Making sure that this area is optimized for engagement is a Must if you want your emails to stand out! Don’t be shy! The catchier the better!

Customize the content

Adding a personal touch to each email, the design is important but even more is the way you communicate with your customers.

Email First Liner

When you are ready, make sure that you test your emails! There is nothing more embarrassing then sending out bad looking emails.

Header and Footer

Getting started with the header and footer might be the best place to start. Simply load the templates from under the WeltPixel section. For the Header and Footer you should just simply customize them (if needed) and save them with a unique name. No need to add first liner or anything else. Those elements are specific for each email.

GMail Markups

By default the Gmail markups are already added to all weltpixel templates. However if you have your own templates and you just want to add the Gmail Markups to them we got you covered! Simply go to any transactional email and click on the Insert Variable button. Based on each email type, you will have the option to add the appropriate markup. If you do not see a markup named for example: “WeltPixel ….. Markup” for the email template that you have, that means that Gmail will not support it.

Gmail Markup approval process is described in the SUBMIT TO GMAIL section, at a later step.

Step 5: Assign your templates for each email.

Now that you have finalized your Header, Footer and each Template, it’s the time to assign the correct email template to the communication.

Header and Footer

These can be defined by storeview:

Store -> Content -> Design -> Configuration -> [Select Store] -> Transactional Emails

Select Header template
Select Footer template

Transactional Emails.

Now let’s setup all transactional emails

Store -> Configuration -> Sales -> Sales Email

In this section you will be able to setup the following emails for your customers and guests:

New Order
Order Comment
Invoice
Invoice Comment
Shipment
Shipment Comment
Credit Memo
Credit Memo Comment

Newsletter Email.

Configuration -> Customers -> Newsletter

Here you will be able to configure the template for email subscription confirmation as well as for the tragical event when a customer unsubscribes

Wish List.

If your Wish List functionality is enabled then you can set the template below:

Store -> Configuration -> Customers -> Wish List

Customer Emails.

Configuration -> Customers -> Customer Configuration

Here you will be able to setup the Welcome and Forgot Password related emails.

Submit To GMAIL.

You will need to register your email address with Google in order for the Gmail Markup to show.

Please follow these steps to get registered: https://developers.google.com/gmail/markup/registering-with-google

WeltPixel is not responsible for your account Approval or Denial.

CMS BLOCK SCHEDULER for Magento 2.

Included only with Pearl Theme Professional Pack.

About CMS BLOCK SCHEDULER for Magento 2.

This extension for Magento 2 is a powerful solution to manage, display and target the content displayed to customers with only a couple of clicks. By using this extension you will enhance and extend default functionality of Magento CMS blocks and you will be able to schedule and target ahead of time visibility of blocks, banners, promotions and events, or any content visibility you need automated.

Use this extension to provide relevant content for your visitors, automatically display 'call to action' content for specific date & time interval, target customer groups with relevant content for each group. Plan ahead each promotion for your store, create in advance all necessary homepage banners, category page promotions, cart 'call to action' motivation content and schedule promo content visibility for the time promotion is activated. Don't worry about promo content being visible after the promotion has ended, blocks visibility will automatically disable when your promotions are over. Providing relevant targeted content will undoubtedly lead to a significant increase of your conversion rate and this extension provides you just the right tools to achieve that.

Custom blocks of your choice can auto enable and become visible when the promotion starts and auto disable when the promotion ends. You will be able to target your customers and show customized content based on the Customer Group they are part from, give product / purchase recommendation, add “motivation” campaigns, encourage customers to purchase with relevant custom block content, right at the moment of buying.

Your store can be scheduled in advance to look and feel different for each customer group, promotion, event or period of the year based on Date & Time, Customer Group and Store View scheduling. Each block can be tagged and assigned to a promotion, customer group or period of the year for easily filtering and control.

Magento admin panel is the place where you schedule visibility for each CMS block, when and where it is displayed in store front and to whom is displayed. Once you enable extended options: Date Range, Customer Group and Tags, they will be visible in all CMS block forms. By enabling Date Range control, new fields 'Valid From:' and 'Valid To:' will be activated in CMS block forms, by filling in the valid interval you control the when this block will be visible in store-front; By enabling Customer Group control, new multiselect field 'Customer Group' will be activated in CMS block forms, by selecting customer groups you control frontend visibility of the block only for selected group(s); Options can be combined in order to offer enhanced flexibility for custom content control. By enabling Tags a new field named 'Tag' will be activated for CMS blocks. Tags name can be pre-defined with promotion names, or any custom name, and assigned to each block for easy filtering.

Extension works out of the box, just install it and Date Range, Customer Group and Tag control for blocks will be activated by default. If you wish to use only specific scheduler features you can easily go to extension options and activate only the features that you need in the scheduling process.

Features of the Extension.

Control when you display the content - control time interval when the CMS blocks will be displayed to your customers
Display relevant content to your visitors - control to whom you display the content - target your audience and display the blocks to a specific Customer Group
Filter through hundreds of CMS blocks easily by using our tagging system, group blocks to each promotion or event
No coding needed.
Quality code, respects magento best practice
Easy installation and setup

Configuration.

1. Go to Admin ->WeltPixel -> CMS Block Scheduler
2. Enable the scheduler options you want to use:
- Enable Tag [Yes / No] - Enable tags for CMS Blocks and Widgets, this will allow to add a tag to each block or widget, link it to a promotion or event and easily find it when necessary.
- Enable Data Range [Yes / No] Enable Data Range - lets you set the time interval when the CMS Block will be displayed
- Enable Customer Group [Yes / No] Enable Customer Group - lets you select to which customer group to display a specific CMS block.

Note: Once above features are activated, scheduling will be available under CMS Blocks options.

Manage Tags.

Go to Admin ->WeltPixel -> CMS Block scheduler -> Manage Tags
This tab allows you to define the Tags to be assigned to CMS Blocks or Widgets. You can group them by promotions, period of the year or any relevant tagging system that will allow you to find and schedule all blocks associated to a specific event.
Add a new Tag by clicking the button Add New Tag
Type the name of the Tag which can be used for tagging CMS Blocks or Widgets. By pre-defining the tag names, and assigning the tags from a dropdown selector you will avoid typo errors while using the tagging system.

Widgets settings.

The tagging system can also be used for the widgets from your store, not only for CMS Blocks.
In Admin -> Content -> Widget select the widget to be Tagged and select from a tag previously created in 'Manage Tags' section of the extension.

CMS Blocks settings.

Go to Admin -> Content -> Blocks and click Edit
Scheduler Details:
- Valid From Set start date to display the block
- Valid To Set end date to display the block
- Customer Group Set to which customer group to display the block
- Tag Set a Tag to the block. Tag needs to be previousely created in the Manage Tags section.

Filter widget and blocks using tags.

Tags can be set to all Blocks & Widgets.
The list of Tags can be found in Admin ->WeltPixel -> Manage Tags
The Tags can be filtered by ID number, identify the tag id under WeltPixel > CMS Block Scheduler > Manage Tags
Filter blocks & widgets by Tag ID number and you will be able to find all Blocks and widgets associated with that specific tag.

Clear Pearl Theme Cache.

1. From Magento Admin.

Go to System > Cache Management > WeltPixel Cache Management > Select Store View > Regenerate Pearl Theme LESS/CSS files.

2. Using Command Line SSH.

Go to the root of your magento installation and execute below commands:

php bin/magento weltpixel:less:generate
php bin/magento weltpixel:css:generate --store=default
php bin/magento cache:clean

Some cache related questions.

#1 Do I need to clear cache for each store-view?

Yes, LESS & CSS files needs to be re-generated for each individual store-view in order for the changes to apply in corresponding store-front. If you have multiple store-views and you are working on all of them in the same time you may want to use SSH regeneration as it's faster.

#2 Why do I need to clear Pearl Theme Cache?

Based on the admin settings LESS files are generated. Based on theme LESS files, CSS files are generated for each store view, so each time theme admin settings are changed, LESS/CSS files need to be regenerated in order to take into cosideration the changes made in admin settings.

#3 Can I change theme settings in Production Mode?

Yes, starting with Pearl Theme version 1.5.0 this is possible without any downtime. You don't need to switch between Production mode and Developer Mode to make theme changes, it's enough to regenerate theme cache.

#4 Do I need to regenerate LESS/CSS theme cache for any theme change?

No, only below modules use LESS files, if you are changing settings in the rest of the theme or associated WeltPixel modules, you don't need to regenerate LESS/CSS files:

Frontend Options
Design Elements
Custom Header
Custom Footer
Category Page
Product Page
Mega Menu (Navigation Links)

#5 Can I use Pearl Theme Cache Clear functionality for other themes installed on my store?

No, it only works on store views where Pearl Theme is activated.

#6 I regenerated Pearl Theme cache, still the changes do no show up in my store front.

Try clearing also Magento Cache. Clearing Pearl Theme cache does not replace the need to clear magento cache or other caches you might use.
Try clearing Browser Cache also, the page content may be cached by your machine browser.
Make sure you are making the changes on the coresponding store-view you verify in the store front.
Product Page changes needs to be made on the store-view level and not globally.

Troubleshooting.

#1 Changes not applied from Pearl Theme admin options?
No worries, most probably is one of below issues:

Step 1. After changing settings make sure to clear related caches: Flush Static Files Cache, Flush Magento Cache, Clear Browser Cache (if necessary also Flush JS/CSS Cache, Flush Catalog Images Files, Flush Cache Storage)

Step 2. Make sure to clear Pearl Theme related cache from System > Cache Management > WeltPixel Cache Management > Regenerate Pearl Theme Less / Css

Step 3. Make sure you are changing the settings on the right store view.

#2 Pearl Theme - GUI Installation issues? Try SSH Installation.

If you experienced any issues or limitations with the browser quick GUI installation, see also Pearl Theme - Advanced SSH Installation. SSH installation does the same thing as GUI but you are required to issue the commands step by step via Command Line Interface (CLI). Some servers may have high security configurations and may limit the functionality of GUI (browser) Installer.

#3 Bitnami Magento Image - Installation issues when using Bitnami?

In case you are using Bitnami you may experience some installation issues due to how this server image is configured. Based on the feedback from other users we've put together an article explaining the most common permission problems encountered, check it out here Bitnami AWS - Installation issues with Magento 2 Theme or Extensions. If this is causing to much server configuration trouble, try choosing a different hosting solution optimised for Magento 2. This article may help: Choosing the right Magento 2 hosting.

#4 Pearl Theme styles not applied or design issues after switching Magento to Production Mode?

Make sure to Regenerate Pearl Theme LESS/CSS AFTER you enabled Production Mode, you can do this from Admin -> Cache Management section or from SSH using below commands.

bin/magento weltpixel:less:generate
bin/magento weltpixel:css:generate --store=StoreCode

If you switched to Production Mode without regenerating Theme LESS & CSS files, most probably some styles will not apply properly. CSS needs to be generated for each store-view if using multiple stores.

#5 Design issues after upgrading theme, when using multiple store views.

Starting with Pearl Theme release 1.5.5 (October 20, 2017), Frontend Options functionality is improved, and the options are now available at store view level. For this reason, a different approach is necessary when using the theme on multiple store views. Sharing the same theme with the same locale language on multiple stores/store views will lead to overwriting the LESS/CSS files and potential design/functionality issues.

To avoid potential conflicts, you should use a separate set of LESS/CSS files for each individual store/storeview. In order to make sure you have separate sets of LESS/CSS for each store/store view, please choose one of the following approaches below:

1. Use different store locale options (EN, FR, ..) for each store view when using Pearl Theme on multiple store views.You should not have the same locale language for two store views Stores-> Configuration-> General-> General-> Locale Options-> Locale
2. Create different Pearl Child Themes for each store view , if using the same language on multiple store views. Please find below the steps to create a new child theme for each store view. Steps on how to create additional child themes can be followed in this article: How to use Pearl Theme on multiple store views. Important update / install instructions

#6 How to customize the store width for different page types.

Follow this detailed article on our support center: How to customize the width for your store sections in Magento 2 Pearl Theme

# More helpfull resources on our Support Knowledge Base and Community Center.

We encourage you to visit our: Support Knowledge Base as it is constantly updated. Here you can find answers on different topics or you can engage and consult with WeltPixel Community users already using our products.

Developer Corner.

WeltPixel SSH Commands.

1. Re-generate LESS/CSS, equivalent of admin regeneration:
php bin/magento weltpixel:less:generate
php bin/magneto weltpixel:css:generate --store==default
php bin/magneto weltpixel:css:generate --store==StoreCode1
php bin/magneto weltpixel:css:generate --store==StoreCode2


2. Activate Pearl Theme via SSH
php bin/magento weltpixel:theme:activate --store=GLOBAL --themePath="Pearl/weltpixel_custom"
php bin/magento weltpixel:less:generate
php bin/magento weltpixel:css:generate --store=default
php bin/magento cache:clean
--store=GLOBAL - if you do not want to activate the theme globally, specify the store name where you want to activate the theme, ex: --store=default


3. Import Demo settings
php bin/magento weltpixel:import:demo [--store="..."] [--demoVersion]
php bin/magento weltpixel:theme:configurator [--store="..."] [--homePage[="..."]] [--header[="..."]] [--categoryPage[="..."]] [--productPage[="..."]] [--footer[="..."]]
php bin/magento weltpixel:cleanup
php bin/magento weltpixel:less:generate
php bin/magento ca:cl

[--homePage[="..."]] = v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v14, v15
[--header[="..."]] = v1, v2, v3, v4
[--categoryPage[="..."]] = 2columns, 3columns, 4columns, 5columns
[--productPage[="..."]] = v1, v2, v3, v4
[--footer[="..."]] = v1, v2, v3, v4
[--store="..."] = default, GLOBAL
[--demoVersion] = v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v14, v15

Example:
php bin/magento weltpixel:import:demo --store=GLOBAL --demoVersion=v8
php bin/magento weltpixel:theme:configurator --store=GLOBAL --homePage=v8 --header=v1 --categoryPage=3columns --productPage=v1 --footer=v3
php bin/magento weltpixel:cleanup
php bin/magento weltpixel:less:generate
php bin/magento ca:cl


4. Pearl Theme Import / Export settings
4a. Export Pearl Theme Configurations from existing environment
php bin/magento weltpixel:export:configurations --store=default
--store=default - if not default, specify the store name from where you want to export the settings

> This command exports the settings for the modules that are part of Pearl Theme:  
Frontend Options
Design Elements
Category Page
Product Page
Custom Header
and will generate a .csv file weltpixel_configurations_default.csv in the root of your magento instalaltion.

4b. Export WeltPixel Module Configurations from existing environment
php bin/magento weltpixel:export:modules --store=default  --modules=WeltPixel_OwlCarouselSlider,WeltPixel_Quickview
--store=default - if not default, specify the store name from where you want to export the settings
--modules=WeltPixel_OwlCarouselSlider - the exact module name from composer should be used, if multiple modules you should separate them by comma [,].

> This command exports the settings for the modules that are included with Pearl Theme:  
Advance Product Quick View and Ajax Cart (WeltPixel_Quickview)
OWL Banner Slider and Product Carousel (WeltPixel_OwlCarouselSlider)
Google Analytics Enhanced Ecommerce Tag Manager (WeltPixel_GoogleTagManager)
Rich Snippets & Cards schema.org (WeltPixel_GoogleCards)
Enhanced Quick Cart (WeltPixel_QuickCart)
Google XML Sitemap (WeltPixel_Sitemap)
SEO Page Title Overwrite (WeltPixel_TitleRewrite)
Smart Product Tabs (WeltPixel_SmartProductTabs)
Instagram Widget Advanced (WeltPixel_InstagramWidget)
Full Page Scroll (WeltPixel_FullPageScroll)
CMS Product Reviews Widget (WeltPixel_RewiewsWidget)
Mega Menu (WeltPixel_NavigationLinks)
Enhanced Multi-Store Multi-Brand (WeltPixel_Multistore)
Custom Thank You Page (WeltPixel_ThankYouPage)
etc
and will generate a .csv file weltpixel_configurations_modules_default.csv in the root of your magento instalaltion.

4c. Import WeltPixel Settings exported from a different environment:
php bin/magento weltpixel:import:configurations --store=default --file="path/to/file"
> run above command for both theme settings and also for module settings.

Other Magento SSH Commands we use.

1. Create Magento admin user via SSH
php bin/magento admin:user:create --admin-user='weltpixel' --admin-password='qwerty123' --admin-email='support@support.com' --admin-firstname='WeltPixel' --admin-lastname='Support'

Pearl Change Log.

What’s new in v.1.7.2 - August 2, 2018

New Features:

GTM: Product level Custom Dimension / Metric sending (Possibility to send up to 5 product attributes to GTM) (Pro Version only).
Layered Navigation: Added Instant Search Functionality (Pro version only).
Layered Navigation: Added Slide down Layered Navigation Design (Pro version only).

Fixes:

Fixed admin random logout issue.
Licensing improvements, allowing 3 letter domain as valid domain.
Fixed product page title padding - an extra padding was added to product title when section with for product page was set in % instead of px.
Fixed broken title alignment for default pages introduced in v 1.7.0.
Fixed product page design when Enable Qty Increments is set to Yes.
Ajax Catalog: Layered Navigation - Ajax infinite scroll pagination fix.
Ajax Catalog: Google Tag Manager compatibility - data layer impressions push for ajax loaded content.
Ajax Catalog: Fixed JS srror: "Cannot read property length of null”.
Ajax Catalog: Fixed swatches loading after ajax call.
Header: Compatibility with disabled Full Page Scroll extension. unused full_page inclusion removed.
Header: Fixed top header submenu link colors.
Header: Fixed multi-store switcher visibility on checkout page when toggle between header and sticky header.
Header: Fixed store switcher visibility on sticky header-v2 not mobile.
Header: Fixed narrow sticky header on checkout page desktop view.
Header: Fixed header v1, v3 logo jump in firefox browser.
Rich Snippets: Adding organization name fallback to store name.
GTM: Impression chunk fix added, adding eventlabel to impression.
GTM: Checkout steps and checkout options correct sending to GTM.
GTM: Adding firecheckout checkout pagetype proper sending.
GTM: Admin store view selection after GTM API login fix.
GTM: Product Click measure enable / disable option.
Layered Navigation: Fixed Navigation overlapping logo.
Layered Navigation: Add data layer impression push to Google Tag Manager on Ajax requests.
Layered Navigation: Fixed Non Sticky header menu overlapping in Slide In design.
Layered Navigation: Additional compatibility adjustments with WeltPixel Infinite Scroll and Ajax catalog.
Layered Navigation: Swatch image proper resize.
Layered Navigation: Compatibility with Elastic Search.
MegaMenu: Fixed missing breadcrumbs on Product page for Magento 2.2.5 and greater.
MegaMenu: Added additional validations for MegaMenu options.
OWL Carousel & Slider: Fixed currency cache issue.
OWL Carousel & Slider: Mobile optimizations.
OWL Carousel & Slider: Best seller carousel max items limit now working.
Quick Cart: Fixed quick cart pushing page content on safari browser.
Quick View: Default hover value added, avoiding errors when this value is not set.
Ajax Search Autocomplete: Added link also on image thumbnail in search results.
EnhancedEmail: Compatibility with 3rd party themes that do not extend a magento default theme (luma or blank).
EnhancedEmail: Added Forgot Password Email template.
EnhancedEmail: Template re-name adjustments to match exact Magento template names for easier setup in Magento admin.
EnhancedEmail: Skip template creation if already exists in dB.

What’s new in v.1.7.1 - July 12, 2018

New Features:

New extension added to Professional Pearl Theme Pack: Magento 2 Layered Navigation - users can now easily find the products they are looking for with the help of SEO friendly functionality like Ajax filtering, Ajax Multiselect and more. Fully compatible with WeltPixel Ajax Catalog and Lazy Load functionality.
Added Contact Page V2 - possibility to upload own image on contact page, possibility to select custom block to add to contact page. Check Contact Page Version 2 - DEMO

Fixes:

Ajax Catalog & Infinite Scroll compatibility with Layered Navigation.
Small design adjustments for search V2 icon, fixing issues introduced in version 1.7.0.
Design adjustments for mobile MegaMenu on iOS devices, fixing issues introduced in version 1.7.0.
Fixed product page design when edition the product from cart page edit button - in this case design always showed Product Page v1 design, now should respect existing product page configured.
Added domain.test & [any_subdomain].domain.test to the list of valid urls for staging/development environments. Added domain validation with port number included for licensing purpose.
Added licensing compatibility with Magento B2B.

What’s new in v.1.7.0 - July 5, 2018

New Features:

New extension added to Pearl Theme Pack: CMS Block Scheduler and Targeting. - enhance and extend default functionality of Magento CMS blocks, schedule and target ahead of time visibility of blocks, banners, promotions and events, or any content visibility you need automated.
Added Product Page Tabs Version 2 - product page tabs are now available in a new design different than magento default design. Check Tabs Version 2 Demo Here.
Added Product Page Accordion Version 2 - accordions are now available in a new design. Check Accordion Version 2 Demo Here.
Sample data: Added Brands page to sample data.
Added licensing, license key needs to be generated under weltpixel.com account for purchased product, based on domain name and added under your magento installation.

Fixes:

Compatibility with Magento 2.2.5, both Open Source & Commerce Cloud B2B.
Fixed category page same height issue for items leaded by Ajax Infinite scroll.
Fixed swatch border for selected swatch when using images, now selected swatch is marked as selected even if using images.
Change regenerate LESS/CSS dropdown options to include also the Website and Store names.
Optimization in LESS/CSS generation, clear just CSS directories under pub/static.
Custom header - fixes to optimize logo display on sticky header.
Custom header - fixed page jump issue on mobile sticky header.
Product Page - gallery thumbnail border fix.
Rich Snippets - image uploader optimization.
GTM: fix for cookie restriction & page load issue
GTM: fixed broken layout for advanced search listing.
GTM: index number updates for proper tag generation, fixed duplicated index value.
GTM: fixed currency issues when using multiple currency configuration, values are now transmitted with the corresponding store-view currency in GTM account.
Lazy Loading - remove request dependancy as already exist in parent, Magento 2.1.x compilation fix.
Mega Menu - removed extra declaration, compilation error issue on Magento 2.1.x.
Mega Menu - fixed logo not clickable on sticky header.
OWL Carousel and Slider - recently viewed widget optimization, widget loaded even if not added to homepage.
OWL Carousel and Slider - optimized image loading for banners, mobile image not showed anymore in desktop view.
Quick View - fixed Image Zoom hover out, not closing the magnifier.
Ajax Search - removed extra declaration that generated compilation error on Magento 2.1.x.
Ajax Search - fixed store input not working after using search auto complete.
Ajax Search - adjusted description word count shown in quick results based on admin settings.
Enhanced Email - fixes for file translations.
Enhanced Email - fix for auto installation with Magneto, module can now be installed when Magento is installed, no need to install magento first and module afterwards.
Enhanced Email - sample data update and text changes.
Enhanced email - fix for downloadable product email template.
Enhanced Email - small design and style fixes.
Added option to enable/disable WeltPixel admin notifications.
Show store and server related information under debugging tab: Magento Mode, Magento Edition, Server User, Magento Installation Path, Current server time, Latest cron jobs.

What’s new in v.1.6.4 - May 16, 2018

New Features:

Search v2 design improvements and compatibility with Ajax Search. Search results can now be displayed horizontally or vertically. Ajax Search V2 White DEMO , Ajax Search V2 Black DEMO
Mobile Menu configurable breakpoint, ability to set the screen resolution where mobile menu kicks in. Allows to use mobile menu also in medium size resolutions like tablets or small laptops where desktop navigation is too long.

Fixes:

Compatibility with Magento 2.2.4, logger broken reference fix, changed to rewrite from plugin.
Removed main quantity box from grouped product type as it doesn’t make sense for this product type.
Header placeholder min-height fix if global promo message is active.
Logo width/height fix on sticky header in some specific configuration.
Header design adjustments on checkout page.
Back to top button is now translatable.
Ajax Infinite Scroll - removed extra parameter from store url generated by infinite scroll functionality.
Ajax Infinite Scroll - fix for ‘previous page load’, now when user hits the back button and returns in listing view mode, will land on the last page loaded with ajax or infinite scroll (ex: listing page 4).
Enhanced Email - remove hardcoded font family from paragraph tag.
Enhanced Email - load configurable product image in email templates if simple product image is not configured.
Enhanced Email - image uploader optimization, unused images are removed from server.
Enhanced Email - Template sample data generation with module installation.
GTM - Adding fieldset dependancies as well, display only if enabled.
GTM - Store view variable triggers error fix.
Multi store - removed duplicated slash from image src.
OWL Carousel - Recently viewed products now showing in carousels when full page cache is enabled.
OWL Carousel - Recently viewed products now showing in carousels even for guest users.
Sample data - Updated Sample data for Homepage v12 and V14. Sample homepage V15 is now installed with theme. Small sample settings update baed on the demo store design changes.

What’s new in v.1.6.3 - April 12, 2018

New Features:

New extension added to all Pearl Theme Packs: Quick View and Ajax Cart PRO. - PRO version now includes SEO optimizations, new quickview design #2 and hotspot widget with quick view functionality.
New extension added to Professional Pearl Theme Pack: Google Tag Manager PRO. - GTM PRO now includes variables updates, track product review count, track product review score, track stock status, track sale products, track transactions by product variants (configurable product), Track transactions by product custom options, Track custom dimension Page Type, Track custom dimension Page Name.
New extension added to Professional Pearl Theme Pack: Magento 2 Email Template Editor with Gmail Markup Support. - Powerful Magento Email Template Editor with Gmail markup support. Fully responsive emails, rich design options to fully customize your transactional emails with a few clicks.
Implemented Broken reference enable / disable functionality.
Design improvements for both desktop and mobile mega menu.
Font settings improvements, Letter Spacing option now available for fonts configurable in admin.
Font settings improvements, adding predefined values selectable from dropdown for font-weight and font-style.
Mega Menu: Added compatibility with Php 7.2.
OWL Carousel and Slider: configurable products are now included and showing up in OWL Best Sell Carousel.
GTM: Cart page ecomm_totalvalue grandtotal instead of subtotal sent / fix. (Free & Pro)
GTM: addToWishlist and addToCompare events implemented. (Free & Pro)
GTM: addToCart event sent from Wishlist add to cart as well. (Free & Pro)
GTM: Promo Link Widget added. (Free & Pro)
GTM: productStockStatus moved to product Detail Options. (Free & Pro)
GTM: Enable Advertising on Tags, configurable from admin option. (Free & Pro)
GTM: customerId sent to GTM, only if user is logged in. (Free & Pro)
GTM: New Admin Option for product Id Selection (send parent or child id in checkout, cart and purchase event). (Free & Pro)
GTM: Fix for brand attribute usage on checkout on products. (Free & Pro)
GTM: IpAnonimization option by default change to Yes. (Free & Pro)
GTM: customerId and customerGroup sent properly before page load to GTM / fix. (Free & Pro)
GTM: Variant can be sent for product details, using configurable product options, and product custom options. (Pro)
GTM: New Product Dimension introduced: reviewscore, reviewscount, productSale, pageName, pageType. (Pro)
GTM: Remove stock status dimension / moved to pro version. (Free)
GTM: StockStatus is sent as product dimenion as well. (Pro)
GTM: New GTM variables, tags and triggers created for the new options + update for the old ones. (Pro)
GTM: Added update functionality for GTM API existing tags, triggers, variables when new GTM product updates are installed. No need to remove them from GTM account as you will be able to update them by using Generate functionality. (Pro)

Fixes:

Small style adjustments for toolbar elements and dropdown in category page.
Small css and js fixes for all header versions, both sticky and normal.
Mega menu full width menu now becomes full screen.
Fix for cases when ajax loaded images with white source, ajax infinite scroll/pagination.
QuickView: removed duplicated Gallery Plugin and merge into 1 the functionality.
Search Autocomplete: search now returns results based on product visibility configured in magento, products configured as ‘not visible’ are not returned anymore in ajax search results.

What’s new in v.1.6.2 - March 23, 2018

New Features:

Added sticky header compatibility with full page scroll.
Added '404 not found' sample page to pearl theme.
OWL Carousel and Slider Pro: Banner link click configured in admin now available also on banner title and description.

Fixes:

Category page small design fixes.
Fix z-index for navigation menu.
Fixed footer v1 background color issue on intermediary resolutions.
Ipad resolution design adjustments for product page.
Minor bundle product design adjustments.
Sample data homepage v15 fix, page is now correctly imported.
Sample data homepage v6, v14 adjustments for compatibility with sticky header.
Fixed footer position for homepage v6.
Added Magento Commerce Cloud gzip css regeneration, gzip files prevented file regeneration up to this point..
Added css directory for Custom Footer module, necessary for ECE patch on commerce cloud hosting.
Fix logo width and height issue that occurred after adding sticky header functionality.
Fix Search V2 icon color.
Fix navigation position on sticly header after screen resize
Rich Snippets: remove ‘Item condition’ attribute group assignment added in pro version v1.6.1.
Rich Snippets: fixing view_preprocessed file issue for Pro version v1.6.1.
OWL Carousel and Slider: design and shadow bug fix for cross sell products to match the rest of the carousels.
OWL Carousel and Slider: center add to cart button on stand alone owl carousel installations.
OWL Carousel and Slider: redesign for slider and carousel left/right arrows.
Ajax Search Autocomplete: fixed continuous loader issue after min characters removal.
Ajax Search Autocomplete: fixed search results placeholder size when no product image is used.

What’s new in v.1.6.1 - March 8, 2018

New Features:

Improvements for Google Analytics Enhanced Ecommerce Tag Manager - Addeed new tags and triggers: Event Impression, Checkout Step, Checkout Step Option, Promotion Click, Promotion Impression.
Ajax Search Autocomplete: added suggestion click redirect for suggested results.

Fixes:

System log broken reference error fixes.
Google Tag Manager: Removed option to load GTM in the footer, now all the tags load in the head by default having all impression data load prior to the GTM container.
Google Tag Manager - removed: refund tracking, purchase tag, refund tag, product details view tag, product click trigger as deprecated.
Custom Header: fixed logo size for Header version V2 after recent sticky header refactoring.
Custom Header: added smoother sticky header transition for all header versions.
Custom Header: Multiple design fixes for various header configurations.
Custom Header: Cloud zoom margin top issue on product page.
Quick Cart: Quick Cart overlapping fix for search and header v4 mobile logo when used with Pearl Theme.

What’s new in v.1.6.0 - March 1st, 2018

New Features:

New extension added to Pearl Theme Pack: Rich Snippets PRO - Boost online store SEO, improve usability and attract more customers by adding Enhanced Rich Snippets data to your store.
New extension added to Pearl Theme Pack: Ajax Catalog and Infinite Scroll - Help your customers to explore more content and reduce website friction with axaj infinite scroll and ajax pagination.
New extension added to Pearl Theme Pack: Ajax Search Autocomplete - Help your customers find the right products, increase conversion rate and reduce friction with ajax search autocomplete.
Added Sticky Header functionality. Activate sticky header on desktop, mobile or both. Advanced sticky header color options.
Added Search Design Version 2.
Instagram - added ‘open in new tab’ Instagram image option.
Instagram - added optimized display layout for instagram pictures of various sizes, including image padding.

Fixes:

Fixes to allow Pearl Theme installation same time with Magento Installation, until this fix you needed Magento to be installed prior to proceeding with theme installation. All included modules received this fix.
Admin options rename, adding detailed hints and example settings directly in Magento admin for improved usability and comprehension of the admin options.
Header refactoring for all header versions, fixing moving elements of header sections including “jumping logo” issue.
Fix account icon on Header V2.
Header V3 dropdown - layout jumped down fix for magento 2.2.x.
Remove custom header console.log
Back to top z-index adjustment.
Rich Snippets - removed magento duplicated product schema if WeltPixel Rich snippets schema is enabled.
Rich Snippets - upgraded schema and removed error for non existing reviews.
Rich Snippets - upgraded schema and removed error "The review has no reviewed item specified."
Rich Snippets - added possibility to select the attribute used for SKU structured data.
Category page - changed default filtering direction arrow font size from 25px to 12px.
Category page - Serialization error try catch fix for Category page and Custom header.
Category page - Code cleanup.
LazyLoad - adding back fix for lazyload hover image on Pearl Theme category page.
OWL carousel Pro - change image resolution in carousels from 240x300 to 480x600 to avoid image quality loss.
Product Page - Fix padding issue on product page V1.
Product Page - Add margin bottom for breadcrumbs.
Product Page - Fix short description design issue.
Product Page - Review area desin adjustment.
Product Page - Fix for product image not resized properly on magento 2.2.x.
Quick cart - Fixed animation issue on safari browser.
Quick View - remove fullscreen zoom option as it is deprecated.
Quick View - compatibility adjustments with Infinite Scroll.
Quick View - remove duplicate plugin declaration.
Sitemap - changing sitemap attribute to ‘not required’ for categories and products in order to avoid catalog integration with external systems like ERPs.
Smart Product Tabs - store-view optimisation, possibility to configure Smart Product tabs attributes on store view level.
Thank you page - fix newsletter icon position.
Title rewrite - custom attribute visibility removed from Product Page more details.

What’s new in v.1.5.8 - January 12, 2018

New Features:

New extension added to Pearl Theme Pack: Custom Thank You Page - now you can easily customize the success page, add newsletter subscription option or add a custom block that you consider necessary.
Bulk generation of LESS/CSS for all stores where Pearl Theme is used, until now generation was done manually for each store-view.
Added version control for installed WeltPixel modules, including latest version check.
Added post installation auto-removal for Pearl Theme GUI installer, to prevent unautorised access. Design updates for GUI.

Fixes:

Updated Theme Google Fonts list with latest font list from Google.
Fixed configurable products swatch change and hover image switch.
Add pre-footer import options, with predefined colors.
Merged CSS and JS cache clear and FPC cache clear after CSS/LESS generation for a 1 click experience.
Google Cards: magento default schema removal if WeltPixel rich snippets is enabled.
Lazy Load: fixed lazy load issues on IE browsers.
Lazy Load: fixed configurable product swatch filtered listing image change.
OWL Carousel & Slider: fixed visibility of last carousel item if Stage Padding is grater than 0.
OWL Carousel & Slider: fixed Stage Padding save issues.
OWL Carousel & Slider: fixed errors for null config values.
OWL Carousel & Slider: OWL carousels, fix for image size generation.
OWL Carousel & Slider: fixed configurable products swatch change and hover image switch.
OWL Carousel & Slider: removed duplicated general carousel config options, now available only on breakpoint level in order to avoid confusion and improve usability.
Quick Cart: fixed cart quantity increments.
Quick View & Ajax Cart: allowing error message to be displayed in quick view.
Quick View & Ajax Cart: removed default magento messages from popup.
Quick View & Ajax Cart: fix for redirect after when out of stock, quick cart module conflict issue fix when both have show cart option enabled.
Translation changes

What’s new in v.1.5.7 - December 14, 2017

New Features:

Added sample homepages V14 Apartment and V15 Cosmetics.
Added admin options for footers, background color, text color.

Fixes:

CSS fixes for general design, mobile design, buton fixes for B2B module.
Added admin Clear Cache notification.
Magento 2.2.x frontend options CSS/LESS generation fix for multiple storeviews.
Pearl Theme LESS/CSS now applies only on storeview where Pearl Theme is activated (full multi theme compatibility).
Global promo message, remove hardcoded color for close button, now takes text color set in admin.
Removing old unused js files.
Fix for category page toolbar options not applied.
Remove category page bottom space, wishlist looks ok on mobile now.
Fix back to top button and quick cart style settings import.
Updated sample data with multiple mobile fixes.
Mega Menu: fixing Internet Explorer full width menu issue.
Mega Menu: adding https support for old magento versions in custom URL menu link.
Rich Snippets: Adding facebook graph warning fixes.
Rich Snippets: Adding fb:app_id meta tag and admin option posiibility as well for fb open graph.
Rich Snippets: Removing magento default schema.org pricing if google cards enabled, wrong price display fix.
Rich Snippets: New admin option: Possibility to select Price Including or Excluding taxes if both prices are displayed
Rich Snippets: Configurable products price fix.
Google Tag Manager: Eu cookie law taken into consideration for GTM, only loaded after cookie accepted.
Google Tag Manager: adding currencyCode for the purchase, remove from cart & add checkout step datalayer info.
Lazy Load: Adding fix for lazyload and hover images mouse over image on page load issue
MultiStore: Added language bar min height for desktop and mobile.
OWL Carousel and Slider: Fix year format of date picker field.
OWL Carousel and Slider: Remove 4px banner margin.
OWL Carousel and Slider: fix for banners, now centered on resolutions smaller than 768px.
OWL Carousel and Slider: unused classes cleanup.
Quick View: Redirect to cart after add to cart quickview issue fix.
Reviews Widget: Adding template for supporting Magneto 2.2 as well as maintaining older magento versions
Reviews Widget: Console error issue fix.

What’s new in v.1.5.6 - November 13, 2017

Removing serialized default border options for compatibility with Magento 2.2.1.
Added Weltpixel Support Widget for easy access to support center.
Added Weltpixel Debugger - Rewrites > classes that are rewritten multiple times by different 3rd party extensions are pointed out.

What’s new in v.1.5.5 - October 20, 2017

New Features:

Frontend options now applicable on all store views, not limited to global anymore.
Applyed store specific CSS only if theme is activated on specific store, if not activated - theme CSS is not applied in storefront anymore.
New extension added to Pearl Theme pack: Lazy Loading for Magento 2
Added options to control header icons color
Added Sample Homepage V12

Fixes:

Fixed production mode minified CSS option regeneration problem.
Fixed color not applied on currency selector dropdown.
Added max-width for Product page V1 add to cart buttons.
Fixed border bottom for Horizontal gallery on Product Page V3.
Fixed styling not properly applied on mobile checkout buttons
Google Tag manager: renamed remarketing google tag from ‘wp_google_tag’ to ‘google_tag_params’ for correct tracking.
Mega Menu: fixed inconsistent borders of active/inactive sections of mobile menu.
Mega Menu: menu item mouse over movement fix.
Mega Menu: fixed border line of first navigation active element.
OWL Carousel & Slider: Added a smooth first load for OWL PRO Slider, removed the Next/Prev effect on first load.
OWL Carousel & Slider: Fix for hover image, Prev / Next glitch.
OWL Carousel & Slider: Fix for lazy load option enabled.
OWL Carousel & Slider: Lazy load OWL functionality fixed for custom and product sliders.
OWL Carousel & Slider: Lazy Load implementation for related, upsell, crossel items.
OWL Carousel & Slider: Lazy loading OWL bug when lazy load on and items fewer than used items.
OWL Carousel & Slider: Lazy load image attribute added only if carousel enabled.

What’s new in v.1.5.3 - September 20, 2017

New Features:

Added Hover Image functionality on listing pages with possibility to select the second image from product image settings.
Added Hover Image functionality for OWL carousels.
Added mobile image & desktop image functionality for banners with frontend cache separation.
Added Custom Category Carousels, show products from specific category.
Added Global Promo Message functionality to custom header.
Added option in Custom Header to change Search Placeholder and Search icon color.
Added Sample Homepage V11 - Single product design.

Fixes:

Theme compatibility adjustments for upcoming Magento 2.2.
Category page: Fixed toolbar product overlap on hover.
Category page: Small category page toolbar adjustments.
Category page: Fixed add to cart duplication for grouped products.
Category page: Fixed next page scroll issue on category page.
Category page: small design touchups: image over pagination, align sort by & items, fixed quick cart position on product picture, fixed product box shadow, fixed product slider box shadow, fixed add to wishlist icon.
Header fixes: V1 fix padding on large desktop screens, V2 added account missing links, V4 fix for logo height overlapping navigation, AMD module header_js refactoring.
Removing accordion bootstrap widget option and js as it was conflicting with magento modal events.
Fix for breadcrumbs missing admin color properties.
Product Page: image media gallery and right content v2, v4 overlapping fix.
Product Page: Downloadable products info moved to right panel product info.
Product Page: Invalid method used in try catch, fixed.
Product Page: fixed width for actions bar.
Product Page: fixed details list view.
Product Page: remove unnecessary importants.
Product Page: restrict just on product info div the cart width 100%.
Product Page: owl carousel center true overflow fix.
Product Page: border fix for accordions and tabs.
Product Page: mobile padding fix for product details.
GTM: fix for upsell product impression block fetching
GTM: fix for related product impressions.
GTM: price separator fix for prices over 999.
GTM: fixed checkout steps from 0,1,2 to 1,2,3 in order to correctly measure checkout events.
Multi-store: removing hover effect from active multi-store image.
MegaMenu: fix left border on active category.
MegaMenu: fixed active link for menu items containing custom links.
MegaMenu: fixed misaligned subcategories for sectioned menu.
OWL: added Google Analytics banner tracking per store-view instead of global.
OWL: design adjustments for dots.
OWL: cache for product blocks added.
OWL: next/prev button admin saving fix.
OWL: auto height admin saving fix.
OWL: fixed product page carousels box shadow.
OWL: compatibility adjustments for Magento Enterprise 2.1.8.
OWL: function param doc fixes.
Quick Cart: removed on the fly .less generation and added store view related css style directly in .phtml template.
Quick cart: stoped initializing quick cart js if module is disabled.
Quick view: adjusting the downloadable information, moved the product info right side and css common media query.
Quick view: added compatibility with Magento 2.2, missing product options fix.
Sitemap: compatibility with Magento 2.2 function type compilation fix.
Sitemap: fix for product, category default exclude sitemap, update try catch.
Sample data improvements: small design touchups for sample home pages headers and footers.
Added verification for CSS generation only for Pearl Theme or sub-themes.
Compatibility adjustments for PHP 7.1
Pearl Theme Documentation improvements - created prerequisites installation section, created theme cache section, improved troubleshooting section, documented new theme options.

What’s new in v.1.5.0 - July 25, 2017

New Features:

*** Important: Added possibility to change theme admin settings in Production Mode, without store downtime. ***
Introduced a single Weltpixel cache buton that regenerates LESS/CSS files in both Developer and Production mode.
Possibility to make theme option changes in production ECE environments from magento admin with no downtime.
Added New Multi-Store Multi-Brand Extension
Custom Footer: Added admin option to enable / disable custom copyright section
Added New AOS animations in Pearl Theme
Improved Pearl Theme GUI Installer
Improved Enterprise Cloud (ECE) installation guide
Added Magento Marketplace installation guide

Fixes:

Fixed Mega Menu white font on white submenus background
Fixed Mega Menu colored background on mobile menu navigation
Fixed Mega Menu submenu links misalignment for boxed display mode
Fixed z-index of Back to Top button
Small design improvements category page layout
Sample data, fixed logo wysiwyg save on footer v3
Sample data, Magento 2.2 compatibility, version encoding widgets changes
Sitemap, Magento 2.2 function type compilation compatibility

What’s new in v.1.4.1 - June 16, 2017

New Features:

Added New MegaMenu Extension
Added Back To Top Button
Added New Sample Home Page v10 - Accessories
Compatibility with Enterprise Cloud (ECE) non-writable environments
Installation Video

Fixes:

Google XML Sitemap extension, column name change fix for Enterprise Edition

What’s new in v.1.3.4 - May 12, 2017

New Features:

Introduced 7 step GUI Pearl Theme installer - 1 minute installation, no SSH required
Added New CMS Product Reviews Widget Extension - now you can add product reviews to any page, not just product page.
Added translations files for all theme modules and included extensions

Fixes:

Fixed related and cross sell hover border not applied correctly
Fixed dynamic items display on resize
Design adjustments for category page item hover
Design adjustments for hover action buttons after resize
Layout design adjustments for 1 column layered navigation
Fixed review overflow margin on list view
Fixed header navigation section overlapping quick cart in some cases
Fixed currency switcher style in top header
Fixed XXS breakpoint to apply custom CSS styles from Magento admin
Fixed x-index of review stars
Fixed native bug of OWL carousel, prev / next buttons visibility control on breakpoints
Removing Banner store view selector, not relevant as banner is not configurable per store view.
Fixed Banner Slider hardcoded date format, date now working in all international formats
Fixed Quick Cart button for first item remove from cart, rearrange bottom quick cart buttons
Added possibility to translate quick view popup messages

What’s new in v.1.3.3 - April 05, 2017

New Features:

Added New Quick Cart Extension - now you can choose between default Magento Quick Cart and the awesome Pearl Quick Cart design.
Added possibility to control Pearl logo width / height using Magento default logo settings.
Added theme layout configurator via SSH.
Google Tag Manager - new admin option to add GTM code in head / body section.

Fixes:

Google Tag Manager - Changing the trigers and tags for multiple page view analytics issue.
Fixed OWL carousel loading issues, some times when images were too big slider was not loading properly.
Fixed button border hover color and button color on mobile devices.
Fixed title width issue on desktop.
Fixed category page last element footer overlap.
Fixed category page listing scroll issue when width 100%.
Fixed tabs feature, sometimes tab feature was not changing tabs properly.
Pearl Theme documentation improvements

What’s new in v.1.3.2 - March 20, 2017

New Features:

Added Footer and PreFooter selector in admin options.
Added possibility to import settings globally not only on store view in order to avoid user confusion when changing admin settings globally. Predefined sample settings to import globally on theme installation.
Added built in Child Theme and instructions how to customize Pearl Theme in order to be update proof.
Added additional instructions in admin in order to avoid ‘settings not applied in front-end’ situations.
Rich Snippets - new Twitter cards admin options: Summary Card, Summary Card with Large Image.

Sample data:

Added Home Page V5 to sample data
Added two sample footer blocks to sample data

Fixes:

Fixed transparency issue - slides now visible on Safari browser, OWL Banner Slider
Fixed widgets add to cart button, same font and styling as on listing pages.
Fixed size issue for header V1 logo on desktop devices
JS, CSS, breakpoint fixes for mobile v2 header, links properly display now
Fixed visibility for Product Page admin options not available for Product Page V2 and V4.
Pearl Theme documentation improvements

What’s new in v.1.3.1 - March 11, 2017

New Features:

Google Analytics - added integration with Google Adwords and Google Adwords Remarketing as well as API variables creation.
Google Analytics - added integration with OWL Carousel and Slider - this feature will allow you to track Banner Click-Through-Rate (CTR) and revenue generated by the banner.
Google Analytics - added option to calculate total order
OWL Carousel - added control of Dots visibility for product carousels per each configured breakpoint
Added translations for Pearl Theme as well as for all WeltPixel extensions included with Pearl theme.

Sample data:

Added possibility to import sample settings from any Pearl demo store in order to easily replicate each demo.
Added sample home pages v6, v7, v9, corresponding sample sliders and made adjustments for sample homepage v2
Added multiple sample pages with Pearl: alert boxes, buttons, columns and grid, multiple icons list, size chart, testimonials.

Fixes:

Theme styling adjustments, header fixes.
OWL Carousel - recently viewed products colecion fix for product carousel
OWL Carousel - not rendering head title html if no title set in backend
OWL Carousel - fixed for mobile navigation icons
OWL Carousel - fixed prev / next navigation out of screen
OWL Carousel - fixed carousel product picture padding when used in CMS pages
Google Analytics - namespace adjustments and fixing small coding standards issues
Google Analytics - success page product SKU fix
Full Page Scroll - section notice fix, menu issues as well as mobile version fixes.
Quick View - changing image position, fix for bundled products not sowing up ok in quick view.
Google XML sitemap - fixed table prefix error
WeltPixel Dashboard - structured theme modules and additional extensions included with the theme, added documentation section

What’s new in v.1.3.0 - February 2nd, 2017

NEW extension included - Google XML Sitemap
NEW extension included - Google Analytics Enhanced Ecommerce Tag Manager
Fixed Google Analytics Enabled Magento EE 2.1.3 bug for Quick View and Ajax Cart
Updated Banner Slider and OWL carousel, refactored admin options for better user interaction
Added contact form block to sample data
Added Homepage V8 to sample data
Refactored Documentation in html format

What’s new in v.1.2.2 - December 22, 2016

Category Page responsive design fixes.
Header fixes for mobile design, icon size fix, mobile menu design fixes, header width option now working correctly on mobile.
Design adjustments for mobile: H1 line height and font-size, reviews font-size.
Full page scroll fix for mobile devices.
Product page z-index issue fix for product page V3 and V4
Quick view media gallery fix

What’s new in v.1.2.1 - December 15, 2016

Category Page design adjustments and fixes for both mobile and desktop
Headers design adjustments and fixes for both mobile and desktop
Custom JS and CSS fix - applicable from admin in CMS pages, blocks, category pages
Frontend Options design adjustments and fixes for both mobile and desktop
OWL carousel and Slider: added class row for functionality with Pearl Theme, stand alone modules not affected.
OWL carousel and Slider: Styled add to cart checkbox
Product page: Introducing new design: Product Page Version 2
Product page: Introducing new design: Product Page Version 3
Product page: Introducing new design: Product Page Version 4
QuickView: Fixed border for ‘Go to product’ button

What’s new in v.1.2.0 - November 21st, 2016

New extension included in Pearl Theme: Full Page Scroll Full page scroll for Magento2
New extension included in Pearl Theme: Instagram Widget Advanced Instagram widget advanced for Magento2
Optimisations for default settings implemented in Pearl Theme
Category page fix for mobile grid, 2 items per row fix
Category page: add h2 to product name
Category page layout fixes: toolbar overlapping menu fix, wishlist icon on mobile fix, hover on mobile view fix, special price strike fix, add to cart button layout fix, admin settings not applied on search result page - fixed
Category page layout compatibility fixes with magento 2.0.9
Custom header: header width fix
Custom header: search layout and background fixes for additional store view
Custom header: navigation 1st menu items dropdown padding fix
Custom header: header search mobile padding fix
Custom header: mobile double border header fix
Custom header: z-index nav fix
Custom header: language popup fix
Custom header: removing white space below header
Design elements: minor changes to custom css
Design elements: custom css & js breakpoints added to cms pages
Design elements: custom css & js breakpoints added to blocks and categories
Design elements: primary buttons css adjustments
Frontend Options: action link options created
Frontend Options: price option added
Frontend Options: config value added
Frontend Options: old price line through fix
Frontend Options: variables marked as required in order to avoid frontend css error
Frontend Options: fixed main options visibility in store view
Frontend Options: fixed responsive layout for pages width smaller than ‘Full Width’
Rich Snippets: composer.json dependency updated to backend 1.0.3 instead of master
Rich Snippets: description and name slash error fix
Owl carousel slider: renamed from “sell” to “Sale” products
Owl carousel slider: fix for proper product base url fetching
Owl carousel slider: image link bug fix
Owl carousel slider: option added for display to wishlist and compare
Owl carousel slider: time changed for setTimeout
Owl carousel slider: bug fixed to arrows position and ajaxComplete for loading
Owl carousel slider: title tag changed in h3
Owl carousel slider: loader fix
Owl carousel slider: dots and arrows fix
QuickView: - Position middle to gallery
Sample data: home page v3 layout fix
Sample data: Image proper tags closing
Sample data: proper margin:0 for mobile v3 images added

What’s new in v.1.1.0 - September 12, 2016

New extension included in Pearl Theme: SEO Page Title Overwrite: Seo page title overwrite for Magento2
New extension included in Pearl Theme, Smart Product Tabs: Smart product tabs
New extension: sample data, install Pearl demo-store data
New feature: option to set 2 products per row in category page, now you can set 2,3,4 and 5 products / row from admin options
Header: Search mobile overlapping issue fix
Renderer fix for border width
Changing default configuration values
Owl Carousel: added banner_id -> each slider can be customized separately using banner_id
Owl Carousel: added breakpoint validation, must be greater than 0
Owl Carousel: adding Admin Option dependencies, rearranging fields in more logical order
Owl Carousel: update the default values to avoid confusions
Owl carousel: styling changes on product carousels
Fixing small styling issues
Category page: layout fixes, related product checkbox alignment, items per grid css fix,
Category page: fix for category page title added back if breadcrumb removed, 2.1 upgrade fixes
Product page: Wishlist Alignment fix on related products
Frontend options: changing some default configuration values

What’s new in v.1.0.3 - August 2nd, 2016

Added admin notification functionality
Color picker fix
Composer versions dependency update

What’s new in v.1.0.2 - July 28, 2016

Theme compatibility adjustments with Magento 2.1
Small frontend fixes

What’s new in v.1.0.1 - July 26, 2016

Small frontend fixes

What’s new in v.1.0.0 - July 25, 2016

Initial release

Pearl Theme for Magento 2.

User Guide.

THEME FILES.

Highly Modular Theme Package.

Modularity advantages.

For even more speed: Modular Design Elements.

PREREQUISITES.

Magento Compatibility.

Magento Commerce Cloud Compatibility.

Browser Compatibility.

Magento Marketplace.

Quick Installation.

Pearl Theme GUI (browser) Installation.

Step 1:

Step 2.

Step 3.

Step 4.

Troubleshooting:

ADVANCED SSH Installation.

Pearl Theme. SSH Installation Steps.

Step 1:

Step 2.

Step 3.

Theme layout Pre-configuration via SSH

Step 4.

Step 5.

Magento Commerce Cloud Installation.

Step 1.

Step 2.

Step 3.

Step 4.

Theme layout Pre-configuration via SSH

How Commerce Cloud Patch Works.

Magento Marketplace Installation.

Guide for users who purchsed Pearl Theme from Magento Marketplace

Step 1. Connect Marketplace account.

Step 2. Syncronize purchased extensions.

Step 3. Select the theme for installation.

Step 4. Compatibility Check

Step 5. Installation Process

Step 6. Add Sample Pictures. (optional)

Step 7. Activate Pearl Theme.

Step 8. Theme Layout Pre-Configuration or restore to default.

Upgrade Theme.

Customize Theme (optional)

CUSTOM CSS & JS.

Custom CSS and JS for category pages.

Custom CSS and JS - static pages

Custom CSS & JS - static blocks.

Child Theme Customizations

TRANSLATE PEARL THEME.

TRANSLATE MODULES.

CHANGE LOGO.

Frontend Options.

Breakpoints.

Section width

Main Options

Headings H1 up to H6 and Paragraphs.

Links

Default Buttons.

Primary Buttons.

Ratings

Form inputs.

Dropdown

Breadcrumbs

Custom Header

Header Version 1

Header Version 2

Header Version 3

Header Version 4

General Settings.

Global Promo Message.

Top Header.

Middle Header.

Search Options

Header Navigation.

Prefooter and Footer.

DESIGN ELEMENTS. MODULAR ELEMENTS.

General.

BACK TO TOP.