Builder Layouts: Ecommerce Product Right Sidebar

From iThemes Codex
Jump to: navigation, search

Note: For this tutorial we’re using iThemes Exchange as the ecommerce platform. If you’re not using Exchange, you might have to tweak your layout/view accordingly.

The Ecommerce Product - Right Sidebar layout has 2 components.

The first component is the layout that contains the building blocks of the page.

The second component is assigning the particular product to use this layout in Exchange.


  • In the WordPress Dashboard, select My Theme > Layouts and Views.
  • Create a new layout, and name it “Ecommerce Product - Full Width” or a name of your choosing.
  • Choose a width. To decide on a width, you would most likely base it off of the width of the rest of your site. Of course, you can choose any width with Builder.

Below the settings section, you’ll find the Design options. This is where you’ll start to add modules to create a new layout.

Here’s a screenshot of the layout we’ve created:

Ecommerce Product - Right Sidebar.png

Steps to reproduce:

  1. Add a module, selecting “Header”. Use the default settings.
  2. Add a “Navigation" module directly below the header, and select your menu type.
  3. Add a “Content” module with no sidebar.
  4. Finally, we finish off the layout with a footer module, and again, we’re using the default settings.

That’s it for the layout portion. Now, let’s talk about the assigning the layout to a product in Exchange.

Assigning the Layout to a Product in Exchange

In the WordPress Dashboard, select Exchange > All Products.

(If you haven’t created a product yet, create your product to continue with the following steps.)

  1. Edit your product.
  2. Under the “Advanced” section at the bottom of the product screen, you’ll find a section labeled "Custom Builder Layout”.

  3. Email Subscription 01 Selection.png

From this section, you can choose which layout you’d like to apply to the individual product. 4. Choose the "Ecommerce Product - Right Sidebar” layout. That’s it!

Wrapping up

You can download this layout to import into your own site below:

[Download this layout]

Be sure to upload your own photo if you use it as-is. However, experiment and have fun tweaking this layout or creating your own custom product layout!

← Back to Example Layouts and Views