weltpixel

Pearl Theme for Magento2.

Version 1.3.4 - May 12, 2017

User Guide.

THEME FILES.

The theme includes the following files:

  • Theme files
  • Documentation
  • Licensing
  • Theme sample data

Separate Design Package

The theme comes with its own design package as you can see in the folder structure:

  • app/code/design/Pearl/weltpixel
  • pub/media

Design Package advantages:

  • We highly recommend to use the same folder structure to implement a theme into Magento to avoid any error
  • Updating your theme will not affect custom template changes

Quick Installation.

Before installing Pearl Theme on a Magento Store please check the theme compatibility. Pearl is currently compatible with the following Magento CE & EE versions:

  • 2.0.X
  • 2.1.0
  • 2.1.1
  • 2.1.2
  • 2.1.3
  • 2.1.4
  • 2.1.5
  • 2.1.6

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

Installing on a pre-existing Magento Store:

Step 1:

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

Step 2.

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

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


Go to Step 3, below a. and b. instructions apply only if Pearl Theme was purchased from Magento Marketplace:

a. Please refeer to this article on additional information on how to download theme files and dependancy packs from Magento Marketplace.

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

c. Download the 5 step GUI Pearl Theme installer from here, unzip the content and copy it in the root of your Magento installation.

Step 3.

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

Step 4.

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

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

Customize Theme (optional)

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

weltpixel

CUSTOM CSS & JS.

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

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

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

Custom CSS and JS for category pages.

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

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

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

Custom CSS and JS - static pages

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

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

weltpixel
weltpixel

Custom CSS & JS - static blocks.

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

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

Complex Customizations

Pearl Child Theme Included is already in the package

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

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

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

TRANSLATE PEARL THEME.

You can translate Pearl Theme by following next steps:

  • 1. Go to app/design/frontend/Pearl/weltpixel/i18n . If 'i18n' folder is missing, create it manually.
  • 2. Go to the root of your magento installation ('yourmgentoinstall.com/html') and run below command to export all theme translations.
    php bin/magento i18n:collect-phrases --output="app/design/frontend/Pearl/weltpixel/i18n/en_US.csv" -m
                                  
  • 3. Find the new generated translation .csv file in app/design/frontend/Pearl/weltpixel/i18n/en_US.csv .
  • 4. 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.
  • 5. 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"
  • 6.a. For frontend translations make sure you have set your locale in Stores -> Configuration -> General -> Locale Options -> Locale -> Select your language
  • 6.b. For backend translations make sure you have set your users Interface Locale in Account Settings -> Account Information -> Interface Locale -> Select your language
  • 7. Refresh all Magento caches and check results

TRANSLATE MODULES.

You can translate a WeltPixel module by following next steps:

  • 1. Go to app/code/WeltPixel/ModuleYouWantToTranslate/i18n . If 'i18n' folder is missing, create it manually.
  • 2. Go to the root of your magento installation ('yourmgentoinstall.com/html') and run below command to export extension translations.
    php bin/magento i18n:collect-phrases --output="app/code/WeltPixel/ModuleYouWantToTranslate/i18n/en_US.csv" app/code/WeltPixel/ModuleYouWantToTranslate
                                  
  • 3. Find the new generated translation .csv file in app/code/WeltPixel/ModuleYouWantToTranslate/i18n/en_US.csv.
  • 4. 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.
  • 5. 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"
  • 6.a. For frontend translations make sure you have set your locale in Stores -> Configuration -> General -> Locale Options -> Locale -> Select your language
  • 6.b. For backend translations make sure you have set your users Interface Locale in Account Settings -> Account Information -> Interface Locale -> Select your language
  • 7. Refresh all Magento caches and check results
weltpixel

Frontend Options.

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

Breakpoints.

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

Section width

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

  • Page Main: set the width of the main page [in px]
  • Footer: set the width of the footer [in px]
  • Row: set the width of row [in px]
  • Default Page: set width of the default page set [in px]
  • Cms Page: set width of the CMS pages [in px]
  • Category Page: set width of the category page [in px]
  • Product Pageset width of product page [in px]

Main Options

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

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

Headings H1 up to H6 and Paragraphs.

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

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

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

weltpixel

Default Buttons.

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

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

Primary Buttons.

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

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

Ratings

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

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

Form inputs.

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

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

Custom Header

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

Header Version 1

Header Version 2

weltpixel
weltpixel

Header Version 3

Header Version 4

weltpixel
weltpixel

General Settings.

Go to Weltpixel -> Custom Header -> General Settings and choose the type of header you like, and if the header should always remain on top or not:

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

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

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

Middle Header.

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

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

Search Options

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

  • Field Width: set the width of the search field [in px]
  • Field Height: set the height of the search field [in px]
  • Field Border Width: set the border width for Top/Right/Bottom/Left
  • Field Border Style: set border style of the search bar
  • Field Border Color: set border color for the search
  • Font size: set font size for text in search [in px]
  • Field Background color: set background color of the field in search
  • Font color: set font color for the text in search
weltpixel
weltpixel

Header Navigation.

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

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

DESIGN ELEMENTS.

In this area you can enable or disable the design elements used in the theme.

General.

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

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

Category Page.

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

General Options.

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

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

Item Options.

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

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

Item Image Options.

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

  • Grid View Image Width (In Px): set image width in Grid View [ in px ]
  • Grid View Image Height (In Px): set image height in Grid View [ in px ]
  • List View Image Width (In Px): set image width in List View [ in px ]
  • List View Image Height (In Px): set image height in List View [ in px ]
weltpixel
weltpixel

Item Name Options.

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

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

Item Review Options.

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

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

Item Price Options.

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

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

Item Swatch Options.

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

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

Toolbar.

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

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

Layered Navigation Swatch Options.

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

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

Product page.

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

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

You can choose between 4 demo product pages we already created.

Product Page Version 1

weltpixel
weltpixel

Product Page Version 2

Product Page Version 3.

weltpixel
weltpixel

Product Page Version 4.

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

General Options.

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

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

  • Image area width: set width for image section [ in % ], for example you can set it to 60% of the width of the website
  • Product info area width: set width for product info area [ in %], for example you can set it to 40% of the width of the website
  • Move Description and Tabs under info area: [ Yes / No ] move description tab, more information tab and reviews tab on right section
  • Remove wishlist: [ Yes / No ] remove wishlist button from the product page
  • Remove compare: [ Yes / No ] remove compare button from the product page
  • Remove email: [ Yes / No ] remove email button from the product page
  • Remove qty box: [ Yes / No ] remove quantity box from the product page
  • Remove sku: [ Yes / No ] remove sku info from the product page
  • Remove stock availability: Remove stock availability Remove stock availability Remove stock availability
  • Remove Breadcrumbs: [ Yes / No ] remove breadcrumbs from the product page
  • Remove Tabs Border: [ Yes / No ] remove tabs border on the product page
  • Information Layout on Desktop: select tabs layout type [ Tab / Accordion / List ]
  • Quantity Input Type: choose input type for quantity field [ Default input / Dropdown ]
  • Quantity Dropdown Max Value: set max value for quantity field when is set in dropdown [ value, ex: 10 ]
  • Display Swatch Tooltip: [ Yes / No ] display tooltip on hover over swatch on product page
Note: The sum of Image area width and Product info area width, should not exceed 100%. This settings is applied only on desktop, on mobile devices the columns will automatically take advantage of the responsive design.
weltpixel
weltpixel

Images

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

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

Magnifier Options.

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

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

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

Swatch Options.

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

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

CSS Options.

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

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

CUSTOM CSS & JS.

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

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

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

Custom CSS and JS for category pages.

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

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

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

Custom CSS and JS - static pages

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

weltpixel
weltpixel

Custom CSS & JS - static blocks.

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

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

Widgets.

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

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

Icon Widget.

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

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

Heading Widget.

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

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

To insert an Heading Widget follow this steps:

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

Divider Widget.

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

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

To insert a Divider Widget follow this steps:

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

Brands Widget.

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

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

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

  • 1. Go to Content -> Blocks and click button Add New Block
  • 2. Fill in all necessary data for the new block
  • 3. In the Content area insert one by one the images, using Insert Image button
  • 4. Click Save Block
Note: You can make each image to be a link if you use the href tag. For example:
<a href="http://www.weltpixel.com"><img src="
{{media url="your-image"}}" alt="" /></a>

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

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

Brands with style Carousel, block example :

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

Toggles Widget.

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

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

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

Follow this steps to create a block with the content:

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

To insert a Toggle Widget follow this steps:

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

Accordions Widget.

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

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

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

Follow this steps to create a block with the content:

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

To insert a Accordions Widget follow this steps:

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

Accordion Block example 1:(except bootstrap accordion, for bootstrap example check example below)

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

Accordion Block example 2: (bootstrap accordion)

<div class="panel panel-default"> <div class="
panel-heading"><a href="#collapseOne" data-toggle="
collapse" data-parent="#accordion">
Collapsible Group Item #1 </a></div> <div id="collapseOne"
class="panel-collapse collapse in"> <div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of
them accusamus labore sustainable VHS.</div> </div> </div>

weltpixel

ADVANCE PRODUCT QUICK VIEW AND AJAX CART FOR MAGENTO2.

About Quick View and Ajax Cart for Magento 2.

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.

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. You can set visibility for each to the elements shown in quick view. Product zoom available on product page can also be enabled or disabled.

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, define no. of seconds after the quick view box is closed and so on.

weltpixel

Configure everything in less then 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
    • Remove product image [ Yes / No ] Show / Hide main product image
    • Remove product image thumb [ Yes / No ] Show / Hide thumbnails below main product picture
    • 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

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

GOOGLE ANALYTICS ENHANCED ECOMMERCE TAG MANAGER FOR MAGENTO2.

About Google Analytics For Magento 2.

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

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

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

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

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

Features of the Extension.

  • Track product impressions by position in the Category Page
  • Track product clicks by position in the Category Page
  • Track product impressions by position in the Search Result Page
  • Track product clicks by position in the Search Result Page
  • Track product impressions by position in the Related, Up-sell and Cross-sell section
  • Track product clicks by position in the Related, Up-sell and Cross-sell section
  • Track transactions by product variants (configurable product)
  • 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 internal promotion Impressions
  • Track internal promotion Clicks
  • Enable/Disable IP anonymization to be in compliance with EU countries
  • Track product refunds
  • Track Magento User ID
  • Track product review count
  • Track product review score
  • Track sales by product attributes (size and color)
  • Track user type (customer group)
  • Track stock status

Made for Web Merchandisers.

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

Web Merchandisers question:

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

The Solution:

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

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

Web Merchandisers question:

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

The Solution:

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

weltpixel
weltpixel

Web Merchandisers question:

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

The Solution:

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

Made for Ecommerce Manager.

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

Ecommerce Manager question:

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

The Solution:

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

weltpixel
weltpixel

Ecommerce Manager question:

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

The Solution:

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

Ecommerce Manager question:

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

The Solution:

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

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

weltpixel
weltpixel

Ecommerce Manager question:

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

The Solution:

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

Ecommerce Manager question:

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

The Solution:

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

weltpixel
weltpixel

Ecommerce Manager question:

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

The Solution:

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

Configure.

Step 1:

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

    Step 2:

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

    Step 3:

      • Once the account is created get the Google Tag Manager (GTM) scripts in admin section of your Magento 2 store WeltPixel > Google Analytics Enhanced Ecommerce > General Configuration.

        You need also to get the code for the "<body>" section.

    weltpixel
    weltpixel
    Note: If you already have a Google Tag Manager (GTM) account you can find the script in you Google Tag Manager account in Admin section, as seen in the screenshot.
    • Go to WeltPixel > Google Analytics Enhanced Ecommerce > General Configuration > Google Tag Manager Javascript Code and paste the code for "<head>" section in your magento store.
    • Then go to WeltPixel > Google Analytics Enhanced Ecommerce > General Configuration > Google Tag Manager Non-Js Code and paste the code for "<body>" section in your magento store.
    weltpixel
    weltpixel

    Step 4:

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

      Get information from Google Tag Manager and Google Analytics accounts.

    • a) Go to Google Tag Manager (GTM) Identify the IDs in your GTM account like in the picture.
    • b) Go to Google Analytics (GA) You can see how to get your Universal Analytics ID credentials from your Google Analytics account.

      Tracking code is available under GA account > Admin > Property settings > Tracking ID as you can see in the picture.

      After you click you will find the Tracking ID you need.

      Note: Once you fill in the above ID’s save the GA settings in order not to lose the credentials on page refresh.
    weltpixel
    weltpixel

    Step 5:

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

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

    Hit Save Config button.

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

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

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

    Step 6:

    • Woohoo, the extension is configured!

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

    General Configuration

    • Google Tag Manager Javascript Code Position [ In the head tag / Before body close tag ] - choose position where Javascript code to be inserted. Default: In the head tag.
    • Impression Chunks Size - allows you to break up the payload into smaller chunks. We recommend limiting it to 15. The analytics.js library refuses to send a hit if the full payload size is larger than 8192 bytes. This does require quite a lot of data to be stuffed within, but it only takes some dozens of product impressions to clog up the channel
    • Product identifier [ SKU / ID ] - you can identify products in GA and GTM either by SKU or by product ID from your Magento catalog
    • Enable Brand - if you would like to have each product brand tracked in Google Analytics Ecommerce Reports - select yes and use appropriate brand attribute
    • Order Success Page Total Calculation [ Subtotal / Grandtotal ] - Caculates total amount on success page based on Subtotal or Grandtotal
    weltpixel
    weltpixel

    General Configuration

    • Promotion Tracking [ Yes / No ] - Example of usage:
                       <a href="#" data-track-promo-id="PROMOID"
                          data-track-promo-name="PROMONAME"
                          data-track-promo-creative="PROMOCREATIVE"
                          data-track-promo-position="PROMOPOSITION">Content
                       </a>
                    
    • Exclude Tax From Transaction [ Yes / No ] - Exclude taxes amount from transaction
    • Exclude Shipping From Transaction [ Yes / No ] - Exclude shipping amount from transaction
    • Custom Dimension - Customer ID [ Yes / No ] - Use customer ID as a custom dimension
    • Custom Dimension - Customer Group [ Yes / No ] - Use customer group as a custom dimension
    • Custom Dimension - Stock Status (insctock/out of stock) [ Yes / No ] - Use customer dimension as a custom dimension

    GTM API Configuration

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

    Google Adwords conversion tracking

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

    Google AdWords Remarketing

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

    RICH SNIPPETS & CARDS (SCHEMA.ORG) FOR MAGENTO2.

    About RICH SNIPPETS & CARDS

    Boost online store SEO and attract more customers by adding Rich Snippets & Google Cards, Facebook OG, Twitter Cards and Pinterest Rich Pins

    Rich Snippets & Google Cards

    Rich Snippets are basically Structured Data which give a short summary of the product. Are designed to summarize the content of a web page in a way that makes it easier to search engines and social networking sites to understand what the page is about and be able to easily access that data.


    Rich Snippets can attract targeted users to the website pages as they enhance the search result when potential customers search for services and product categories. Rich snippets enable users’ Internet browsers to recognise very quickly what specific website they are looking for.


    Rich cards use scema.org structured markup to display your content, like rich snippets, but in a more attracting and visual way on mobile devices. Information is structured based on the schema agreement, this way Google knows what information to read and from where.


    Google will discover snippets the next time it crawls your site (although it may take some time for rich snippets to appear in search results). When Google algorithms discover technically correct markup on a page, they use a variety of signals to determine when to show rich snippets and cards.

    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 an image, a description, and allow you to highlight two other key details about your product.


    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.

    Configuration:

    Google Cards
    • Go to Admin -> WeltPixel -> Google Cards & Rich Snippets -> Google Cards General Settings and set your Google Cards:
      • Enable [ Yes / No ] Activate or deactivate the Google Cards feature
      • Description Choose between short description and long description
      • Brand Select attribute you want to feature on your product cards
    weltpixel
    weltpixel
    Google Rich Snippets
    • Go to Admin -> WeltPixel -> Google Cards & Rich Snippets -> Rich Snippets General Settings and set your Google Rich Snippets:
      • Enable [ Yes / No ] Activate or deactivate the Google Rich Snippets feature
      • Description Choose between short description and long description
      • Wrap with div Set Yes and the code will be wrapped in a div in order to prevent conflicts with other SEO extensions
    Twitter Cards Settings
    • Go to Admin -> WeltPixel -> Twitter Cards, Facebook Open Graph & Pinterest Rich Pins -> 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 -> Twitter Cards, Facebook Open Graph & Pinterest Rich Pins -> Facebook Open Graph Settings and set the Facebook Open Graph:
      • Enable [ Yes / No ] Activate or deactivate the Facebook Open Graph feature
      • Description Choose between short description and long description
      • Site name Insert Website’s name
    Pinterest Rich Pins Settings
    • Go to Admin -> WeltPixel -> Twitter Cards, Facebook Open Graph & Pinterest Rich Pins -> 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

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

      Based on Google policy this data will be shown in the search results. Stores using this data structure will be highly advantaged by search engines, like Google, Yahoo, Bing and other search engines.

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

      Based on Google policy this data will be shown in the search results. Stores using this data structure will be highly advantaged by search engines, like Google, Yahoo, Bing and other search engines.

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

    GOOGLE XML SITEMAP FOR MAGENTO 2

    About GOOGLE XML SITEMAP FOR MAGENTO 2.

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

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

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

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

    Include any links in your sitemaps:

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

    • Category pages;
    • Product pages;
    • CMS pages;
    • Custom URLs.
    Better sitemap reliability using advanced settings

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

    Features of the Extension.

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

    How to Configure.

    Step 1: Create your sitemap

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

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

    Step 2: Configure your sitemap

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

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

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

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

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

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

    Priority

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

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

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

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

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

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

    • a. Exclude from sitemap particular CMS Pages you do not want indexed in search engines
      • Go to Content -> Pages -> Edit Page -> WeltPixel Options -> Exclude from Sitemap -> Yes

        This option is useful when you want to exclude certain CMS Pages from sitemap. Ex: ‘404 Not Found Page’ makes no sense to be indexed by google, you do not want your customers there.

    • b. Exclude from sitemap particular Product Pages you do not want indexed in search engines
      • Go to Products -> Catalog -> Edit Product -> WeltPixel Options -> Exclude from Sitemap -> Yes

        This option is useful when you want to exclude certain Product Pages from sitemap. Ex: maybe you have a lookbook where your products can be purchased using a quick view functionality and you don’t want to sell the products individually on separate product pages, in this case you can exclude that particular product pages from sitemap indexation.

    weltpixel
    weltpixel
    • c. Exclude from sitemap particular Category Pages you do not want indexed in search engines
      • Go to Products -> Categories -> Select Category -> WeltPixel Options -> Exclude from Sitemap -> Yes

        This option is useful when you want to exclude certain Category Pages from sitemap. Ex: You may want to include in sitemap only level 2 categories and exclude level 1 categories in order for clients to land on a more segmented category.

    • d. Add custom URL to sitemap

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

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


      Go to WeltPixel -> Sitemap -> Add New Url

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

    SEO PAGE TITLE OVERWRITE FOR MAGENTO 2.

    About SEO PAGE TITLE OVERWRITE FOR MAGENTO 2.

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

    HOW TO USE THE EXTENSION.

    Change H1 Title on product pages

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

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

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

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

    weltpixel
    weltpixel

    Change H1 Title on category pages

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

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

    Features of the Extension.

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

    SMART PRODUCT TABS FOR MAGENTO 2.

    About SMART PRODUCT TABS FOR MAGENTO 2.

    Deliver excellent browsing experience for your customers by dynamically showing tab custom blocks 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 values using specific static blocks, without the need to touch any code.

    Default Magento doesn't give you proper control over your product tabs and their content, making product page content customisation extremely limited. Smart Product Tabs allows you to configure new tabs content based on the value of any attribute. You can create tabs directly in 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 of type dropdown, or you can create a new dropdown attribute in Admin Store >Attributes > Products and add you options.

    weltpixel
    weltpixel

    STEP 2

    • Go to Admin > WeltPixel > Smart Products tab menu, activate the extension and set your tabs. You can insert up to 3 new tabs to be displayed in the product page. From this settings area you should choose based on which attributes you wish to deliver relevant content to customers and you can set displayed name for each tab.

    STEP 3

    • 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

      ( Smart block name example : ‘smartproducttabs_color_blue’ or ‘smartproducttabs_material_cotton’)

      Replace attributecode_here with your attribute code, and attribute-option-here with option of the attribute. Do not replace ‘smartproducttabs_’ prefix and insert underscore between the prefix, the attribute and the attribute option. If an option has words separated by spaces, replace the spaces with - (minus) sign.

    weltpixel
    weltpixel

    Step 4

    • Go to Admin > Products > Catalog and and make sure you have set up correctly the attribute options for your products or set the options for new created attributes. For each option setup you must have a block created as specified in step 3.

    Step 5

    • Go to your store frontend and check the results.

    weltpixel
    weltpixel

    INSTAGRAM WIDGET ADVANCED for Magento 2

    About Instagram Widget Advanced For Magento 2.

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

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

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

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

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

    Features of the Extension.

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

    HOW TO USE THE EXTENSION.

    Step 1:

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

    Step 2:

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

    Step 3:

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

    Step 3:

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

    STEP 5

    • Paste the following url into your web browser.

      https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]
      &redirect_uri=http://localhost&response_type=token&scope=public_content
                  

      Add the client id you generated to the url replacing [CLIENT_ID_HERE] Hit enter, and you will connect to Instagram’s servers.

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

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

      Do not share your access token with anyone.

    weltpixel
    weltpixel

    STEP 6

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

    STEP 7

    • Find your user ID:

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

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

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

    weltpixel
    weltpixel

    STEP 8

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

    STEP 9

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

    weltpixel
    weltpixel

    STEP 10

    • Instagram Widget Advanced is a simple way to add Instagram photos to your site. Setting up Instagram Widget Advanced for Magento 2 is quite easy.

      • Instagram Client Id - Instagram Client Id
      • Instagram Access Token A valid oAuth token. Can be use in place of a client Id
      • Title Insert a title for widget
      • Description Insert a short description
      • Container Background Color Select the color that you want to use as a background on the widget
      • Images Per Row Select from 2-6 images that you want to be on a row
      • Limit Maximum number of images you want to add
      • Sort By Sort the images in a sort order. Available options are:
        • Non(as they come from Instagram)
        • Most recent
        • Least Recent
        • Most Liked
        • Least Liked
        • Most commented
        • Least commented
        • Random
      • Resolution Size of the images to get. Available options are:
        • Thumbnail (150x150)
        • Low Resolution (306x306)
        • Standard Resolution (612x612
      • Select your feed type:

        • Feed type User Enter *User ID* received at step 7
        • Feed type Tagged Enter a specific *Tag name* , pictures with that tag will be shown
        • Feed type Location Enter *Location ID* (not name), search on google how Instagram assigns location id to pictures.
    weltpixel

    Full Page Scroll for Magento 2.

    About Full Page Scroll for Magento 2.

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

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

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

    Features of the Extension.

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

    HOW TO USE THE EXTENSION.

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

    2 Insert in the code below in the CMS page:

    {{block class="WeltPixel\FullPageScroll\Block\FullPageScroll" name="fullpagescroll"
    template="WeltPixel_FullPageScroll::fullpagescroll.phtml"}}
              
    weltpixel
    weltpixel
    • 3. Go to Content > Blocks > Add New Block
    • 4. Each section has to be created as CMS block and block name should respect the following format:

      fullpagescroll_cmspageurlkey_sectionorder

    • 5. The page identifier(cmspageurlkey) that you need when creating CMS blocks can be found in Page Description -> Search Engine Optimisation Tab -> URL Key. Page Url key is created automatically based on Page Title. Using this url key you associate the blocks to the page.

      Note1: Identifiers, page url, section name are case sensitive. In case the blocks do not show up in the page, make sure to verify this first.

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

      fullpagescroll_home_storeviewcode_sectionorder

    • 6. All the blocks are ordered by section order, alphabetic or by numbers.

      For example: Summer1; Summer2; Summer3; Summer4 are ordered by numbers. Spring; Summer; Autumn; Winter will be alphabetically ordered: Autumn; Spring; Summer; Winter.

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

    QUICK CART FOR MAGENTO2.

    About Quick Cart for Magento 2.

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

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

    Features of the Extension.

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

    Configure Quick Cart on your store in just 1 minute.

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

    CMS PRODUCT REVIEWS WIDGET for Magento 2

    About CMS Product Reviews Widget For Magento 2.

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

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

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

    Features of the Extension.

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

    HOW TO USE THE EXTENSION.

    Step 1:

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

    Step 2

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

    Step 3:

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

    ADVANCED SSH Installation.

    Before installing Pearl Theme on a Magento Store please check the theme compatibility. Pearl is currently compatible with the following Magento CE & EE versions:

    • 2.0.X
    • 2.1.0
    • 2.1.1
    • 2.1.2
    • 2.1.3
    • 2.1.4
    • 2.1.5
    • 2.1.6

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

    Installing on a pre-existing Magento Store:

    Step 1:

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

    Step 2.

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

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


    Go to Step 3, below a. and b. instructions apply only if Pearl Theme was purchased from Magento Marketplace:

    a. Please refeer to this article on additional information on how to download theme files and dependancy packs from Magento Marketplace.

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

    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
    
    # b. enable WeltPixel Theme modules (Start with Weltpixel_Backend)
    php bin/magento module:enable WeltPixel_Backend --clear-static-content
    
    php bin/magento module:enable WeltPixel_FrontendOptions --clear-static-content
    php bin/magento module:enable WeltPixel_DesignElements --clear-static-content
    php bin/magento module:enable WeltPixel_CustomHeader --clear-static-content
    php bin/magento module:enable WeltPixel_CustomFooter --clear-static-content
    php bin/magento module:enable WeltPixel_NavigationLinks --clear-static-content
    php bin/magento module:enable WeltPixel_ProductPage --clear-static-content
    php bin/magento module:enable WeltPixel_CategoryPage --clear-static-content
    php bin/magento module:enable WeltPixel_Command --clear-static-content
    
    php bin/magento module:enable WeltPixel_OwlCarouselSlider --clear-static-content
    php bin/magento module:enable WeltPixel_Quickview --clear-static-content
    php bin/magento module:enable WeltPixel_GoogleCards --clear-static-content
    php bin/magento module:enable WeltPixel_TitleRewrite --clear-static-content
    php bin/magento module:enable WeltPixel_SmartProductTabs --clear-static-content
    php bin/magento module:enable WeltPixel_MobileDetect --clear-static-content
    php bin/magento module:enable WeltPixel_InstagramWidget --clear-static-content
    php bin/magento module:enable WeltPixel_FullPageScroll --clear-static-content
    php bin/magento module:enable WeltPixel_GoogleTagManager --clear-static-content
    php bin/magento module:enable WeltPixel_Sitemap --clear-static-content
    php bin/magento module:enable WeltPixel_QuickCart --clear-static-content
    
    
    # c. Following command needed only for Pearl Theme sample data installation, otherwise can be skipped
    php bin/magento module:enable WeltPixel_SampleData --clear-static-content
    
    
    # d. clear cache
    php bin/magento cache:flush
    
    
    # e. run magento upgrade scripts
    php bin/magento setup:upgrade
    
    
    # f. generate static content
    rm -rf pub/static/_requirejs
    rm -rf var/view_preprocessed
    
    #g. Theme Sample Settings Import, depending on required demo store homepage / settings, use different demo version 'v2', 'v3', ...
    #   Run below commands even if you do not use a Pearl sample homepage, in below order:
    
    php bin/magento weltpixel:import:demo --store=GLOBAL --demoVersion=v1
    php bin/magento weltpixel:theme:configurator --store=GLOBAL --homePage=v1 --header=v1 --categoryPage=3columns --productPage=v1 --footer=v3
    php bin/magento weltpixel:cleanup
    php bin/magento weltpixel:less:generate
    php bin/magento ca:cl
    

    Theme layout Pre-configuration via SSH

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

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

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

  • [--homePage[="..."]] = v1, v2, v3, v4, v5, v6, v7, v8, v9
  • [--header[="..."]] = v1, v2, v3, v4
  • [--categoryPage[="..."]] = 2columns, 3columns, 4columns, 5columns
  • [--productPage[="..."]] = v1, v2, v3, v4
  • [--footer[="..."]] = v1, v2, v3, v4
  • [--store="..."] = default, GLOBAL
  • [--demoVersion] = v1, v2, v3, v4, v5, v6, v7, v8, v9
  • When changing between sample home pages make sure to run corresponding import options as each homepage comes with predefined theme settings.

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

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

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

    Step 4.

    Enable the theme

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

    Step 5.

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

    Troubleshooting.

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

      Step 1. Make sure your Magento store is in Developer Mode or some of your settings may not apply.

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

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

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




    weltpixel

    Pearl Change Log.

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

      New Features:
    • Introduced 7 step GUI Pearl Theme installer - 1 minute installation, no SSH required
    • Added New CMS Product Reviews Widget Extension - now you can add product reviews to any page, not just product page.
    • Added translations files for all theme modules and included extensions
    • Fixes:
    • Fixed related and cross sell hover border not applied correctly
    • Fixed dynamic items display on resize
    • Design adjustments for category page item hover
    • Design adjustments for hover action buttons after resize
    • Layout design adjustments for 1 column layered navigation
    • Fixed review overflow margin on list view
    • Fixed header navigation section overlapping quick cart in some cases
    • Fixed currency switcher style in top header
    • Fixed XXS breakpoint to apply custom CSS styles from Magento admin
    • Fixed x-index of review stars
    • Fixed native bug of OWL carousel, prev / next buttons visibility control on breakpoints
    • Removing Banner store view selector, not relevant as banner is not configurable per store view.
    • Fixed Banner Slider hardcoded date format, date now working in all international formats
    • Fixed Quick Cart button for first item remove from cart, rearrange bottom quick cart buttons
    • Added possibility to translate quick view popup messages


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

      New Features:
    • Added New Quick Cart Extension - now you can choose between default Magento Quick Cart and the awesome Pearl Quick Cart design.
    • Added possibility to control Pearl logo width / height using Magento default logo settings.
    • Added theme layout configurator via SSH.
    • Google Tag Manager - new admin option to add GTM code in head / body section.
    • Fixes:
    • Google Tag Manager - Changing the trigers and tags for multiple page view analytics issue.
    • Fixed OWL carousel loading issues, some times when images were too big slider was not loading properly.
    • Fixed button border hover color and button color on mobile devices.
    • Fixed title width issue on desktop.
    • Fixed category page last element footer overlap.
    • Fixed category page listing scroll issue when width 100%.
    • Fixed tabs feature, sometimes tab feature was not changing tabs properly.
    • Pearl Theme documentation improvements


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

      New Features:
    • Added Footer and PreFooter selector in admin options.
    • Added possibility to import settings globally not only on store view in order to avoid user confusion when changing admin settings globally. Predefined sample settings to import globally on theme installation.
    • Added built in Child Theme and instructions how to customize Pearl Theme in order to be update proof.
    • Added additional instructions in admin in order to avoid ‘settings not applied in front-end’ situations.
    • Rich Snippets - new Twitter cards admin options: Summary Card, Summary Card with Large Image.
    • Sample data:
    • Added Home Page V5 to sample data
    • Added two sample footer blocks to sample data
    • Fixes:
    • Fixed transparency issue - slides now visible on Safari browser, OWL Banner Slider
    • Fixed widgets add to cart button, same font and styling as on listing pages.
    • Fixed size issue for header V1 logo on desktop devices
    • JS, CSS, breakpoint fixes for mobile v2 header, links properly display now
    • Fixed visibility for Product Page admin options not available for Product Page V2 and V4.
    • Pearl Theme documentation improvements


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

      New Features:
    • Google Analytics - added integration with Google Adwords and Google Adwords Remarketing as well as API variables creation.
    • Google Analytics - added integration with OWL Carousel and Slider - this feature will allow you to track Banner Click-Through-Rate (CTR) and revenue generated by the banner.
    • Google Analytics - added option to calculate total order
    • OWL Carousel - added control of Dots visibility for product carousels per each configured breakpoint
    • Added translations for Pearl Theme as well as for all WeltPixel extensions included with Pearl theme.
    • Sample data:
    • Added possibility to import sample settings from any Pearl demo store in order to easily replicate each demo.
    • Added sample home pages v6, v7, v9, corresponding sample sliders and made adjustments for sample homepage v2
    • Added multiple sample pages with Pearl: alert boxes, buttons, columns and grid, multiple icons list, size chart, testimonials.
    • Fixes:
    • Theme styling adjustments, header fixes.
    • OWL Carousel - recently viewed products colecion fix for product carousel
    • OWL Carousel - not rendering head title html if no title set in backend
    • OWL Carousel - fixed for mobile navigation icons
    • OWL Carousel - fixed prev / next navigation out of screen
    • OWL Carousel - fixed carousel product picture padding when used in CMS pages
    • Google Analytics - namespace adjustments and fixing small coding standards issues
    • Google Analytics - success page product SKU fix
    • Full Page Scroll - section notice fix, menu issues as well as mobile version fixes.
    • Quick View - changing image position, fix for bundled products not sowing up ok in quick view.
    • Google XML sitemap - fixed table prefix error
    • WeltPixel Dashboard - structured theme modules and additional extensions included with the theme, added documentation section


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

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


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

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


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

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


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

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


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

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


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

    • Added admin notification functionality
    • Color picker fix
    • Composer versions dependency update


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

    • Theme compatibility adjustments with Magento 2.1
    • Small frontend fixes


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

    • Small frontend fixes


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

    • Initial release