Builder Layouts: Ecommerce Product Full Width

From IThemes Codex
Jump to: navigation, search

Contents


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 - Full Width 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.

Layout

  • 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 - Full Width.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 a sidebar on the right. Choose an appropriate width for the 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. Ecommerce Advanced Section.png


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

Wrapping up

You can download this layout and view combination 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

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox