welcome to pearl responsive theme for …welcome to pearl responsive theme for magento 2 version...

WELCOME TO

PEARL RESPONSIVE THEME for Magento 2

Version 1.2.2 December 22, 2016

Custom Magento Solutions | Contact Support

http://www.weltpixel.com/

mailto:[email protected]

WELCOME TO

Pearl Theme for Magento 2

TABLE OF CONTENTS

THEME FILES

INSTALLATION

FRONTEND OPTIONS Breakpoints Section width Main options Headings H1 up to H6 and Paragraphs Links Default Buttons Primary Buttons Ratings Form inputs Dropdown Breadcrumbs

CUSTOM HEADER Header Version 1 Header Version 2 Header Version 3 Header Version 4 General Settings Middle Header Search Options Header Navigation

DESIGN ELEMENTS General

CATEGORY PAGE General




Item Options Item Image Options Item Name Options Item Review Options Item Price Options Item Swatch Options Toolbar Layered Navigation Swatch Options Custom Link option

PRODUCT PAGE General Images Gallery Gallery Fullscreen Magnifier Options Swatch Options CSS Options

CUSTOM CSS AND CUSTOM JS Custom CSS and JS for category pages Custom CSS and JS for static pages Custom CSS and JS for static blocks

WIDGETS Icon Widget Heading Widget Divider Widget Brands Widget Toggles Widget Accordions Widget

GOOGLE RICH SNIPPETS, TWITTER CARDS, FACEBOOK OPEN GRAPH & PINTEREST RICH PINS Google Cards Google Rich Snippets Twitter Cards Settings Facebook Open Graph Settings Pinterest Rich Pins Settings HOW IT WORKS Google Cards & Rich Snippets Twitter Cards Facebook Open Graph




Pinterest Rich Pins

RESPONSIVE BANNER SLIDER AND OWL CAROUSEL Products Sliders Custom Sliders Insert Created Sliders in Pages

ADVANCE PRODUCT QUICK VIEW AND AJAX CART Settings General

SMART PRODUCT TABS

SEO PAGE TITLE OVERWRITE

FULL PAGE SCROLL

INSTAGRAM WIDGET ADVANCED

CHANGE LOG

CONTACT SUPPORT




THEME FILES

The theme includes the following files:

- Theme files

- Documentation

- Licensing

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




INSTALLATION Before installing Pearl Theme on a Magento Store please check the theme compatibility. Pearl is currently

compatible with the following Magento versions:

2.0.x,

2.1.0

2.1.1

2.1.2

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:

Step1.

Disable Magento Cache from System -> Cache Management -> Select All and hit disable and refresh all caches. This

step is required even if cache is disabled.




Step 2.

Upload the content from Theme Files 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!

If you want to install sample data, make sure that sample images are included in your package, in

“pub/media/wysiwyg” and “pub/media/weltpixel”. If not present and you , theme sample images can be

downloaded from here: www.weltpixel.com/resources/PearlSampleData.zip and add it also in your magento root

installation.

Step 3.

Run the following commands: # enable WeltPixel Theme modules

php bin/magento module:enable WeltPixel_Backend WeltPixel_NavigationLinks WeltPixel_OwlCarouselSlider

WeltPixel_Quickview WeltPixel_ProductPage WeltPixel_FrontendOptions WeltPixel_DesignElements

WeltPixel_CustomHeader WeltPixel_CategoryPage WeltPixel_GoogleCards WeltPixel_TitleRewrite

WeltPixel_SmartProductTabs WeltPixel_MobileDetect WeltPixel_InstagramWidget WeltPixel_FullPageScroll

--clear-static-content

# Following command needed only for Pearl theme sample data, otherwise can be skipped

php bin/magento module:enable WeltPixel_SampleData --clear-static-content

# clear cache

php bin/magento cache:flush

# run magento upgrade scripts

php bin/magento setup:upgrade

# generate static content

rm -rf pub/static/_requirejs

rm -rf var/view_preprocessed

php bin/magento setup:static-content:deploy

# if you are using di:compilation, you need to run it again: ( by default, not used)

rm -rf var/generation var/di

php bin/magento setup:di:compile

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.


http://www.weltpixel.com/resources/PearlSampleData.zip



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 Page set 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




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

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.




Links Go to Weltpixel -> Frontend options -> Links and set color and decoration for Links:

Link Color set color for links on the store

Link Hover Color set color when hover on links on the store

Font Decoration set font decoration for links on the store

Font Decoration Hover set font decoration when hover. For example: underline, overline or line-through




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 Buttons and customize the Primary Buttons:

Text Color set text color for buttons

Hover Color set text color on hover over primary buttons

Background Color set background color for primary buttons

Hover Background Color set background color on hover for primary buttons

Border Color set border color for primary buttons

Border Hover Color set border color on hover over primary buttons

Line Height(px) set Line Height of text in primary buttons [ in px ]

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

Rating Active Color set color for active stars

Rating Inactive Color set color for Inactive stars

Rating Icon Size set Icon size for Ratings [ in px ]




Form inputs 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




Dropdown Go to Weltpixel -> Frontend options -> Dropdown and customize the dropdown type elements:

Dropdown Background set background color for dropdowns

Dropdown Border Colors set border color for dropdowns

Dropdown Shadow set shadow for dropdown (ex. 0 3px 3px rgba(0,0,0,.15); // [''|none|value])

Dropdown Pointer Border Color set pointer border color for dropdowns

Dropdown List Item Hover set list item color on hover for dropdowns

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

Breadcrumbs Font Size set font size for breadcrumbs [ in px ]

Breadcrumbs Font Style set font style for breadcrumbs

Breadcrumbs Separator Color set breadcrumbs separator color

Breadcrumbs Current Page Color set breadcrumbs current page color

Breadcrumbs Color set breadcrumbs color




Breadcrumbs Link Hover Text Decoration set breadcrumb color on hover

Breadcrumbs Background set breadcrumbs background color

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

Header Version 1




Header Version 2

Header Version 3

Header Version 4

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

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

Sticky Header enable/disable sticky header (Laura - I couldn't find this option)




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

Width set the width of the Top Header [in px]

Link Color set color for links in header

Visited Link Color set color for visited link in header

Hover Link Color set color on hover over links in the header

Active Link Color set color for active link in the header

Text Color set text color in the header

Background Color set background color of the header

Border Bottom Color set border color of the header bottom




Middle Header Go to Weltpixel -> Custom Header -> Middle Header and 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

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-> General and 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 ]




CATEGORY PAGE

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

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

Display Add To Wishlist display on category page the icon Add to Wishlist to [Hidden / Top - Left / Top - Left On Hover / Top - Right / Top Right On Hover / Below Swatches On Hover]

Display Add To Compare

display on category page the icon Add to Compare to [Hidden / Top - Left / Top - Left On Hover / Top - Right / Top - Right On Hover / Below Swatches On Hover]

Display Swatches display swatches on products from category page [ No / Yes / On Hover ]

Display Swatch Tooltip display swatch tooltip when hover over swatches on products from category page [ Yes / No ]

Display Add to Cart display on category page the button Add to Cart [ Hidden / Image Bottom / Image Bottom On Hover / Below Price / Below Price On Hoover / Below Swatches On Hover ]




Align Add to Cart Button

align the Add to Cart button [ Center / Left ]

Products per line (Desktop view)

set the number of products per line in desktop view [ 3 / 4 / 5 ]

Remove Breadcrumbs remove the breadcrumbs from the category page [ Yes / No ]

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

Item Box Shadow set item Box shadow on category page [ex: 0px 5px 30px 0px rgba(0,0,0,0.1)]

Item Border Width set item border width on category page [ in px ]

Item Border Color set item border color on category page




Item Image Options Go to Weltpixel -> Category Page -> Item Image Options and 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 ]

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

Text Align align text on items in category page [ Left / Center ]




Font Size set font size on items in category page [in px]

Text Color set text color on items in category page

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

Display Reviews display the reviews [ Yes / No ]

Text Align align reviews text [ Left / Center ]

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

Text Align align price in items on category page [ Left / Center ]




Price Size set price size in items on category page [in px]

Price Color set price color in items on category page

Special Price Size set size for special price in items on category page [in px]

Special Price Color set color for special price in items on category page

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

Radius set radius for swatches on items in category page [ in px ]

Width set width for swatches on items in category page [ in px ]

Height set height for swatches on items in category page [ in px ]

Font Size set font size for swatches on items in category page [ in px ]

Swatch Align set swatch align on items in category page [ left / center ]




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

Toolbar Background Color set the toolbar background color

Toolbar Border Color set toolbar border color

Toolbar Padding set padding [ in px ]

Label Font Size set label font size [ in px ]

Label Font Color set label font color

Grid / List Background Color set grid/list background color

Grid / List Background Hover Color set grid/list background color on hover

Grid / List Background Active Color set grid/list background active color

Grid / List Border Color set grid/list border color

Grid / List Border Hover Color set grid/list border color on hover

Grid / List Border Active Color set grid/list border active color

Grid / List Icon Size set grid/list icon size [in px]

Grid / List Icon Color set grid/list icon color

Grid / List Icon Hover Color set grid/list icon color on hover

Grid / List Icon Active Color set grid/list icon active color




Dropdown Background Color set dropdown background color

Dropdown Background Focus Color set dropdown background color on focus

Field Border Width set field border width on top/right/bottom/left [in px]

Dropdown Border Color set dropdown border color

Dropdown Border Focus Color set border color on focus

Dropdown Font Size set font size for dropdown items [ in px ]

Dropdown Font Color set font color for dropdown text

Dropdown Arrows Color set arrows color in dropdown

Dropdown Arrows Hover Color set arrows color on hover

Dropdown Option Font Color set font color for options in dropdown

Direction Font Size set font size for direction (ascending/descending) arrows

Direction Font Color set font color for direction (ascending/descending) colors

Direction Font Hover Color set font color on hover for direction (ascending/descending) arrows

Pagination Font Size set font size for elements in pagination area

Pagination Font Color set font color for elements in pagination area

Pagination Font Hover Color set font color on hover for elements in pagination area

Pagination Font Active Color set font color for active element in pagination area

Pagination Background Color set background color for pagination area

Pagination Background Hover Color set background color on hover on elements in pagination area

Pagination Background Active Color set background color for active element in pagination area

Pagination Border Color set border color for elements in pagination area

Pagination Border Hover Color set border color on hover for elements in pagination area

Pagination Border Active Color set border color for active elements in pagination area

Pagination Next / Prev Font Size set font size for Next / Prev in pagination area

Pagination Next / Prev Font Color set font color for Next / Prev in pagination area

Pagination Next / Prev Font Hover Color

set font color on hover over Next / Prev in pagination area




Pagination Next / Prev Background Color

set font color on hover over Next / Prev in pagination area

Pagination Next / Prev Background Color

set background color for Next / Prev in pagination area

Pagination Next / Prev Background Hover Color

set background color on hover over Next / Prev in pagination area

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

Radius set radius for swatches in layered navigation [ in px ]

Width set width for swatches in layered navigation [ in px ]

Height set height for swatches in layered navigation[ in px ]

Font Size set font size for swatches in layered navigation [ in px ]

Swatch Align set swatch align in layered navigation [ left / center ]

Custom Link option




If you would like to have a custom link in the main navigation just go to Products -> Categories -> WeltPixel

Options tab and in the Custom link field type any of the following solutions:

Use http:// to create an external link

Use "/" to create a link to the homepage

Use "#" to disable the link

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




PRODUCT PAGE In this area you can customize the look and feel of the product page. The product page is highly customizable. You can customize the images dimensions, the images gallery, the images gallery in fullscreen, the zoom, the swatches and much more. You can choose between 4 demo product pages we already created.

Demo Product Version 1





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

General Right from the beginning you can select the layout that you want. You can set how much of from the width of the screen will have the image and the product info areas.. Go to Weltpixel -> Product Page -> General and set general settings for the product page:

Image area width set width for image section [ in % ], for example you can set it to 60% of the width of the website

Product info area width set width for product info area [ in %], for example you can set it to 40% of the width of the website

Move Description and Tabs under info area

[ Yes / No ] move description tab, more information tab and reviews tab on right section

Remove wishlist [ Yes / No ] remove wishlist button from the product page

Remove compare [ Yes / No ] remove compare button from the product page

Remove email [ Yes / No ] remove email button from the product page




Remove qty box [ Yes / No ] remove quantity box from the product page

Remove sku [ Yes / No ] remove sku info from the product page

Remove stock availability Remove stock availability Remove stock availability Remove stock availability

Remove Breadcrumbs [ Yes / No ] remove breadcrumbs from the product page

Remove Tabs Border [ Yes / No ] remove tabs border on the product page

Information Layout on Desktop

select tabs layout type [ Tab / Accordion / List ]

Quantity Input Type choose input type for quantity field [ Default input / Dropdown ]

Quantity Dropdown Max Value

set max value for quantity field when is set in dropdown [ value, ex: 10 ]

Display Swatch Tooltip [ Yes / No ] display tooltip on hover over swatch on product page

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




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

Main Image Width set main image width [ in px ]

Main Image Height set main image height [ in px ]

Thumb Image Width set gallery thumb image width [ in px ]




Thumb Image Height set gallery thumb image height [ in px ]

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

Gallery navigation style set gallery navigation style [ Thumbs / Dots / None ]

Gallery navigation loop enable gallery navigation loop [ True / False ]

Turn on/off keyboard arrows navigation

turn on/off keyboard arrows navigation [ True / False]

Turn on/off arrows on the sides preview

turn on/off arrows on the sides preview [ True / False]

Display alt text as image title

display alt text as image title [ True / False ]

Sliding direction of thumbnails

display sliding direction of thumbnails [ Vertical / Horizontal ]

Turn on/off on the thumbs navigation sides

turn on/off the thumbs navigation sides [ True / False]

Sliding type of thumbnails

set sliding type of thumbnails [ Thumbs / Slides ]

Sets transition effect for slides changing

set transition effect for slides changing [ Slide / Crossfade / Dissolve ]

Sets transition duration in ms

set transition duration [in milliseconds ]




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

Enable Fullscreen Image Zoom enable fullscreen image zoom [ True / False ]

Fullscreen navigation style set gallery navigation style in fullscreen [ Thumbs / Dots / None ]

Fullscreen navigation loop enable gallery navigation loop in fullscreen [ True / False ]

Turn on/off arrows on the sides preview turn on/off arrows on the sides preview [ True / False]

Display alt text as image title display alt text as image title [ True / False ]




Sliding direction of thumbnails in full screen display sliding direction of thumbnails [Vertical / Horizontal]

Sets transition effect for slides changing set transition effect for slides changing [ Slide / Crossfade / Dissolve ]

Sets transition duration in ms set transition duration [in milliseconds ]

Magnifier Options With this intuitive option users can zoom into your product by simply mousing over them. Go to Weltpixel -> Product Page -> Magnifier Options and set the position and how the magnifier should work on the product page:

Enable Magnifier enable or disable the magnifier [ True / False ]

Zoom of fullscreen set zoom value of fullscreen [ value ]

Top position of magnifier set top position of magnifier

Left position of magnifier set left position of magnifier

Width of magnifier block set width of magnifier block

Width of magnifier block set height of magnifier block

Action that activates zoom set action that activates zoom [ Hover / Click ]




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

Radius set radius [ in px ]

Width set width [ in px ]

Height set height [ in px ]

Line Height set line height [ in px ]

Font Size set font size [ in px ]




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

Thumbnail Image Border set border color for Thumbnail Image

Tab Active Background set background color for active tab

Tab Background set background color for tab

Tab Text Active Color set text color for active tab

Tab Text Color set text color in tab

Tab Container Padding set padding for container [ in px ]




CUSTOM CSS AND CUSTOM 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 for static pages You can add your own Custom CSS and JS for any static page Your Custom CSS for static pages can be inserted in Content -> Pages -> [edit desired page] -> Design.




Custom CSS and JS for 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 tab and 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 Widget button and the widget code will be placed in your page content 5. Save Page and check results in your store frontend




Heading Widget Insert a WeltPixel Heading Widget to display Headings in your page. You can find lots of styles for you headings to insert them in your pages as you desire. To insert an Heading Widget follow this steps:

1. Go to Content -> Pages and Edit the 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; }


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




Divider Widget Insert a WeltPixel Divider Widget to display dividers in your page. You can choose from several different style of dividers and you can insert them in your page as you desire. To insert a Divider Widget follow this steps:

1. Go to Content -> Pages and Edit the page where you wish to insert the Divider 2. Go to Content tab and place place the cursor where you wish to have the widget/divider in your page, then

click Insert Widget button 3. Select WeltPixel Divider widget and you will be able to customize it in the Widget Options area:

Select Style select the style for you divider. Go to the presented link to view the list of dividers.

Select Icon select the icon you wish to display on the divider. Go to the presented link to preview the list of icons

Custom class set a custom class to be able to customize it in the Custom CSS field. You can name your custom class, for example: my-class

Custom CSS here you can make advanced customization for the heading. For example, to change the subtitle color: .heading-block.center span{ color: green; }

4. Click Insert Widget button and the widget code will be placed in your page content




5. Save Page and check results in your store frontend

Brands Widget Insert a WeltPixel Brands Widget to display a list of brands in your page. You can view lots of dividers ready for you to insert them in your pages as you desire. Before creating a Brands Widget you need to create a block with the images which will be part of the widget. Follow this steps to create a block containing the images:

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

Note: You can make each image to be a link if you use the href tag. For example: <a href="http://www.weltpixel.com"><img src="{{media url="your-image"}}" alt="" /></a> Now you can use the created block with the images, to insert a Brands Widget. Follow this steps:

1. Go to Content -> Pages and Edit the page where you wish to insert the Brands 2. Go to Content 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 your brands section. Go to the presented link to preview the styles available.

Block select the block with the images, previously created


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 tab and place place the cursor where you wish to have the toggle widget in your page, then

click Insert Widget button 3. Select WeltPixel Toggle widget and you will be able to customize it in the Widget Options area:

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





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


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>




GOOGLE RICH SNIPPETS, TWITTER CARDS, FACEBOOK OPEN GRAPH & PINTEREST RICH PINS

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

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


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


Twitter Site Type your store Twitter username. For example @site_username

Twitter Creator Type Twitter username of the administrator of Magento store or owner of the store. You can use the site username or leave empty.




Facebook Open Graph Settings Go to Admin -> WeltPixel -> 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


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




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: https://search.google.com/structured-data/testing-tool/. 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.


https://search.google.com/structured-data/testing-tool/



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: https://cards-dev.twitter.com/validator


https://cards-dev.twitter.com/validator



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: https://developers.facebook.com/tools/debug/sharing/

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: https://developers.pinterest.com/tools/url-debugger/


https://developers.facebook.com/tools/debug/sharing/

https://developers.pinterest.com/tools/url-debugger/



RESPONSIVE BANNER SLIDER AND OWL CAROUSEL

Products Sliders

You can set carousels with products from the following products type:

New Products

Best Sell Products

Sell Products

Recently Viewed Products

Related Products

Upsell Products

Cross-sell Products




Go to Admin > WeltPixel > Product Sliders > General Configuration, up to four breakpoints for different screen resolutions can be set. You can set from which resolution to apply the settings from a specific breakpoint. ! Note: Options set on breakpoints area will overwrite the main slider options.

Options can be configured for each breakpoint:

Nav [True / False] show/hide the navigation buttons

Items number of items you want to see on the screen

Center - [True / False] show product in center of the slider

StagePadding Padding left and right on stage (can see neighbours)




For this products type: New Products, Best Sell Products, Sell Products and Recently Viewed Products there are the following options:

Enable [Yes / No] enable or disable this slider

Title [Custom title] insert text with the title desired

Show Price [Yes / No] show/hide the product price on the slider

Show Add To Cart [Yes / No] show/hide Add to cart button on the slider

Show Wishlist [Yes / No] show/hide wishlist on the slider

Show Compare [Yes / No] show/hide Compare option on the slider

Show Compare [Yes / No] activate random items in the carousel

Max Items maximum number of items in the carousel




For products type Related Products, Upsell Products and Cross-sell Products there are the following Options:

Enable [Yes / No] enable or disable this slider

Title [Custom title] insert text with the title desired

Slider options available for all products type (New Products, Best Sell Products, Sell Products, Recently Viewed Products, Related Products, Upsell Products and Cross-sell Products):

Nav [True / False] show/hide the navigation buttons under the slider

Dots [True / False] show/hide navigation bullets under the slider

Center - [True / False] show product in center of the slider

StagePadding padding left and right (can see neighbours).

Items items visible in the carousel

Loop [True / False] activate/deactivate loop through items

Margin right margin of items (in px)

LazyLoad [True / False] lazy load images. Also load images into background inline style if element is not <img>

Autoplay [True / False] autoplay the carousel

AutoplayTimeout timeout pause on each item (in ms)(ex: for 3 seconds, enter: 3000)

AutoplayHoverPause [True / False]

pause the autoplay on mouse hover




For the Related Products, Upsell Products and Cross-sell Products you can only enable or disable the appearance and functionality of the slider as you wish, using the options available. If you disable the slider on this product's type, the default Magento style will be used.




Custom Sliders

We recommend to do the steps to create a Custom Slider in the following order:

1. Create the Custom Sliders Banners 2. Create a Custom Slider and assign previously created Banners to the Sliders. 3. Insert created Sliders in Pages using widgets




To create a Custom Sliders Banner go to Admin > WeltPixel > Custom Sliders Banners and click on ‘Add New Banner’ button to create a new Banner.

Banners settings:

Title set a title to the banner

Show Title [Yes / No ] show the banner title

Description set a description for current banner

Show Description [Yes / No ] show the banner description

Status [Enabled / Disabled] enable or disable the banner

Slider Assign current banner to a specific slider

URL set URL where the banner should link (Note: the URL will be linked to the button if is available otherwise to the banner)

Banner Type [Image / Video / Custom]

banners can be Images(select file), Videos(insert html code) or Custom(insert custom HTML)

Image/Video/Custom choose image/video, insert custom HTML code

Alt Text alternate text

Target [Same Window / New Window Tab]

choose how to open the banner link

Button Text text on button (Note: you must set a URL link for the button to be displayed




Custom Content insert custom HTML content (ex: <p style="font-size:160%;">Custom text</p>)

Valid From start date for slider to be displayed

Valid To end date for slider to be displayed




* Note: To test the slider make sure you set Valid from and Valid to fields with date and time taking into consideration the server time, not your local computer time.

To create a Custom Slider go to Admin > WeltPixel > Custom Slider and click on ‘Add New Slider’ button.

In Slider Details tab there are the following setting:

Title set the slider title

Show Title [Yes / No] show the title

Slider Status [Enabled / Disabled] enable or disable the current slider

Nav [True / False] show navigation arrows

Dots [True / False] show navigation dots

Transition [Slide / Fade] slider transition effect

Center [True / False] show first banner on center of the slider




StagePadding padding left and right (can see neighbours).

Margin right margin of items (in px)

Items number of items/banners visible at the same time on the slider

Loop [True / False loop through sliders items

LazyLoad [True / False] lazy load images.

Autoplay [True / False] activate autoplay slide items

Autoplay Timeout set time for autoplay slide items(in miliseconds, for ex: 2000, for 2 seconds)

AutoplayHoverPause [True / False] set to pause autoplay on mouse hover

AutoHeight [True / False] set auto height of the banners in the slider.




! Below, there are options for responsive slider which will overwrite the main slider options. You can set up to 4 breakpoints:

Nav [True / False] show navigation buttons up to a specific resolution

Items number of items/banners visible at the same time on the slider up to a specific resolution

In ‘Slider Banners’ tab you can see the current slider banners and by resetting the filters all the existing banners. From here you can select which banners to be assigned to the slider and the display sort order.




Insert Created Sliders in Pages A slider can be insert it in your pages in one of the following ways: 1. Using widgets:

● go to Admin > Content > Pages ● edit the page where you wish to add a slider, ● in Content tab Show Editor click the Insert Widget button, ● select the type of Widget you want to create from ‘WeltPixel - Products Slider Widget’ or

‘WeltPixel - Custom Slider Widget’, ● in Widget Options choose one of the options available ● Click button Insert Widget

2. Inserting code in phtml file - For Product slider use the following code to insert the slider in your desired phtml file:

● <?php echo $this->getLayout()->createBlock("\WeltPixel\OwlCarouselSlider\Block\Slider\Products")->setProductsType('new_products')->toHtml(); ?>

● Replace ‘new_products’ with one of the following available products type: 'new_products',

'bestsell_products', 'sell_products', 'recently_viewed', 'related_products', 'upsell_products', ‘crosssell_products'

- For Custom slider use the following code to insert the slider in your desired phtml file:

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

● Replace the ‘3’ value with the desired existing slider id from ‘Slider Manager’ admin grid.




ADVANCE PRODUCT QUICK VIEW AND AJAX CART

Settings

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

2.You can customize the extension by completing the fields listed below:

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 short description [ Yes / No ] Remove product short description from quickview

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. Note: If “Add to cart” button is placed on the bottom of the product picture, only Version 2 button style will be available due to position overlap. If you want to use Version 1 button make please reposition “Add to cart” button.

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




SMART PRODUCT TABS

How to use smart product tabs

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.




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.




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.




SEO PAGE TITLE OVERWRITE

How to use seo page title overwrite

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




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




FULL PAGE SCROLL

How to use full page scroll

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

The code you just inserted actives the ‘Full Page Scroll’ functionality for this page. You don’t

need to add any other content to the page, it will be added on step no. 3 in related CMS blocks.




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

Note: 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.




INSTAGRAM WIDGET ADVANCED HOW TO USE INSTAGRAM WIDGET ADVANCED

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 http://instagram.com/developer. Login to your account or create one. Then click on Manage Clients, and finally on Register a New Client.


http://instagram.com/developer

http://instagram.com/developer



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.


http://localhost/

http://localhost/



STEP 4

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

STEP 5

Paste the following url into your web browser.

https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]&redirect_uri=http://localhost&response_type=token&scope=public_content Add the client id you generated to the url replacing [CLIENT_ID_HERE] Hit enter, and you will connect to Instagram’s servers. Instagram will ask you whether you want to grant the client you registered in Step 2 access to your account. Once your client has been granted access to your account, Instagram




will redirect your browser to your localhost and your newly generated access token will be appended to the url after localhost/#access_token=Treat your Instagram access token like you would your password. Do not share your access token with anyone.

STEP 6

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

STEP 7

Find your user ID:

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:




STEP 8

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

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




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

Instagram Client Id Your API client Id from Instagram

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 Feed type Tagged Feed type Location

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




CHANGE LOG

Version 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

Version 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

Version 1.2.0 (November 21, 2016)

- New extension included in Pearl Theme: Full Page Scroll http://www.weltpixel.com/full-page-scroll-for-magento-2.html - New extension included in Pearl Theme: Instagram Widget Advanced http://www.weltpixel.com/instagram-widget-advanced-for-magento-2.html

- 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


http://www.weltpixel.com/full-page-scroll-for-magento-2.html

http://www.weltpixel.com/instagram-widget-advanced-for-magento-2.html



- 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

Version 1.1.0 (September 12, 2016)

- New extension included in Pearl Theme: SEO Page Title Overwrite: http://www.weltpixel.com/seo-page-title-overwrite-for-magento-2.html


https://github.com/rusdragos/m2-weltpixel-google-cards/commit/109b5fdcb8cb2486edc893c8bbd0e5f7e681f7c3

https://github.com/rusdragos/m2-weltpixel-google-cards/commit/5a3199a1772b4e45f7833385735288a95d4fc273

http://www.weltpixel.com/seo-page-title-overwrite-for-magento-2.html



- New extension included in Pearl Theme, Smart Product Tabs: http://www.weltpixel.com/smart-product-tabs.html

- 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

Version 1.0.3 (August 02, 2016)

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

Version 1.0.2 (July 28, 2016)

- Theme compatibility adjustments with Magento 2.1 - Small frontend fixes

Version 1.0.1 (July 26, 2016)

- Small front end fixes Version 1.0.0 (July 25, 2016)

- Initial release


http://www.weltpixel.com/smart-product-tabs.html



CONTACT SUPPORT Thank you for purchasing our Pearl Theme for Magento 2. If you experience any problems with installing the theme or one of our extensions, please contact our support team. If you have a moment, please review this theme and the extensions. If you would like WeltPixel certified Magento developers to install this theme or customize it, please contact our support team to receive an estimate.






welcome to pearl responsive theme for …welcome to pearl responsive theme for magento 2 version...

Documents