weltpixel

Pearl Theme for Magento 2.

Version 1.6.4 - May 16, 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/EnhancedEmail (Pearl Theme Professional version 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

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

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

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


               # 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
  • [--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
                   

    Step 4.

    Enable the theme

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

    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

    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
  • [--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!


    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.

    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.

    weltpixel

    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.

    weltpixel
    weltpixel

    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
    weltpixel

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

    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.

    weltpixel

    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 ]
    weltpixel
    weltpixel

    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.

    Go to Weltpixel -> Frontend options -> Form Inputs [input-text| select| textarea| input-radio| input-checkbox] and set color, font size, font style and more, for all Form inputs of type [input-text|select|textarea|input-radio|input-checkbox]:

    • 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
    weltpixel
    weltpixel

    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

    weltpixel
    weltpixel

    Header Version 3

    Header Version 4

    weltpixel
    weltpixel

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

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

    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)

    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 ]
    weltpixel
    weltpixel

    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]
    weltpixel

    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 ]
    weltpixel
    weltpixel

    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 ]
    weltpixel
    weltpixel

    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 ]
    weltpixel
    weltpixel

    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 ]
    weltpixel

    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
    weltpixel

    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 ]
    weltpixel

    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

    weltpixel
    weltpixel

    Product Page Version 2

    Product Page Version 3.

    weltpixel
    weltpixel

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

    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 ]

    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 ]
    weltpixel
    weltpixel

    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 ]
    weltpixel
    weltpixel

    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.

    weltpixel
    weltpixel

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

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

    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
    weltpixel

    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>

    weltpixel

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

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

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

    weltpixel
    weltpixel



      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.

    weltpixel
    weltpixel

    GOOGLE ANALYTICS ENHANCED ECOMMERCE TAG MANAGER FOR MAGENTO2.

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

    Made for Web Merchandisers.

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

    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!

    weltpixel
    weltpixel

    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.

    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.

    weltpixel
    weltpixel

    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.

    weltpixel
    weltpixel

    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.

    weltpixel
    weltpixel

    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 ].
  • weltpixel
    weltpixel

    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.

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

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

    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.

    weltpixel
    weltpixel
    • 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
    weltpixel
    weltpixel

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

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

    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)
    weltpixel
    weltpixel
    • 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.
    weltpixel
    weltpixel
    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"]
    weltpixel
    weltpixel
      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.
    weltpixel
    weltpixel
    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
    weltpixel
    weltpixel

    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
    weltpixel
    weltpixel
    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
    weltpixel
    weltpixel
    • After you click debug button, then you will get the analysis.
    weltpixel

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

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

    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.

    weltpixel
    weltpixel
    • 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!
    weltpixel
    weltpixel

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

    weltpixel
    weltpixel

    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
    weltpixel

    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.

    weltpixel
    weltpixel

    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.

    weltpixel
    weltpixel

    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.

    weltpixel
    weltpixel

    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

    weltpixel
    weltpixel

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

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

    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.

    weltpixel
    weltpixel

    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:

      Enter this url in your browser with the username you want to find and your access token you just received at step 6.

                                    https://api.instagram.com/v1/users/search?q=[USERNAME]&access_token=[ACCESS TOKEN]
                                 

      You should receive an answer in your browser with your user ID, looking like this:

    weltpixel
    weltpixel

    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.

    weltpixel
    weltpixel

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

    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"}}
                               
    weltpixel
    weltpixel
    • 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.
    weltpixel

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

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

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

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

    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
    weltpixel

    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.

    weltpixel

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

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

    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).
    weltpixel
    weltpixel multi-store multi-brand

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

    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 and checkout with the same account.

    With this extension you can have multiple stores 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.
    weltpixel

    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.

    weltpixel
    weltpixel

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

    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 ]
    weltpixel
    weltpixel

    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

    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 ]
    weltpixel
    weltpixel

    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.