weltpixel

Stack Framework for Magento 2.

User Guide.

Version 1.10.7 - March 26, 2021

FRAMEWORK FILES.

The framework includes the following files:

  • Framework and included extensions files
  • Documentation
  • Licensing
  • Framework Installation GUI

Highly Modular Architecture.

Stack Framework contains a core module that needs to be installed at all times as it includes compatibility adjustments between framework modules. Framework files are located under below folder structure, and you can have either the Essential version or the Professional version, but not both versions at the same time:

  • app/code/WeltPixel/Backend
  • app/code/WeltPixel/FrameworkEssential
  • app/code/WeltPixel/FrameworkPro


The framework comes with modular architecture, and includes below extensions that are compatible all together as well as individually. Based on your project requirements you can choose to disable some of the extensions and only use what is required in your current project. With the out of the box modules compatibility Stack Framework is 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/Quickview
  • app/code/WeltPixel/GoogleCards
  • app/code/WeltPixel/LazyLoading
  • app/code/WeltPixel/OwlCarouselSlider
  • 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/LayeredNavigation
  • app/code/WeltPixel/Newsletter
  • app/code/WeltPixel/AdvanceCategorySorting
  • app/code/WeltPixel/ProductLabels
  • app/code/WeltPixel/SocialLogin
  • app/code/WeltPixel/AdvancedWishlist
  • app/code/WeltPixel/SpeedOptimization
  • app/code/WeltPixel/EnhancedEmail (Stack Framework Professional Pack only)
  • app/code/WeltPixel/CmsBlockScheduler (Stack Framework Professional Pack only)
  • app/code/WeltPixel/RecentlyViewedBar (Stack Framework Professional Pack only)
  • app/code/WeltPixel/UserProfile (Stack Framework Professional Pack only)
  • app/code/WeSupply/Toolbox - Integration with WeSupply - Magento Order Tracking

Modularity advantages.

  • Fast and light code - unnecessary extensions from Stack Framework can be disabled, while the remaining ones will remain compatible with each other.
  • Easy debugging - each section of the framework can be disabled in order to identify a potential issue.
  • Easily replace sections of the framework with other 3rd party functionalities, easy integration without any coding needed. (Example: you can disable WeltPixel MegaMenu and use a 3rd party MegaMenu extension that you prefeer)

PREREQUISITES.

Magento Compatibility.

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

  • 2.0 - 2.0.x
  • 2.1 - 2.1.17
  • 2.2 - 2.2.10
  • 2.3.0 - 2.3.5
  • 2.4.0 - 2.4.2

It is highly recommended to install the framework 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.

Stack Framework for Magento 2 and all included extensions are compatible with Magento Commerce Cloud Edition or other read-only environmnets. More details under Magento Commerce Cloud Installation chapter.

Browser Compatibility.

Stack Framework for Magento 2 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 the included extension.

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

3rd party Extensions Compatibility.

Note 1: It is highly recommended check for extensions installed on your store that offer the same functionality as the ones included in the framework. Extensions included in the framework are designed and tested to work well together, if you have to choose between the same extension from weltpixel or a different vendor, for best performance and compatibility we recommend to go with the Stack Framework bundle.

Note 2: It is recommended to disable other 3rd party extensions before installing the Stack Framework and enable the ones that you still need after the installation, one by one. This way in case of any compatibility issue, you can easily identify and isolate the problem imediatly, by disabling one of the 2 extensions conflicting.



Quick Installation.

Stack Framework 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 'Framework Files' directory into the root of your Magento installation.

Note: If you're running Magento 2.3.0 - 2.3.2, please also copy the content from the Patches folder, making sure you select the Overwrite option when prompted.

Step 3.

In your browser go to www.yourmagentostore.com/stack-framework-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video .
You can choose what extensions to be installed from the framework pack. If you are not sure, you can install all of them and check them out, and later remove what you don't use.

Step 4.

Woohoo! Stack Framework is installed and your store should already be looking awesome!

Note: In order to prevent unauthorised access to your installation GUI, we advise removing or renaming the folder 'stack-framework-installation' from the root of your Magento installation once the installation is completed or submitting automatic removal in Step 3 at the end of the GUI installation.

Troubleshooting:

If you experienced any issues or limitations with this quick GUI installation, see also Stack Framework - 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.

Stack Framework. 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 'Framework Files' directory into the root of your Magento installation.

Note: If you're running Magento 2.3.0 - 2.3.2, please also copy the content from the Patches folder, making sure you select the Overwrite option when prompted.

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. You can enable all the extensions with the following command

php bin/magento module:enable WeltPixel_Backend WeltPixel_FrameworkPro WeltPixel_NavigationLinks WeltPixel_ProductPage
 WeltPixel_OwlCarouselSlider WeltPixel_LazyLoading WeltPixel_Command WeltPixel_Quickview WeltPixel_GoogleCards WeltPixel_TitleRewrite
 WeltPixel_SmartProductTabs WeltPixel_MobileDetect WeltPixel_InstagramWidget WeltPixel_FullPageScroll WeltPixel_GoogleTagManager
 WeltPixel_Sitemap WeltPixel_QuickCart WeltPixel_ReviewsWidget WeltPixel_Multistore WeltPixel_ThankYouPage WeltPixel_AjaxInfiniteScroll
 WeltPixel_SearchAutoComplete WeltPixel_ProductLabels WeltPixel_LayeredNavigation WeltPixel_Newsletter WeltPixel_AdvanceCategorySorting
 WeltPixel_CmsBlockScheduler WeltPixel_EnhancedEmail WeltPixel_RecentlyViewedBar WeltPixel_SocialLogin WeltPixel_AdvancedWishlist
 WeltPixel_UserProfile WeltPixel_SpeedOptimization --clear-static-content

# b2. enable Stack Framework Core modules (start with Weltpixel_Backend)
php bin/magento module:enable WeltPixel_Backend --clear-static-content
php bin/magento module:enable WeltPixel_FrameworkPro --clear-static-content (use WeltPixel_FrameworkEssential for Essential pack)


#b3. enable WeltPixel extensions included in Stack Framework (you can only enable what you need, and disable the rest)

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_OwlCarouselSlider --clear-static-content
php bin/magento module:enable WeltPixel_LazyLoading --clear-static-content
php bin/magento module:enable WeltPixel_TitleRewrite --clear-static-content
php bin/magento module:enable WeltPixel_SmartProductTabs --clear-static-content
php bin/magento module:enable WeltPixel_MobileDetect --clear-static-content
php bin/magento module:enable WeltPixel_InstagramWidget --clear-static-content
php bin/magento module:enable WeltPixel_FullPageScroll --clear-static-content
php bin/magento module:enable WeltPixel_GoogleTagManager --clear-static-content
php bin/magento module:enable WeltPixel_Sitemap --clear-static-content
php bin/magento module:enable WeltPixel_QuickCart --clear-static-content
php bin/magento module:enable WeltPixel_ReviewsWidget --clear-static-content
php bin/magento module:enable WeltPixel_Multistore --clear-static-content
php bin/magento module:enable WeltPixel_ThankYouPage --clear-static-content
php bin/magento module:enable WeltPixel_AjaxInfiniteScroll --clear-static-content
php bin/magento module:enable WeltPixel_SearchAutoComplete --clear-static-content
php bin/magento module:enable WeltPixel_ProductLabels --clear-static-content
php bin/magento module:enable WeltPixel_LayeredNavigation --clear-static-content
php bin/magento module:enable WeltPixel_Newsletter --clear-static-content
php bin/magento module:enable WeltPixel_AdvanceCategorySorting --clear-static-content
php bin/magento module:enable WeltPixel_AdvancedWishlist --clear-static-content
php bin/magento module:enable WeSupply_Toolbox --clear-static-content
php bin/magento module:enable WeltPixel_CmsBlockScheduler --clear-static-content
php bin/magento module:enable WeltPixel_EnhancedEmail --clear-static-content
php bin/magento module:enable WeltPixel_RecentlyViewedBar --clear-static-content
php bin/magento module:enable WeltPixel_UserProfile --clear-static-content


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


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


# e. generate static content
rm -rf generated/* var/cache/* var/page_cache/*
php bin/magento setup:static-content:deploy -f

Step 3.

Woohoo! Stack Framework is installed and your store should be already looking awesome!

Magento Commerce Cloud Installation.

Step 1.

1. Copy 'app folder from Framework Files (Magento Commerce) folder in the root of your magento installation.

Step 2.

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

Step 3.

Woohoo! Stack Framework is installed and your store should be already looking awesome!

Upgrade the framework.

! Important : Before any upgrade it is recommended to backup of your Code and Database.

How to update Stack Framework to latest version.

We are constantly releasing product updates containing fixes, new features and compatibility adjustments with latest Magento releases. You can check Stack Framework - Change Log for more details.

Upgrade all extensions at once not selectively.

Make sure to upgrade all included extensions to the latest version, as often when compatibility adjustments are implemented it is necessary to make changes in more than one extension to fix a reported problem. The extensions should be treated as a package and updated at the same version all the time in order to avoid compatibility issues.

Step 1.

Go to your account on www.weltpixel.com and download the latest Stack Framework Pack from Downlodable Products section of your account.

Step 2.

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.

During framework upgrade process, existing sample pages, blocks, sliders will not be overwritten but only add new sample elements included in the latest release.

Step 3.

Replace Stack Framework files with the new ones you just downloaded. It's important to replace the files and not overwrite them. Some parts of the framework may be refactored and some of the files are not needed anymore and could generate errors.

! Note on framework files: Make sure to use framework files corresponding to your Magento version. Because of significant Magento core code changes in M2.3, we are using separate code for Magento 2.0 - 2.2.x / Magento 2.3.x in order to provide best code performance.

What files to remove before the upgrade: '/html/app/code/WeltPixel/*' and '/html/app/code/WeSupply/*'

Step 4.

Unpack and upload the content from the 'Framework Files' directory into the root of your Magento installation. Make sure you use the directory specific to your Magento version, as there are two sets of files: one for Magento 2.0.x - 2.2.x and one for Magento 2.3.x. This is very important, as the files are different and using the wrong set can lead to installation and functionality issues.

Step 5.

In your browser go to www.yourmagentostore.com/stack-framework-installation/ and simply follow the installation steps from the graphical interface, presented in your browser URL.

Step 6.

Woohoo! You updated Stack Framework to latest version!




TRANSLATE MODULES.

You can translate a WeltPixel module that is part of the Stack Framework 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

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

    Pro Version of this extension included only with Stack Framework Professional Pack.

    About Google Analytics For Magento 2.

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

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

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

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

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

    Features of the Extension.

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

    Made for Web Merchandisers.

    "Enhanced Ecommerce gives me information beyond shopper behavior, I actually know what products my customers need!"
    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.

    • a. Go to Admin > Store > Configuration > Sales > Google API > Google Analytics > and set this option to [ No ].
    • b. Go to Admin > Store > Configuration > Sales > Google API > Google Adwords > and set this option to [ No ].
    • c. 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.

    Note!: If, for any reason, the Sign in to Google functionality does not work for you, try out the JSON Export process as an alternative. You can find it by scrolling down to the last section of the extension options in the Magento Admin.

    Hit Save Config button.

    Step 6A.

    • 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

    Step 6B.

    As an alternative, if the Sign in to Google functionality does not work, you can export the configuration as a JSON and import it into your Google Tag Manager container.

    Note: After making any extension configuration changes, remember to re-generate the JSON and re-import and overwrite the existing GTM container to ensure your settings are picked up by Google.

    Generate JSON.

    • Go to WeltPixel > Google Analytics Enhanced Ecommerce > JSON Export Options and hit the Generate Json for Variables, Triggers and Tags button.

      You will be notified that the JSON has been generated successfully and a Download JSON button will appear. Click the button to download the generated JSON.

    Tag Manager Admin.

    • Go to yourGoogle Tag Manager Dashboard and access the Admin section and choose Import Container

    weltpixel
    weltpixel

    Import JSON.

    • Click on the Choose container file button and find your previously generated and downloaded JSON file. Then, choose a workspace (you can choose an existing workspace or create a new one) and an import option.

      When importing your container, you will have the option to merge the imported content with the selected workspace, or overwrite the workspace entirely. Overwriting the selected workspace will remove all your existing tags, triggers and variables in that workspace, and will replace them with the imported container.

    Preview and Confirm.

    • After importing the generated JSON, a preview will show up letting you know the number of changes made to the container. There should be Tags, Triggers and Variables created or updated in various amounts depending on your Magento Admin settings. Click on Confirm and you should be done with importing your settings!

    weltpixel
    weltpixel

    Step 7.

    • After all your tags have been created in Google Tag Manager (GTM), go to Google Tag Manager (GTM) account and PUBLISH / SUBMIT all your tags by following the steps from Google Tag Manager.
    • ! NOTE: If the container is not published/submitted in your GTM account, no tracking will be available. Make sure to publish your container.
    • !! NOTE 2: Displaying statistics in your Google Analytics account based on tracked data could take from 30 minutes from 48 hours according to GTM Documentation. However, real time data shoud be visible right away if your account is correctly setup.

    Step 8.

    • In your Google Analytics account, go to Admin > Ecommerce Settings in order to define the labels for checkout-funnel steps.

    weltpixel
    weltpixel

    Checkout Steps E-Commerce setup.

    Step 9.

    In order to activate your conversion sections of your Google Analytics dashboard you have to:

    • a. Enable Ecommerce

    • b. Enable Enhanced Ecommerce Reporting

    • c. Add Checkout Labeling (Funnel Steps). Each store can have different checkout steps, so make sure to identify your checkout steps using GTM debugger (GTM container preview) before adding them here in order to avoid wrong tracking. Here is a common Magento checkout funnel example:

      • Shipping
      • Shipping Method
      • Payment and Billing

    • d. Save Ecommerce set-up.

    More details about Checkout funnels here: How to setup Enhanced Ecommerce reports (Google Documentation)

    How can I identify how many steps my store has?

    Step 10.

    • Go to your GTM dashboard and enable preview mode
    weltpixel
    weltpixel
    • Go to your store and with the preview mode enabled proceed to checkout. (Make sure you have at least one product in the shopping cart!)
    • If the GTM container is in preview mode, you should already see the GTM tag debugger when loading your checkout page. (Make sure you are using the same browser for enabling preview mode and the debugging of your checkout steps.)
    • You will find that under Checkout - Data layer, each step that has loaded can be seen as in our example.
    • Step 1 (Shipping Address).

      • Great news! We've identified the first step (Shipping Address) of the checkout process presented in this example! We'll need to remember it, as in the sections below, we'll be shown how to add this step to the Google Analytics checkout funnel.

      Note: Each checkout process is different, so for your store, you may have a different option here.

    • Complete each required field with your customer information and proceed to the next step.

    • Next, we'll need to head to the following step of the checkout process, which, in our case is the Shipping Methods section, make sure you select an option and click the Next button.


    weltpixel
    weltpixel
    • In the preview window you will see two new events fired, a new checkout event for step 2 as well as the option associated with this step.
    • As you can see in the photo on the left, we've identified -> Step 2 (Shipping Methods) of our example. Just make a note of it, as it will have to be added to the Google Analytics checkout funnel as well.


      • Note: Each checkout process is different, so for your store, you may have a different option here.

    • Since Step 2 has multiple shipping methods, in our example, in the Checkout Option section of the GTM debugger, you can find out more specific details about the selected shipping option.


      • Note: This is informative, and you'd only need to access this if you wanted additional details about this checkout step.

    weltpixel
    weltpixel
    • In our checkout funnel the next step is to select Payment Method. We select the payment method and click on the Place Order button.
    • By pushing the Place Order button we are redirected to the checkout success page and we've successfully identified this step as well as being Step 3 (Payment Method) by following the same process explained in the sections above.

    Configure Google Analytics checkout behavior.

    Step 11.

    • Go to Admin -> Ecommerce Settings, as shown in the photo on the right.
    • Each checkout table has a number on the left hand side, that number needs to match with the checkout step identified above. Under Label Name, simply type in the name of each step of your own checkout process identified in the previous section. It's important that they match exactly, as otherwise, the checkout drop-off behavior that shows in the GA account would not be relevant to your store.
    • After a few days of data collection you will be able to visualize the checkout funnel in your report under Conversions -> Ecommerce -> Checkout Behavior. According to Google, it may take up to 48 hours for data to start flowing in.
    • Please note that reporting will be only available from the moment your setup the checkout behavior steps. It will not provide data for days prior to setup.
    weltpixel

    Step 12.

    • 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 ] - Calculates total amount on success page based on Subtotal or Grandtotal
    • Measure Product Clicks - This option allows ‘Product Click’ tracking on Category Page , Search results page and Related/Cross-sell/Up-sell product grids. If Product Click Tracking is enabled this option rewrites Magento_Catalog::product/list.phtml and Magento_Catalog::product/list/list.phtml. If you are using a custom theme/extension already re-writing this templates check here how you can make the necessary compatibility adjustments: How to solve GTM compatibility issues
    weltpixel
    weltpixel
    • 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

    Linking your GA with AdWords Account.

    • Linking your Google Ads account to your Analytics property lets you see the full customer cycle, from how they interact with your marketing (e.g., seeing ad impressions, clicking ads) to how they finally complete the goals you’ve set for them on your site (e.g., making purchases, consuming content).
    • When you link Google Ads and Analytics, you can see ad and site performance data in the Google Ads reports in Analytics.
    • When linking GA with AdWords you can select if you want Manual or automatic tagging.
    • Please refer to this article for more information https://support.google.com/analytics/answer/1733663?hl=en&utm_id=ad

    Step 1.

    • Go to GA Admin

    Step 2.

    • Under the Product Linking column, click on Google Ads Linking.
    weltpixel
    weltpixel

    Step 3.

    • Once configured, click on Link accounts.
    • Presto! Google Analytics is now linked to AdWords!

    Setup Custom Dimensions & Metrics.

    Step 1.

    • Google Analytics allows for tracking custom Dimensions as well as custom Metrics.
    • Our extension enables you to track multiple custom dimensions specific to each custom dimension scope.
    • In GA you will need to setup custom dimensions to enable tracking.
    • Go to: GA Admin
    weltpixel
    weltpixel

    Step 2.

    • Under the Property column, click on Custom Definitions and then Custom Dimensions

    Step 3.

    If you are just starting out we highly recommend creating everything as described. In Magento Admin Panel we are pre-populating each custom dimension with sample indexes for your help. Please make sure that the Custom Dimension scopes and Indexes in Magento match with the ones created in GA. In a fresh GA account, the index number will start from 1 and as you create them will increase sequentially. An example can be seen in the screenshot in Step 6.

    • Click on the +New Custom Dimension button.
    weltpixel
    weltpixel

    Step 4.

    • Insert Custom Dimension Name.
    • Select the Custom Dimension Scope.
    • Make sure the Active box is checked.
    • Click on the Create button.

    Step 5.

    • Click on the Done button to complete the creation of your Custom Dimension.
    weltpixel
    weltpixel

    Step 6. Success!

    • This is an example. If you are an advanced GA user, go ahead and set each dimension up as you wish. Just make sure they match with what you have in Magento.
    • The index number can be found here (if created for the first time, this will be in a sequential order):
    • As soon as the Custom Dimensions are setup in GA and they are verified to match with Magento, hit the Create tags button in your Magento Admin. This will automatically assign each custom dimension to the appropriate tag in GTM.
    • If you've already created the tag, the GTM PRO version of our module will automatically update each tag as soon as you sync the Magento tags with GTM.
    weltpixel

    Troubleshooting.

    Preview and debug GTM tags

    • Use GTM Preview functionality
      There are many ways to troubleshoot your GTM setup. However we found that using the GTM preview mode you can quickly and easily troubleshoot your GTM setup regardless of your expertise level. Go to your GTM account and in the top right corner you will see the Preview Button
    • As soon as you enable the Preview Mode go to your website and refresh the page. You will see all the Tags that got fired.
    weltpixel
    weltpixel
    • Deploy your change
      After your setup all your tags make sure that you publish all your changes. Go to GTM account and in the Top Right corner your will find the Submit button. Make sure that those tags are fully published in order to be able to track everything.
    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
      • App Id fb:app_id
      • Retailer's ID for the item product:retailer_item_id
      • Enable Facebook Graph For CMS Pages Choose whether or not to enable the Facebook Open Graph functionality for CMS Pages as well.
    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.

    Magento 2 SEO Page Title Overwrite Extension detailed screenshot.

    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 on listing pages or categories in menu.

    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 on the listing page, and a rich long SEO friendly Rewrite Name for your product that will be indexed by search engines and displayed on product page as H1 title.

    This way your product names will be SEO friendly but in listing page 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’ displayed on propduct pag as H1 title, and Product Name (displayed on listing page): ‘ 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 will be displayed on catagory page as H1 title, and a category name you want visible in the navigation menu. Example: Category Name rewrite (seo friendly): 'Woman Clothes Winter Collection 2016, Hand Tailored in the USA' (displayed on category page as H1 title) and Category Name (displayed in menu): '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

    MAGENTO 2 INSTAGRAM FEED WIDGET

    About the Instagram Feed Widget for Magento 2.

    Social network influence has become incredibly 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 the 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 them and uploading those photos to Instagram, this extension fits you perfectly.

    This Extension provides the possibility to display an Instagram image feed on Category Pages, Homepages, Product Pages or other CMS pages.

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

    This widget comes with an extended list of options compared to other widgets: you can select the background color of widget container in order to fit your page from the Magento admin. 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. Pictures can be displayed by user. The multitude of options will allow you to customise the widget and its content to fit your business needs.

    Features of the Extension.

    • Display Instagram feed - on your web page, display the Instagram feed according to user account.
    • Select number of images - possibility to select the maximum number of the images you want to add.
    • Add title - option to add a Title.
    • Add description - option to add a Description.
    • Images per row - possibility to change the images per Row from 2 - 6.
    • Image size - you can change the resolution of the Instagram images.
    weltpixel

    How to configure the extension.

    Step 1.

    • Head to Content > Pages or Content > Blocks. From here, the steps are the same for Pages or for Blocks. Edit the page or block content.

    Step 2.

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

    weltpixel
    weltpixel

    STEP 3.

    • The Magento 2 Instagram Feed Widget is a simple way to add Instagram photos to your site. Setting up the widget is quite easy.

      • Instagram Api Type - Starting with version 1.9.2 of the extension, the Instagram API is deprecated. If you're setting up the extension for the fist time, please select the Javascript Fetching option.
      • Title - Insert a title for the widget.
      • Description - Insert a short description.
      • Container Background Color - Select the color that you want to use as a background for the widget.
      • Open Images in New Tab - Choose whether or not to open the image in a new tab when clicked on.
      • Images Per Row - Select from 2-6 images that you want to have on an single row.
      • Images Should Have Padding - Choose whether or not to insert padding between the images.
      • Optimize Image Layout - This option will take your Instagram pictures that have random ratios and find the best match to showcase them in your web page while keeping the same picture ratio and not adding any white spaces. For this option to work, you'll need to set the resolution of your images below to Original Image Size.
      • Limit - Set the maximum number of images to be added.
    • Resolution - Size of the images displayed. The available options are:
      • 150x150.
      • 240x240.
      • 320x320.
      • 480x480.
      • 640x640.
      • Original Image Size. Works in conjunction with the Optimize Image Layout option.
    • Feed Type - You can choose between User and Tag.
    • User Name - User Name of the user whose images you want to use.
    • Tag Name - Images tagged with the tag you set here will be displayed on your feed.
    weltpixel
    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 extension takes the mini cart to a whole new level. The modern responsive design combined with conversion oriented features offer 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.

    You can also advertise your attractive Free Shipping options to increase order values by using dynamic Custom Messages to get users excited about spending more in order to benefit from Free Shipping. A message can be displayed before the minimum order value for Free Shipping is met, and a different message afterward.

    Features of the Extension.

    • Improve the shopping experience by reducing the number of steps necessary for checkout.
    • Advertise your Free Shipping based on Free Shipping configured in Sales -> Shipping Methods properly by adding dynamic Custom Messages in the Quick Cart and Shopping Cart.
    • Advertise your Free Shipping based on Cart Price Rules configured with the Free Shipping Condition properly by adding dynamic Custom Messages in the Quick Cart and Shopping Cart.
    • Open the Quick Cart automatically after a product is added so the customer can easily manage their cart, both on desktop and mobile.
    • 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 item is added or removed - [ Yes / No ] Opens the Quick Cart each time an item is added to the cart
      • Open minicart on Mobile/Desktop - [ Desktop / Mobile / Both ] Choose on which devices to automatically open the minicart after an item is added
    • 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

    Add a Custom Message to your Quick Cart.

    • Go to Admin > WeltPixel > Quick Cart > Quick Cart Settings > Quick Cart Custom Message
      • Enable - [ Yes / No ] Enable/Disable Custom Message.
      • Custom Message - Set the Custom Message you want to be displayed. The {amount_needed} custom variable can be used if the Free Shipping Integration is used. It will return the needed amount for Free Shipping.
      • Free Shipping Integration - [ Yes / No ] Choose whether or not you want to display a Custom Message for Free Shipping.
      • Message for Free Shipping - Insert a Custom Message which is displayed when the free shipping can be applied, based on the Minimum Order Amount value set in the Free Shipping settings.
      • Message Text Color - Choose the text color for your Custom Message.
      • Message Text Font Size - Set the font size [in px]. E.g. 16px.
      • Custom CSS - Add Custom CSS to the message you set.

    Add a Custom Message to your Shopping Cart.

    • Go to Admin > WeltPixel > Quick Cart > Quick Cart Settings > Shopping Cart Custom Message
      • Enable - [ Yes / No ] Enable/Disable Custom Message.
      • Custom Message - Set the Custom Message you want to be displayed. The {amount_needed} custom variable can be used if the Free Shipping Integration is used. It will return the needed amount for Free Shipping.
      • Free Shipping Integration - [ Yes / No ] Choose whether or not you want to display a Custom Message for Free Shipping.
      • Message for Free Shipping - Insert a Custom Message which is displayed when the free shipping can be applied, based on the Minimum Order Amount value set in the Free Shipping settings.
      • Message Text Color - Choose the text color for your Custom Message.
      • Message Text Font Size - Set the font size [in px]. E.g. 16px.
      • Custom CSS - Add Custom CSS to the message you set.
    weltpixel
    weltpixel

    Shopping Cart Content Design.

    • Go to Admin > WeltPixel > Quick Cart > Quick Cart Settings > Shopping Cart Content Design
      • Quantity Button Type - Choose between the plus-minus, arrows or input designs.
      • Enable Custom CMS Block - Enable the possibility of displaying a Custom CMS Block in the Quick Cart.
      • Pick Custom CMS Block - Choose the block you'd like displayed in the Quick Cart.

    How does the Free Shipping Integration work?

    With the Free Shipping Integration, you have the option of displaying a second Custom Message which shows only when the required cart subtotal for the user to benefit from Free Shipping is met. The integration works with the standard Magento Free Shipping, as well as with Free Shipping from UPS, USPS, FedEx and DHL. The integration also works with Cart Price Rules which are based on Subtotals, and which apply the Free Shipping Action.

    By using the {amount_needed} variable in the first message, you can turn it into a dynamic one, which will display the amount required for the customer to add to the cart in order to benefit from the Free Shipping set under the standard Magento Free Shipping or Free Shipping from UPS/USPS/FedEx/DHL. The {amount_needed} does not work with Cart Price Rules.

    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 Magento default reviews without product page layout restrictions
    • Display Product Reviews in a carousel (Requires the Magento 2 Owl Carousel and Banner Slider extension)
    • 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
    div class="section clearfix white">
    weltpixel

    Displaying the Reviews Widget as a Carousel

    Note! This functionality requires the Magento 2 Owl Carousel and Banner Slider extension. Please note that Submit Review form will be disabled when Reviews are showcased in a carousel.

    • To display the Product Reviews in a carousel, when inserting the widget into your page, simply set the Show Product Reviews in a Carousel option to Yes.
    weltpixel

    Mega menu for Magento 2

    Add CMS blocks for each category individually. weltpixel

    Full control over CMS Block position. weltpixel

    Multiple Menu layouts available. weltpixel

    Custom Links Options. weltpixel

    Mobile Menu Breakpoint. weltpixel

    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.

    One click add custom content to Mega Menu

    Mega Menu allows merchants to add custom CMS blocks or HTML content individually for each category sub-menu position Top, Bottom, Left or Right. You will be able to showcase new products, promotions, carousels, etc..



    --> Click for Magento 2 Mega Menu Extension frontend DEMO

    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
    • Configurable subcategory distribution in each column
    • Custom font colors for any category or subcategory
    • Add Blocks or HTML content in Mega Menu Level 1 category - Top / Left / Right / Bottom CMS block
    • Create Block or HTML content-only Level 1 categories (no need for subcategories) to showcase products, promotions or other content
    • Add custom Labels to the Mega Menu to showcase promos and discounts for specific categories
    • Fully customizable with improved design options for elements such as Backgroud Color, Font Size, Hover Color, Hover Effect, Text Transform and Paddings
    • Background Overlay allows for bringing the Menu into focus
    • Color Contunuity for Level 1 Categories allows Menu Items to inherit dropdown background color for better design integration
    • Link categories, CMS pages, external URLs
    • Open menu links in new tab
    • Disable menu links
    • Control visibility for mobile Link "ALL [category name]" at category level.
    • 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. Select Category

    • Go to WeltPixel > Mega Menu Settings
    • Mega Menu settings are specific to each level 1 category individually, allowing grandular control over the menu design and functionality based on each category.
    weltpixel
    weltpixel

    Step 2. Configure 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 in submenu for each level 1 category
      • Width of the submenu columns, allowed value is auto (E.g. "auto"). Note: please take into consideration the left or right blocks because these blocks will generate one extra column each.
    • Top / Right / Bottom / Left Block [CMS Block / Custom HTML] - You can show extra content in your mega menu specific to each level 1 category. Choose to display CMS blocks or HTML content, and select the location where the content to be displayed in the sub-menu. You can show multiple blocks for the same category if necessary.
    • Hide Mobile link "ALL [Category Name]" - on mobile there is an additional link added under each level 1 category that allows accessing the category from mobile devices. If your catalog structure is of such nature that you don't need access to the level 1 category from mobile devices, you can hide this link on mobile devices. This option alows granular control for each level 1 category.
    • Font Color - Set the Font Color for this Category.
    • Font Hover Color - Set the Font Color for this Category upon mouse hover.
    • Enable Images and Alignment for subcategories - [Yes / No] - If Enabled, you can upload and display images for subcategories. Also, you can apply a custom alignment for Category Names. Category images and name alignment are available only for Desktop.
    • Mega Menu Image Width - Set image width in px. For example, insert 150 for the image to be displayed as 150px width.
    • Mega Menu Image Height - Set image height in px. For example, insert 150 for the image to be displayed as 150px height.
    • Category Name Aligment - Select the aligment for the name of the subcategory displayed in the navigation.
    • Mega Menu Label Text - Input the text for the Mega Menu label.
    • Mega Menu Label Font Color - Input the text color for the Mega Menu label.
    • Mega Menu Label Background Color - Input the background color for the Mega Menu label.
    • Mega Menu Label Position - Select the position for the Mega Menu label.

    Step 3. Category Links

    Go to Products > Categories (any level) > WeltPixel Options
    • Link - if necessary you can set a custom link for any category in the menu, including external links.
    • Open in new tab - opens the custom link/category page in new tab
    Note:

    If you are using the option to add custom links in the Mega Menu we recommend to also use Google XML Sitemap Extension and exclude categories from sitemap that are only used for menu links and are not real categories. Applicability: You may want to add a category that links to an external website, directly to a product page, etc..

    weltpixel
    weltpixel

    Step 4 - Mobile Menu Breakpoint and other design options

    • Go to WeltPixel > Mega Menu Settings > General Settings
    • Mobile Menu Breakpoint - Insert the breakpoint when navigation menu changes to mobile look and behavior (value in pixels). Ex. 1050.

      • Note on applicability:

      Case 1: You may need the mobile menu to kick in at a higher resolution than default magento 768px. There are mobile devices and small laptops with resolution between 800-1200px where your desktop menu may look crowded on small devices. By setting a higher breakpoint for mobile menu you will be able cover this cases elegantly.

      Case 2: Some website designs use mobile menu for both mobile and desktop. You will be able to achieve this easily by setting a breakpoint that will never be reached by your users ex 8000[px], so mobile menu will show permanently.

    • For other Design Settings, go to WeltPixel > Mega Menu Settings > Design Settings
    • Enable - [Yes / No] - Enable to be able to set specific Design Options for the Mega Menu.
    • Mega Menu Background Color - Select a Custom Background color for the Mega Menu.
    • Mega Menu Font Color - Select a custom font color for Mega Menu items.
    • Enable Advanced Hover Options [Yes / No] - Set Yes to be able to configure Advanced Hover Options.
    • Mega Menu Font Color on Hover - Select the font color on hover for Mega Menu items.
    • Mega Menu Hover Effect - Choose the animation effect for the Mega Menu underline when hovering over menu items.
    • Mega Menu with color continuity - Select Yes for First Level Menu Items to get the same background color as the Mega Menu.
    • MegaMenu-Page Overlay - Enable overlay on the page background to bring the Mega Menu into focus.
    • Mega Menu Font Text-Transform - Select the Text-Transform for all items included in the Mega Menu.
    • Font Size Level 0 - Set the font size for Navigation / Menu Level 0. Example: 20px
    • Font Size Level 1 - Set the font size for Navigation / Menu Level 1. Example: 20px
    • Font Size Level 2 - Set the font size for Navigation / Menu Level 2. Example: 20px
    • Mega Menu Items Padding - Insert Padding for Mega Menu Items. Example: 5px 10px 5px 10px
    • Mega Menu Level 0 Items Padding - Insert left right padding for Mega Menu Items. Example: 10px
    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 store-views.

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

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

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

    Features of the Extension.

    • Allows to easy create a Multi-Brand store and show the brands on all stores with the possibility to surf between the store-views.
    • Create store-views for different languages on the same Magento 2 installation, and display the language flags in order to change the language.
    • Multiple admin options for enhanced control and design.
    • Mobile responsive.
    • Easy installation.
    • Quality code.
    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 desktop 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. This option is for desktop.
    • Set Set the storeview switcher as dropdown desktop Select Yes, in order to display the Store switcher as a dropdown.
    • Set Display in frontend desktop Select what information to displayed. Store Name only, Flag only, Flag and Store name.
    • Set Display in one row mobile 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. This option is for mobile.
    • Set Display in frontend mobile Select what information to displayed. Store Name only, Flag only, Flag and Store name.
    • 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.