How to create a custom product page

In this article

1. Create a new Block
2. Enable the custom product page
3. Configure the custom product page
4. Shortcodes for custom product page layout (if you don’t want to start from a blank block)
5. Be creative 🙂

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

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

3

Configure the custom product page

From 3.8.2:

• 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.
• Edit the page by using the “Edit product layout with UX Builder” link in the admin bar (added in version 3.8.2)

Pre 3.8.2:

• 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 that you use the Edit Block UX Builder pop up 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)

Edit mode:

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)

4

Shortcodes for custom product page layout

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.