WELCOME TO PEARL RESPONSIVE THEME for …WELCOME TO PEARL RESPONSIVE THEME for Magento 2 Version...
-
Upload
phungthien -
Category
Documents
-
view
257 -
download
11
Transcript of 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
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | 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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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]
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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)
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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]
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
Demo Product Version 2
Custom Magento Solutions | Contact Support
Demo Product Version 3
Custom Magento Solutions | Contact Support
Demo Product Version 4
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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 ]
Custom Magento Solutions | Contact Support
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 Magento Solutions | Contact Support
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 Magento Solutions | Contact Support
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 Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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; }
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
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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 Widget button 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}}" />
Custom Magento Solutions | Contact Support
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
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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 Page and 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>
Custom Magento Solutions | Contact Support
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
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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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/
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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)
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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 Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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 Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
* 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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
! 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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
STEP 5
Go to your store frontend and check the results.
Custom Magento Solutions | Contact Support
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 ’.
Custom Magento Solutions | Contact Support
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'.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
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:
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support
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
Custom Magento Solutions | Contact Support
- 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
Custom Magento Solutions | Contact Support
- 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
Custom Magento Solutions | Contact Support
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.
Custom Magento Solutions | Contact Support