Page 26 - Blog

Page Speed is taken very seriously by a lot of Magento stores since it directly influences your general website performance. That's why everyone constantly tries to improve it and looks for the best ways to do so.  In case you're checking your website speed in Google PageSpeed you can face the Serve images in next-gen formats issue. According to it, Google recommends you to save images in JPEG 2000, JREG XR and WEBP formats instead of old PNG and JPG. Best of all - WebP. Never heard of it? Find out more about what is WebP, why should you use it in your Magento 2 store and how is it different from PNG and JPG in this article about . Implementing this Google recommendation gives you an advantage and allows to reduce the size of images by half. Fortunately, there is no problem that wouldn't have a solution. So, to solve the Serve images in next-gen formats issue you have to install and enable the . This module allows you to convert all current and future images into WebP fileihor

Hello, Magento fans! Since Magento is our favourite eCommerce platform and we all eagerly waited for Magento 2.4.0 release we are happy to bring the great news. A Little Background Our Extension made a great impact on Magento community. It's a valuable contribution to any Magento 2 store. That's why Magento got interested in adding it to Magento 2.4.0 core. So, in the fall of 2019, Adobe Systems Incorporated, which owns the Magento platform, contacted us with an offer. Of course, we couldn't refuse, because Magefan are Magento fans. Instead of writing new code from scratch, Magento asked about the integration, which we definitely supported. Thus, we transferred the copyright for the "Login as Customer" extension to Adobe. Then in early 2020, we worked with the Magento Community Engineering Team on integrating our module into the Magento core. The module came out with code improvements and some new features.  What's New in Login as Customer? Now Magefan Login as Customer extension isihor

Magento development requires a lot of effort, especially when working with templates. Thus when you or override existing theme files, you need to know the exact location of the templates. Since endless searching in the code won't suffice, you need some tips — Magento 2 template hints. So, in this article, you'll learn how to enable the Magento template path hints for admin and storefront in two different ways. Before we get to the methods of enabling template path hints in Magento, let's define what they are first. What are Magento 2 Template Hints? Magento 2 template hints are the tips that help you define a .php block class or a .phtml template that corresponds to a specific page area on your Magento 2 store. In other words, template path hints add a notation with the path of each template to help you locate the .phtml files more easily and edit them faster correspondingly. You can locate the code in the Magento file structure both on the frontend and the admin. There are two ways toihor

While everyone so desperately tries to make their way up to the top of SERP following the they pay little or no attention to one of the main things page speed could be improved with - Image Optimization. If you , you will notice that images take a lot of your website loading time.  So, in order to get more traffic, you need to take care of plenty of things including images. Many websites use outdated unoptimized images which definitely are not contributing to the website speed improvement since they take some time to load. It's been said that if the page takes longer than 3 seconds to load the majority of people are going to leave.  In case you really want to attract more customers with a fast-performing website you need to optimize your images. We've prepared the top 3 tips for Magento 2 Image Optimization. Tip 1 - WebP Images PNG and JPG image formats are outdated and big in size. It makes them load longer and slow down your website performance correspondingly. Fortunatelyihor

"There has been an error processing your request" is one of the most messages you can receive when working with Magento 2.  Here is an example of this message: What are the most common reasons for "There has been an error processing your request" message to appear? Installation of the new Magento 2 theme or extension. Updating Magento 2 or Magento 2 extension. Changes in the template code. Setting configuration. Overloading of the server memory. So, if any of the above-mentioned points are due you will see the default Magento error message "There has been an error processing your request". After that exception printing is disabled by default for security reasons.  Though you see this message you don't know what error is there to be fixed. In order to fix it, you need to find out the source of the problem first. Fix "There has been an error processing your request" issue  Take the following steps to fix "There has been an error processing your request" issue in Magentoihor

extension allows you to and move JS code to the bottom of the page automatically. That way you increase the website loading speed and eliminate render-blocking. However, sometimes you don't need to move all JavaScripts to the bottom since there are some that aren't recommended to be moved there. In this guide you'll learn how you can do that. How to Defer Some JS Loading Automatically? Navigate to Stores > Configuration > Magefan Extensions > Rocket Javascript and find the Ignore Deferred JavaScript With section. Then specify the strings you don't want to be moved to the bottom, each in a new line.  The extension will add data-rocketjavascript="false" attribute to them automatically so they will be ignored. How to Defer Some JS Loading Manually? In case you don't want to move some JavaScript to the bottom you just need to add the attribute data-rocketjavascript="false" to the <script> tag directly in your code: Example: Let's say you had the JavaScript tag like this: <script>    alert('Iihor

The 1st place in Google SERP is a dream place every website is working hard on getting to. As plenty of studies show you'd probably click on the first 3 results Google gives for your query with little or no regard to the rest. Being at the top 3 is great, but still, the 1st place gives you far more authority and credibility. You have to be really good so that Google has the reason to put you there, right? Your website or webpage success on Google is based on SEO, so everyone desperately wants to learn how to improve it. Consequently, those who've ever learned about SEO know how many things it is influencing and how many things you have to take care of in order to improve it on your website. So, in order to outrun the competitors to improve your website SEO you have to: Work hard on creating unique and useful products. Do your research to target top-ranking and long-tail keywords. Create informative and engaging content. Pay a lot of attention to the MetaData. Buildihor

Basic Linux Commands pwd - displays information about the current location in the file system (the path of the directory (folder) you are in); dir, ls - shows a list of files and folders in the current directory; cd - (change the current directory) allows you to move to another folder; Example: cd ../ - will move to a folder on a higher level;cd foo - will go to the child folder "foo";cd /var - will go to the "var" folder located in the root of the file system; touch fine_name - create a new file named "fine_name"; mkdir dir_name - create a new folder "dir_name" in the current directory; rm file_name - delete the file "file_name"; rm -r dir_name - delete the folder "dir_name"; cp origin_name new_name - copy files and folders; mv old_name new_name - move files and folders; ln -s origin_name link_name - create a symbolic link; Search by Content To search for a file by content, use this command: grep -rnw 'path' -e 'some text' Use the l modifier to display onlyihor

If you already use for your HTML <img> tags and want to enable WebP for the CSS background as well, the proper way is to use multiple backgrounds in the CSS styling. For example, you have an element with .png CSS background: .minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {     background: url(../images/icon-cart.png) no-repeat;} To switch it to the WebP, you need to convert PNG/JPG/GIF image to WebP image manually using one of the free tools on the Internet. Save it in the same folder and use CSS like this: body.webp-supported .minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {    background: url(../images/icon-cart.webp) no-repeat;}body.no-webp .minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {    background: url(../images/icon-cart.png) no-repeat;} In this case, all browsers will get WebP images, except for ones that do not support WebP. They will load the .png image. Note: if you use Magento 2 with "no-webp" & "webp-supported"ihor

It is proven that information is perceived better by watching videos than reading a long one-piece text. Magento websites are not an exception. So, it's your cue to consider adding videos to your content, too. There are multiple options to add YouTube videos in Magento. Starting from the default means and moving on to the advanced tools with , you can find the best solution for your needs.  Today, we'll cover both options to make your journey easier. Their features and performance metrics vary, so there's a lot to unveil. Ready to get started? How to Add YouTube Video in Magento? You can use the WYSIWYG editor or page builder for content management. Fortunately, both of them offer a media tool to add audiovisual elements. So, to add a video in Magento: 1. Navigate to the place where you'd like to insert a video and click on the Insert/edit media icon on the editor's toolbar. 2. Enter the video's link in the Source folder and specify its Width and Height in the General tab. 3. Switchihor

Recently we got an "data-vocabulary.org schema deprecated and not supported by Google anymore. Please migrate to using schema.org types." error validating one of our website pages. The same error we got in Google Search Console. This "data-vocabulary.org schema deprecated" error is related to the breadcrumbs structure data. We used "data-vocabulary.org/Breadcrumb" schema for the structured data, but Google supports it no longer.  You may also receive this error starting from April 6, 2020, in case you haven't converted your structured data scheme from data-vocabulary.org to schema.org. Before we get to the point of how to fix the "data-vocabulary.org schema deprecated" error, let's make a few things clear. What is Structured Data? It is a specific HTML or JSON code on the web-page that helps search engine robots to analyze the page easier and structure the content for better understanding. When your page has a lot of elements it is hard for searchihor

If you use Magento 2 and get an error like this: Warning: file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages:error:14095126:SSL routines:ssl3_read_n:unexpected eof while reading in vendor/google/recaptcha/src/ReCaptcha/RequestMethod/Post.php on line 72Trace:<pre>#1 file_get_contents() called at [vendor/google/recaptcha/src/ReCaptcha/RequestMethod/Post.php:72]#2 ReCaptcha\RequestMethod\Post->submit() called at [vendor/google/recaptcha/src/ReCaptcha/ReCaptcha.php:156]#3 ReCaptcha\ReCaptcha->verify() called at [app/code/MSP/ReCaptcha/Model/Validate.php:79]#4 MSP\ReCaptcha\Model\Validate->validate() called at [app/code/MSP/ReCaptcha/Observer/ReCaptchaObserver.php:93]#5 MSP\ReCaptcha\Observer\ReCaptchaObserver->execute() called at [vendor/magento/framework/Event/Invoker/InvokerDefault.php:72]#6 Magento\Framework\Event\Invoker\InvokerDefault->_callObserverMethod() called at [vendor/magento/framework/Event/Invoker/InvokerDefault.php:60]... when trying to login to theihor

To apply lazy load for images in your Knockout template, first, make sure that  extension is installed. Then insert an image into the HTML template (my-template.html) like this: <img data-bind="attr: {src: $parent.getPixelUrl(), 'data-original': thumbnail, alt: code_article, loading: 'lazy', width: '165', height: '165' }"/> Example: <div class="options-block" data-bind="foreach: getOptionBlocks(), afterRender: initLazyLoad()">     <div class="option-item" data-bind="attr: {'data-sku': sku}">         <div class="image-block">              <img data-bind="attr: {src: $parent.getPixelUrl(), 'data-original': thumbnail, alt: code_article, loading: 'lazy', width: '165', height: '165' }"/>         </div>      </div> </div>   Your view JS file should look like:  define([ 'jquery', 'uiComponent', 'ko',], function ($, Component, ko) { 'use strict'; return Component.extend({ defaults: { template: 'Vendor_ExtensionName/my-template' }ihor

Social media is a powerful platform that generates tons of information throughout the world every day. That is why such networks as Facebook and Twitter are commonly used for marketing purposes by a lot of stores. It allows them to attract more attention to their content and correspondingly drive more traffic to their websites with the help of Open Graph tags. However, sometimes it happens that aren't working as they are supposed to. Instead of a great featured image and newly written title and description, you see the outdated information or don't see anything at all. If you're wondering what could possibly cause Facebook to pull out the wrong OG data instead of the up-to-date one the answer is pretty simple. Facebook Open Graph Cache. So, in order to make sure Facebook shows the proper Open Graph Information you just need to clear the Facebook cache. Follow these steps to clear Facebook Open Graph Cache: 1. Navigate to the Facebook Sharing Debugger, paste the URL to the pageihor

Magento is one of the most powerful open source e-commerce platforms which provides online merchants with the solutions for their stores and full control over the functionality of their websites.  Magento is being used by a wide range of retailers from small regional stores to the ones on a global level with huge sales volume and extensive customer databases.  There are 2 versions of Magento with the 1st said "to extinct" by June 2020. There are plenty of reasons you might want to , but let’s analyze the main of them. So, the main reasons to migrate from Magento 1 to Magento 2 are: 1. Support As it was stated by June 2020 Magento 1 will no longer be supported meaning there won’t be any updates for the platform. This is the main reason for migrating to Magento 2 since without support there can be crucial consequences on security, not speaking about the inability to stand out the competition of constantly developing Magento 2 websites. 2. Security The end of support will correspondinglyihor

It is not a secret that driving more traffic to one’s website is the goal of every marketing strategy. There are so many websites out there selling some excellent stuff. Furthermore, there is a great number of appearing new ones. That is why it is hard to withstand the extensive competition. That's what makes marketers constantly search for some new ways of promotion to get more traffic to their websites. Actually, this is what they are there for, don't you agree? To be honest, it is pretty hard to differentiate and single out some best ways to drive more traffic to one’s website since it majorly depends on the kind of business the niche belongs to. However, there are some basic and the most proving methods that will cost you just your time and determination to make your website noticeable and recognizable. Want to know what are those ways and how to apply them to your business? Better keep reading. So, as it was already said there are plenty of ways to generate more customers. Howeverihor

Categories help you organize your catalog and customers — to find products they are interested in faster. However, the "behind-the-scenes" of category management is not that positive. You often have to spend hours adding and removing products from categories. Especially when a sale season is approaching.  But the struggle ends with the solution we're offering you today — . It helps you completely automatic categories like Brands, , Newly Added, Most Rated, etc.  So, today you'll learn how to create dynamic categories in Magento and make them work completely autonomously. 1. Fill Out Basic Rule Information Once you install the extension, navigate to Stores > Configuration > Magefan Extensions > Dynamic Category and enable it. Then go to Catalog > Dynamic Category > Rules and press the Add New Rule to create a new dynamic category rule. Here you need to:  Enable the rule. Set the Rule Name and add a Description if needed. Specify the Priority which defines how the ruleihor

There are cases when the Magento sidebar is missing and not showing. Most likely this is because of the "sidebar" or "sidebar.additional" container has been removed from your theme layout. In order to fix this issue, please follow the steps below: 1. Look for remove="true" in the theme layout XML files. For this you need to check out all these files in our theme in general: app/design/frontend/ThemeVendor/themename/*/layout/*.xml * - means any folders, file names. 2. Remove or comment lines that look like <referenceContainer name="sidebar" remove="true" /> or  <referenceContainer name="sidebar.additional" remove="true" /> 3. Save changes. 4. Flush Magento cache and check.   If it does not work then please do the same, but instead of theme folder check the extensions folders that are located in app/code or vendor or make sure that your page does not use 1column or empty layout.

In order to configure blog design in , navigate to Stores > Configuration > Magefan Extensions > Blog and find the Design section. Note: This option is available only for users. In this section, you are able to choose the Layouts for Blog Post, Category, Tag, Author, Search and Index Pages. It can be empty, 1 column, 2 columns with right bar or left bar or 3 columns. In case you have some designs on your Magento instance they will be displayed here as well.  So let's have a look at how some of these layouts work on the storefront. 1 column 2 columns with left bar 2 columns with right bar 3 columns You can also choose whether to Display Post Publication Date and select the Post Publication Date Format in the Design section. Learn more about it in the guide. The Design section is available for all blog pages e.g. blog post, category,author. You can set the Design Layout and manage the Custom Design Update on Blog Post, Category, Tag and Author Pages. Note: if you don't set theihor

When you you add the post content, tags, categories and fill out the display setting, etc. However, how blog posts look on the frontend is defined by the post view settings. Since extension comes with quite a few, today we'll cover each in detail.  To configure the blog post page elements, navigate to Stores > Configuration > Magefan Extensions > Blog > Post Page (Post View).  Posts From The Same Category Choose whether to Display Posts From the Same Category on the blog post page, select the Template and set the Number of Posts to display. And this is how the posts from the same category are displayed on the storefront: Related Posts Enable the Display Related Posts option. Select the related posts Template. You can Use System Setting, Grid or Carousel Slider template. Set the Number of Posts you want to be displayed. Enable Auto Related Posts if you want related posts to be generated automatically.  Note: auto-related blog posts' grid and slider templates are availableihor

It's not a secret that an active and SEO-optimized blog drives more traffic and contributes to the overall performance of your store. A solution of choice for many, our Basic comes with a multitude of features for effective content management. Yet, as useful as they are, you can go even further. plans offer you a range of advanced options that help you create a unique blog. In this article, we'll look closer at the distinctive options these plans offer. So you'll be able to choose the one for your needs. Ready to get started? Custom Blog Homepage Edition: Extra Blog Extra edition allows you to create a with Recent and Featured Posts Widgets using different templates. Thus, you can place certain info right in front of your customers' eyes and ensure the posts you share are relevant for every visitor. 22+ Templates Edition: Extra You can make your blog pages more attractive with the Blog Extra edition. Here, you get 22+ templates for blog index, category, and different list pages. Be sureihor