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.
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
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.
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.
Next, you can select the payment gateway(s) for your store. For more information on setting up PayPal and Stripe, check out these tutorial videos. Save these settings.
More Exchange Settings
Expand the Exchange menu and click Settings.
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.
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:
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.
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.
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).
2. The easy way: Use Builder’s Views to match the Full Width Layout to the Home View of your site.
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.
To add this widget content to the front page layout, click Manage Widgets for this Layout when visiting your home page.
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.
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.”
The Store Layout consists of the following modules: header, navigation, HTML, content (no sidebars), 1-column widget bar and a footer.
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.
When adding the HTML Module, add the following text and select the Light Blue style.
Save 25% off with coupon code FINERTHINGS
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.
From the Exchange menu, click Add Product. You’ll now see the Add New Product page.
Add 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.
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.