Skip to main content

Layout Builder

The ShopWP Layout Builder allows you to visually design your products and collections in various ways.

How it works​

The Layout Builder uses a customized version of the Gutenberg editor. This provides a powerful workflow enabling you to combine ShopWP blocks with other third-party blocks. When creating a layout, you can choose between five different layout types:

  • Shortcode
  • Product Detail Page (PDP)
  • Product Listing Page (PLP)
  • Collection Detail Page (CDP)
  • Collection Listing Page (CLP)

The Shortcode layout type gives you five additional options to pick from. This determines the type of shortcode to create. All ShopWP shortcodes are available:

As you build your layout, a shortcode will be created to copy and paste throughout your WordPress site. All available design options for the layout come from the core ShopWP blocks.

ShopWP Layout Builder listing page

Creating a layout​

First, make sure you're using ShopWP Pro 8.0 or greater.

info

The Layout Builder requires the Gutenberg block editor. If you have the Classic Editor plugin installed you'll need to manually enable Gutenberg specifically for the Layout Builder.

Open Layout Builder​

You can access the Layout Builder in two places:

ShopWP Layout Builder links

Clicking Layout Builder will show you a list of all your generated layouts. If you haven't created anything yet, click Add new.

Build your layout​

When you first create a layout the Shortcode layout type will be selected automatically.

The ShopWP Layout 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 Layout Builder Settings

The above screenshot demonstrates changing the product title color to red. Each settings group (Filtering, Sorting, Layout, etc) has a wide variety of options to choose from.

Copy the shortcode​

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

ShopWP Layout 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 Layout Builder listing the shortcodes

Using with Classic Editor​

To use Layout Builder with the Classic Editor plugin, you'll need to turn on the Allow users to switch editors option. This allows you to enable the block editor for the Layout Builder, while using the classic editor for your other posts / pages.

You can access this setting within: WordPress Dashboard - Settings - Writing

Classic editor settings page

Creating template layouts​

You can choose to create a template layout from the side nav.

After selecting a template type, the Layout Builder will automatically change the design to mimic the layout chosen. For example, the product detail layout will automatically create a two column layout as a default. You can change this to whatever you wish.

ShopWP Layout Builder listing the shortcodes

You can also preview your layout in any product (or collection) by selecting a new value in the "Product preview" dropdown.

Publishing your template will automatically apply it to your products. You can easily view your template in action by clicking the "View product page" link in the top nav.

All "template" layout types will show a badge so they're easily identifiable.

ShopWP Layout Builder listing the shortcodes