Stack Framework for Magento 2.

User Guide.

• b.1 configure the banner using the Banner Settings:

  • Title - set a title for the banner
  • Show Title [Yes / No] - show the banner title in frontend, it will show on the banner
  • Description - set a description for current banner
  • Status [Enabled / Disabled] - enable or disable current banner
  • Slider - assign current banner to a specific Slider. Slider Note: If no slider is created yet, you can ignore this option and assign the banner later from Slider Manager
  • URL - set the URL where the banner/button should link when clicked on.

    URL Note: set the URL without your store baseurl, ex: /women.html;

    URL Note 2: If ‘Text Button’ option is filled, URL will be linked to the button instead of banner

• C. Save the banner and repeat steps 1.a and 1.b until you have created all necessary banners for your slider.

• Dots [True / False] - show navigation dots in bottom area of the slider
• Banner Transition Effect [Slide / Fade] - slider transition effect
• Center Item [True / False] - shows banners on center of the slider and shows neighbour banners

  Note: Center option only available for Banner Transition Effect: Slide

• StagePadding - shows banners on center of the slider and neighbour banners with specified padding on the sides.

  Note: Only available if Transition: Slide and Center:False

• Margin - right margin of banners present in slider (in px), by setting this parameter you define the space between banners present in slider.
• Items - number of items/banners visible at the same time on the slider

  Note: This setting is overwritten by responsive settings

Step 4. Assign Banners to your Slider

• Go to ‘Slider Banners’ tab under ‘Slider Information’
• Click on Reset Filter to display all your banners.
• Choose the banners you want to display in your slider.
• Fill in the banners order in the slider, starting with position 0. If not filled, banners will have by default sort order ‘0’.
• Hit ‘Save Slider’.

HOW TO CREATE A PRODUCT CAROUSEL.

Step 1: Define breakpoints

Go to Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders ,and set up to four breakpoints for different screen resolutions.

In next steps you will be able to set item numbers in the carousels for each breakpoint . For example, you can set to display 2 items on mobile screens, 3 items on tablets and 4 items on desktop.

!Note: Options set on breakpoints area will overwrite the general carousel options.

Beside this general options, there are additional options for customizing each type of carousel:

• Next/Prev Button [True / False] - If True, Next / Prev buttons are displayed.

  Note: This setting is overwritten by responsive settings

• Dots [True / False] - Show / Hide navigation bullets on the bottom of the carousel
• Center - [True / False] - shows products on center of the carousel and shows neighbour products on the sides.

  Note: This setting is overwritten by responsive settings

• StagePadding - shows products on center of the carousel and neighbour products with specified padding on the sides

  Note: Only available if Center:False

  Note 2: This setting is overwritten by responsive settings

• Items - number of items/banners visible at the same time on the slider. This value should be smaller than Max Items.

  Note: This setting is overwritten by responsive settings

For Related, Upsell and Cross-sell Product Carousels

• 1. All you have to do is to Enable this types of carousels and the products will be displayed in a carousel instead of default product grid. You can do this here: WeltPixel > OWL Products Carousel -> Related, Up-sell, Cross-sell Products Carousel -> Enable

• 2. For Related Products to be displayed, make sure you have defined Related products in your catalog and check the bottom of product detail page.

• 3. For Up-sell Products to be displayed, make sure you have defined Up-sell products in your catalog and check the bottom of product detail page the section “You may also be interested in the following product(s)”.

Google Search can expose a search box scoped to your website when it appears as a search result. This search box is powered by Google Search. However, if you wish to power this search box with your own search engine, or if you want search results also to include an associated mobile app, you can do so using structured data embedded on your website.

Go to Admin > WeltPixel > Rich Snippets & Cards > Sitelinks Searchbox:

• Enable Searchbox [ Yes / No ] - Activate searchbox functionality in Google Search.

Rich Snippets & Cards - Social Profiles

Use markup on your official website to add your social profile information to a Google Knowledge panel. Knowledge panels prominently display your social profile information in some Google Search results.

• Enable Social Profile - Enable Google Search to show up to 10 Social Profiles in Search results and in the Knowledge Graph.
• Facebook Url - If added, Facebook profile will show in Search results and Knowledge Graph.
• Twitter Url - If added, Twitter profile will show in Search results and Knowledge Graph.
• Instagram Url - If added, Instagram profile will show in Search results and Knowledge Graph.
• Google+ Url - If added, Google+ profile will show in Search results and Knowledge Graph.
• Youtube Url - If added, Youtube profile will show in Search results and Knowledge Graph.
• Linkedin Url - If added, Linkedin profile will show in Search results and Knowledge Graph.
• Pinterest Url - If added, Pinterest profile will show in Search results and Knowledge Graph.
• Myspace Url - If added, Myspace profile will show in Search results and Knowledge Graph.
• SoundCloud Url - If added, SoundCloud profile will show in Search results and Knowledge Graph.
• Tumblr Url - If added, Tumblr profile will show in Search results and Knowledge Graph.

• Go to Admin -> WeltPixel -> Rich Snippets & Cards -> Pinterest Rich Pins Settings and set the Pinterest Rich Pins:
  • Enable [ Yes / No ] Activate or deactivate the Pinterest Rich Pins feature

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

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

Step 2: Configure your sitemap

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

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

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

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

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

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

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

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

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

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

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

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

STEP 2

• If you created a new dropdown attribute, you'll have to assign it to the product attribute set used by the product before this attribute will be visible in product details.
• To assign the new attribute to a product Attribute Set go to Admin > Stores > Attribute Set menu and add the new attribute to your Attribute Set
• Later, at step 6 you'll may need to assign the Attribute Set to the product where you want to use Smart Tabs if not assigned already.

STEP 5

• Go to Admin > Content > Blocks and create blocks for each option of the attributes. Block identifier name must have the following syntax:

  smartproducttabs_attributecode_option



- Keep smartproducttabs_ prefix unchanged.

- Replace attributecode with your attribute code.

- Replace option with option of the attribute.

- If an option has words separated by spaces, replace the spaces with - (minus) sign.





• Example 1, where attribute code is 'color' and attribute option is 'blue', smart block name will be: 'smartproducttabs_color_blue'

• Example 2, where attribute code is 'material' and attribute option is 'cotton', smart block name will be: 'smartproducttabs_material_cotton'

• Example 3, where attribute code is 'manufacturer' and attribute option is 'United States', smart block name will be: 'smartproducttabs_manufacturer_United-States'





! Troubleshooting Smart Tabs not showing in product page:

#1 Using wrong prefix smartproducttab_ instead of smartproducttabs_ will lead to tab not showing in product page. Please check if you are using the correct prefix.

#2 Attribute code and option are CASE SENSITIVE. Double check for typo, capital letter instead of small leter, etc.

#3 Make sure you selected an attribute option for the product you are checking smart tab functionality.

#4 Do not insert underscore between the prefix, the attribute and the attribute option.

Step 2.

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

Note! The Instagram Developer page has issues loading the Google Captcha Script. Refer to this Stack Overflow article for a workaround.

STEP 5.

• Paste the following url into your web browser's search bar and access it.

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

  Add the CLIENT ID that was generated for you to the URL, replacing [CLIENT_ID_HERE] and hit enter. You will then connect to Instagram’s servers.

  Instagram will ask you whether or not 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 8.

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

• Sort By - Sort the images in a sort order. The available options are:
  • None(as they come from Instagram).
  • Most recent.
  • Least Recent.
  • Most Liked.
  • Least Liked.
  • Most commented.
  • Least commented.
  • Random.
• Resolution - Size of the images displayed. The available options are:
  • Thumbnail (150x150).
  • Low Resolution (306x306).
  • Standard Resolution (612x612).
• Feed Type - As Instagram has removed the Tag and Location Feed Types, only the User Feed Type is currently available.
• User Id - Id found in step 7.

Step 2

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

Step 2. Configure menu

• Go to Categories (only Level 1) > WeltPixel Mega Menu
• You will be able to configure a different display mode for each category:
  • Menu display mode for each level 1 category: Width / Sectioned / Boxed / Default Magento
  • Number of columns in submenu for each level 1 category
  • Width of the submenu columns, allowed value is auto (E.g. "auto"). Note: please take into consideration the left or right blocks because these blocks will generate one extra column each.
• Top / Right / Bottom / Left Block [CMS Block / Custom HTML] - You can show extra content in your mega menu specific to each level 1 category. Choose to display CMS blocks or HTML content, and select the location where the content to be displayed in the sub-menu. You can show multiple blocks for the same category if necessary.
• Hide Mobile link "ALL [Category Name]" - on mobile there is an additional link added under each level 1 category that allows accessing the category from mobile devices. If your catalog structure is of such nature that you don't need access to the level 1 category from mobile devices, you can hide this link on mobile devices. This option alows granular control for each level 1 category.

Step 4 - Mobile Menu Breakpoint

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

Note on applicability:

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

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

Step 5: Custom Block.

• Enable: [ Yes / No ] Enable or Disable the Custom Block section.
• Select Block: You can use a specific Custom Block for to customize you Thank You Page Module (you can use an existing one or create new one from Admin sidebar → Content → Blocks → Add New Block).
• Sort Order: This option can be used to customize the sorting order of the 4 module’s sections. If no value is entered, default value is 0 (the sections will be sorted in ascending order, starting with 0).

Advanced Settings:

• "Loading More Items" Text - Define the text that will display after the Load More button is clicked/tapped while the new content is loading
• Show "Load more" button - In Magento you already predefined how many products to display on the category page. Let’s consider you set it to 25. This option defines after how many pages to display the load more button. Ex. 2 pages will load 2X25 products = 50 then it will display the Load More button. This option creates the balance by keeping your category pages light on initial load, having the ability to reach the footer easily and gives you the opportunity to have control over what is the most important on the page. By setting the value to 0, the Load more button will never display and it will automatically load new products until all the products from the category gets displayed.
• "Load More" button text - The text that will display on the button “Load More” / “Show More”
• No More Items Text - The text that will display as soon as all products from the category get loaded
• Start Loading Early - To Make the scrolling experience even smoother, you have now the option to pre-load products when the customers are approaching the end of the list with new products. Setting this value to Yes will prevent when there is a normal browsing experience the customer from waiting on the next page to load. This option will only work for the first few pages defined in STEP 3 or for all if set to 0
• Negative Margin - Load new items earlier considering the pixels offset configured. More items will start loading when you have less than specified pixels until the bottom of the page. Ex. 250. This option is only valid if Loading Early is set to Yes
• Enable canonical and prev/next link elements - We followed closely how Google is recommending the implementation of the rel=next, rel=prev and canonical tag.

• Increase conversion rate and reduce friction. This extension helps users find what they are looking for by returning real time results as they type in the search box. Finding the right products significantly increases conversion and user retention.




• Fully customizable, allows to include custom CSS in search header and footer and advertise any promotions or call to action messages, right in the search results container.