Admin Product Preview on Frontend

Snapshot of Admin Product Preview on Frontend

Product Description

Product Preview enables admins to preview frontend Product Pages from the admin panel. While editing or browsing the product details in the admin panel, an admin is able to quickly go to the product page and preview the changes made. This saves a lot of time because, without this extension, an admin needs to perform several steps before finding the product on the website. These steps include searching for the product from the search bar, navigating through the category, or copying and pasting the URL key making sure the URL is right.

The module supports multiple store views, and the preview is available even if the product is disabled.

 

Configuration

In order for the extension to work properly, make sure to follow all the steps listed below.

Step 1 - Install the Extension

First, you have to install the extension in Magento 2. Should you need some help with the installation, you can find it in MagentoDevDocs.

Step 2 - Magento 2 Configuration Settings

To start with, please follow the path from the Magento 2 admin panel:  Store > Configuration > Product Preview.

 

Customize the settings of the extension in the General Configuration section.

 

• Enable Admin Preview: Yes
• Product Grid Preview Button Position: In New Column (or In Action Column)
• Product Grid Columns Table: SKU, Product Name, Image, Price, Original Price, etc. (choose the desired options)
• Product Preview Link Type: Backend (or Frontend) navigation of preview links
• Customer Grid Login Button Column: In New Column (or in Action Column)
• Disable Page Cache For Admin User: Yes - enables automatic cache flush before admin logs in as a customer; in case you choose Yes, Product Preview Link Type should be set to Frontend.
• Show Edit Link In Frontend For: Product, Category, CMS Page, Static Block, Customer (choose one or more pages which direct admin to backend Edit Page from the frontend)

 

Step 3 - Other Sections

Sales

Follow the path Sales > Operations > Orders.

 

Check the Sales Order Grid table consisting of various columns. The Bill-to-Name column presents the names of customers who have placed orders on-site. The Item Ordered column displays brief information of the ordered product (SKU, name, image, etc.)

 

If you want to navigate a certain customer, click on their name, and navigate it to the Customer Information section in the backend where you can make any needed changes.

 

If you want to preview a specific product, click on its name in order to see the Product Preview in the frontend.

 

Products

Follow the path Products > Catalog.

 

If you want to see the preview of the Product Page on the frontend, you need to click the Preview button in the product grid view of the Catalog section. To make any changes to the Product Page, click Edit, make the necessary changes, and then click Save.

 

In case you do not want to allow the customers to see the product preview button on the frontend, choose Yes for the Admin Preview attribute. This way, only admins can see the preview of the product in the backend.

 

When it comes to previewing categories, you can check the list of Category Pages, make the necessary changes and save them. Afterward, you can use the Preview button to preview a specific Category Page on the frontend.

 

Customers

Follow the path Customers > All Customers.

 

If you want to log in to a customer account from the backend, you need to click the Login button.

 

In the Log In As Customer Log, you can view the history of admin logs as a customer in the frontend.

 

Content

Follow the path Content > Elements > Pages.

 

If you want to make changes in the content of a specific CMS Page, check the list of CMS Pages, click Select, then Edit. Make the necessary changes on the Edit CMS page and save the changes. Then, you will be able to use the Preview button and check the frontend display.