Skip to main content

Visual Builder

Visually create product layouts that automatically generate shortcodes.

ShopWP Visual Builder listing page

How it works

First, make sure you're on ShopWP Pro 6.3 or greater.

The Visual Builder allows you to create layouts using a customized Gutenberg editor. As you build your layout, a shortcode will be created to copy and paste throughout your WordPress site.

Open Visual Builder

You can access the Visual Builder in two places:

ShopWP Visual Builder link

Once open, you'll see a list of your generated shortcodes. If you haven't created anything yet, click Add new.


You can create as many layouts as you want. Easily reference the shortcode on the listing page, or find it at the top of the shortcode edit screen.

Build your layout

The ShopWP Visual Builder uses Gutenberg blocks, so the interface should be very familiar. Select the products block and find a list of available settings on right-hand side of the interface.

ShopWP Visual Builder Settings

Each settings group (Filtering, Sorting, Layout, etc) has a wide variety of options to choose from.

ShopWP Visual Builder settings expanded

Copy the shortcode

Within the visual builder, you'll notice a big shortcode field at the very top of the page.

ShopWP Visual Builder shortcode field

As you build your layout, this generated shortcode will change automatically for you. You can copy it at anytime and use it within your pages.

You can also find the shortcode within the listing page here:

ShopWP Visual Builder shortcode field