How to Display Quick View in Custom pages in Magento 2

In case of custom page such as showing products in Blog, FAQ or any custom pages. You just need to add the following snippet to the page. Mageplaza Quick View will be compatible and show Quick View button.

Insert the following snippet:

{{block class="Mageplaza\QuickView\Block\QuickView\Popup" template="Mageplaza_QuickView::quickview/widget/button.phtml"}}

You can add it on one page or one block by going to Content > Elements > Pages / Blocks . Also, you can insert it into .phtml, .xml files of Magento as well as other extensions that you want to display the popup.

Support type of content:

  • CMS Static Blocks
  • CMS Pages
  • .phtml or .xml file type.

How to insert the snippet to any page

In this case, you can insert to any page via Widget in Backend, you don’t need to edit any line of code.

Step 1: Create a Static Block Content

Go go Backend > Content > Elements > Blocks > Add New Block Paste the above snippet to content area:

quick view snippet

Step 2: Insert a Widget

Now insert a Widget to specificed pages with above Block Content.

Go go Backend > Content > Elements > Widgets > Add Widget

Magento 2 add new widget

Let’s select

  • Type: CMS Static Block
  • Design Theme: Select your current theme. If you are using Porto Theme, then select Porto Theme, in this case, I select Magento Luma.
  • Then click Continue.

Storefront Properties Tab

  • Widget Title: Fill widget name, such as Mageplaza Quick View for any pages
  • Assign to Store Views: Your current store Views, or select All Store Views
Layout Updates section

config quick view

In this example, we will add Quick View to Category page

  • Display on: Specified Page
  • Page: Catalog Category
  • Container: Page Bottom

Go to Widget Options tab, Select Block Find Mageplaza Quick View > Save and Continue Edit this widget.

Now flush cache and check your result.

That’s all.

If you have any questions, feel free to contact us.






Back Ask Mageplaza

Looking for more information?

quick-view
ajax-cart