Skip to content

Build a product page

Here you build a page for one product. A photo sits next to the name, price and Buy now button, followed by three features, a list of specifications and a sales call to action. Use it for anything you sell. To compare several plans, add a pricing table to it.

The video builds the page of a hardware product called Insight Hub.

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • The media library holds a photo of the product.
  • The page is open in the builder. For a new one, go to Content > Add content > Landing Page (/node/add/landing_page) and click Save.
  • New elements land at the top of their column. That is why the right column is built from the button up.

Step 1: add the product

  1. Click Add Elements on the empty page and pick Section from the Layout tab.
  2. Click + on the section and pick Row; it arrives with two equal columns.
  3. Click + in the left column and pick Image. Click Select Image, tick the product photo and click Insert selected. Type the Alt attribute in the SEO panel and click Save.
  4. Click + in the right column and pick Button. Set Title to "Buy now", Link to your shop, Type to Primary and Size to Large, then click Save.
  5. Click + in the right column again and pick Text; it lands above the button. Type the price as Heading 2 and click Save.
  6. Click + once more and pick Text; it lands at the top. Type the product name as Heading 2, add one line of description and click Save. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see Build SEO-friendly pages.

Step 2: add the features

  1. Hover the section and click Add Section Below. Give the new section the Align text center class.
  2. Click + on the section and pick Row. Click its grid icon (Column layout), pick the 1/3 + 1/3 + 1/3 preset and click Save.
  3. Click + in the first column and pick Text. Type the feature name as Heading 3, add one line and click Save.
  4. Click + in the same column and pick Icon; it lands above the text. Choose the Font Awesome Free Solid set, search for plug and click the icon. Set Size to Very Large (3x), open Icon utilities, set Style to Circle and click Save.
  5. Repeat for the second column with cloud and the third with battery-full.

Step 3: add the specifications

  1. Add a third section with Add Section Below. Open its More > Settings, pick a light grey Background in the Style panel and click Save.
  2. Click + on the section and pick Text. Type "Specifications" as Heading 2, then one specification per line, and click Save.

Step 4: add the call to action

  1. Add a fourth section and open its More > Settings. Pick Align text center under HTML classes, then the purple Background and white Font color in the Style panel. Click Save.
  2. Click + on the section and pick Button. Set Title to "Talk to sales", Link to /contact, Type to Light and Size to Large, then click Save.
  3. Click + again and pick Text; it lands above the button. Type "Insight Hub from 249 euro" as Heading 2 and add one line. Set Font color to white and click Save.

Step 5: save and preview

  1. Click Save on the builder toolbar.
  2. Open the view menu (the eye icon) and choose Preview.

Go further

Not shown in the video:

  • Specification table: insert a table with the Table button on the text toolbar instead of one line per specification.
  • Gallery: replace the single photo with an Image carousel of product shots.
  • Plans: link the price to a pricing table.

What you see

The product photo fills the left half, with the name, price and Buy now button on the right. Three centred features follow, each a circled icon over its name and line. The specifications stand on a grey band, and a purple band closes the page with Talk to sales.

If you don't see the page as shown

  • The name, price and button are in the wrong order. They went in from the top down, and new elements land at the top of their column. Drag them into place by the drag handle on their control bar.
  • The icons have no circle. Style sits in the Icon utilities panel, not in General. Open the icon's settings, open Icon utilities and set Style to Circle.
  • The heading stays dark on purple. The Text element has no Font color of its own. Open its Style panel and set Font color to white.
  • Your changes are gone after a reload. You left the page before clicking Save on the builder toolbar. If Save shows an error, see Changes do not save.

What's next?

Something wrong or missing on this page? Report it or edit the page.