Written by on

How to Build an Online Jewelry Store with Exchange & iThemes Builder

The new Simple Shipping Add-on for Exchange makes it so, so simple to build an online store. In this tutorial, we’ll be building a simple WordPress ecommerce jewelry site using iThemes Builder and Exchange.


View the Demo Site

Tools Needed

To get started, here are the tools you’ll need:

      • A self-hosted installation of WordPress
      • iThemes Builder – Attent (We used Builder Attent for this specific tutorial, but you can use any Builder theme with very similar steps.)
      • A PayPal or Stripe Account
      • 4-6 high-quality photos of each of your products
      • BackupBuddy (don’t build a WordPress site without it!)

Installing iThemes Builder

Builder makes it easy to create your own page layouts with the use of Layouts and Views. Builder even allows you to assign your custom page layouts to your Exchange store pages.

After purchasing Builder – Attent, log in and download Builder – Attent from the iThemes Member Panel. Next, log in to your WordPress site and visit Appearance > Themes to upload Builder – Attent. You’ll be promoted to create a custom child theme. This allows you to update your Builder theme without losing any changes you might make to the CSS of your theme’s stylesheet.

Screen Shot 2013-10-18 at 4.24.16 PM

Custom CSS

Note: Some additional CSS was added to the end of the custom child theme’s stylesheet for this demo. You can use Attent as-is or add this.

Installing Exchange & Quick Setup

Download Exchange from the WordPress repo or install it directly from your WordPress dashboard via the Plugin search page.

The Exchange Quick Setup Wizard will then appear, guiding you through a few key settings to get your store up and running quickly. Since this site will be used to sell jewelry, select the Physical Products option. From here, you can also select Flat Rate or Free Shipping and add a default flat rate shipping amount.

Screen Shot 2013-10-18 at 2.36.49 PM

Next, you can select the payment gateway(s) for your store. For more information on setting up PayPal and Stripe, check out these tutorial videosSave these settings.

More Exchange Settings

Expand the Exchange menu and click Settings.

Screen Shot 2013-10-18 at 3.00.48 PM

In the General Settings tab, you can complete your store details, including your company name, tax ID number, contact info and more. In the Shipping tab, you can select Yes to allow individual products to override the global shipping methods settings. This is helpful if you’d like to add different shipping prices to individual products. Click Save Changes.

Screen Shot 2013-10-18 at 3.04.45 PM

Enabling Additional Exchange Add-ons

The Quick Setup will enable several add-ons you’ll need for building the site, but you may want more options. Visit the Exchange Add-ons page.

For this site, the following Add-ons were enabled:

Screen Shot 2013-10-18 at 3.40.02 PM

Creating a Navigation Menu

Before you get started creating the site, it’s good to go ahead and create the navigation menu. Even if you’re not quite sure what to include, it’s helpful to have a menu available to use when creating your Builder Layouts.

On the left, you’ll see options to add your WordPress pages. Exchange also provides the option to add Exchange-specific pages to your menu, including Store, Account, Log in and more. Click Save Menu.

Screen Shot 2013-10-18 at 3.37.17 PM

Building the Home Page

The home page of the layout consists of a header, navigation, 1-column widget bar and a footer. I named this layout “Full Width,” but you could name it “Home” or “Front Page” for your reference.

Screen Shot 2013-10-18 at 3.09.08 PM

To apply this layout to the home page of your site, you have two options:

1. Create a new “Home” page and apply the custom layout directly to the page. Then, be sure to change your WordPress Reading Settings to make the front page display a static page (your new home page).

Screen Shot 2013-10-18 at 3.30.47 PM

2. The easy way: Use Builder’s Views to match the Full Width Layout to the Home View of your site.

Screen Shot 2013-10-18 at 3.29.35 PM

Adding Widget Content

For the main image on the home page, I used Builder’s awesome Widget Content feature.

From the dashboard, locate the Widget Content menu. Click Add New and then add your main front page image to the editor. Click Save.

Screen Shot 2013-10-18 at 3.13.41 PM

To add this widget content to the front page layout, click Manage Widgets for this Layout when visiting your home page.

Screen Shot 2013-10-18 at 3.16.28 PM

Now, from the Widgets page, drag the Widget Content Widget to the home page widget area. From the dropdown, select the name of the widget content you just created.

Screen Shot 2013-10-18 at 3.17.57 PM

Now, visit the home page of your site. It now looks like this:


Building the Store & Product Layout

To make the store and product pages have a similar full-width style layout as the home page, duplicate the Full Width Layout. I named this new layout “Store.”

Screen Shot 2013-10-18 at 3.58.29 PM

The Store Layout consists of the following modules: header, navigation, HTML, content (no sidebars), 1-column widget bar and a footer.

Screen Shot 2013-10-18 at 4.00.58 PM

Using the HTML Module for coupon banner

Some Builder themes include special styling for the HTML module to make it easy to use it as a callout text box. You can also use our BoomBar plugin for this if you’d rather have a top banner.

Screen Shot 2013-10-18 at 4.05.00 PM

When adding the HTML Module, add the following text and select the Light Blue style.

Save 25% off with coupon code FINERTHINGS

Screen Shot 2013-10-18 at 4.06.55 PM

Click Save and the HTML module will be added to your layout. Click Save to finish up the layout.

Assigning this Layout to the Store View

From the Builder menu, visit the Views page. Select the Exchange – Store view and select the new Store Layout. Click Update.
Screen Shot 2013-10-18 at 4.12.22 PM

Adding Products

From the Exchange menu, click Add Product. You’ll now see the Add New Product page.
Screen Shot 2013-10-18 at 4.15.06 PMAdd your product title, price, description and upload your images. In the shipping section, you can choose to override available shipping methods to make the shipping for this product free.

In the Advanced settings, click the Custom Builder Layout to apply the Store Layout to this product’s page.

Screen Shot 2013-10-18 at 4.20.47 PM

Now—we’re ready to publish the first product to the store. Click Publish.

Repeat the Add New Product process for the rest of the items in your store.

Screen Shot 2013-10-18 at 4.37.32 PM

Download Exchange Now & Start Selling Your Goods

Exchange really makes it so easy to set up your online shop. And, together with Builder, you have full control over the design of your site.

For more information on setting up your Exchange site, check out these Exchange and Builder video tutorials, plus the Exchange and Builder documentation.

Download Exchange




Sale Ends Today! Save 35% OFF BackupBuddy Get the coupon