How to create a custom product page

This feature is available from 3.4.0

In this article

  1. Create a new Block
  2. Enable the custom product page
  3. Configure the custom product page
  4. Shortcodes for All Available Layout for Product Page (if you don't want to start from a blank block)
  5. Be creative :)

Step 1: Create a new Block

  • To create a custom product page first make a new empty block (the block can be titled anything, but we'll call it 'Product page').  
  • Location: Dashboard > Blocks > Add new

Step 2: Enable the custom product page

  • Enable 'Custom' in the Product page layout options and select the block you just created for the purpose of the custom product page layout. 
  • Save and exit the settings.
  • Location: Theme Options > Shop > Product Page

Step 3: Configure the custom product page

  • After you have exited the settings panel from the previous step, navigate to an existing product page in the frontend that you have set up earlier. To get the best experience it's recommended to take a product that you have set up completely, like some pictures, short description etc. That way you can more easily visualize the page section you will create.
  • Hover over the 'Product Page' block we created earlier and select UX Builder from the Edit Block pop up.

Note: It is important to note that you need to use the Edit Block UX Builder link from upon a product page itself from your normal frontend. So not directly in the dashboard blocks section and not from upon the settings page you were in step 2.

When the UX builder is opened you will now have Product Page elements available in the left side pane in the section 'Product Page'.
Starting out with a 'Gap' and a 'Row' is a good way to start building the page.

Product Page elements (left panel) Small Page hierarchy sample (UX builder)

Shortcodes for All Available Layout for Product Page

Here is the link of shortcodes for custom product layouts:  http://docs.uxthemes.com/article/247-custom-product-page-layout-shortcodes

Just copy your desired shortcode in the product page block and start customizing the layout on the fly.