Whether you own a bakery with the best cupcakes in town or you’re building websites for clients, here’s a little sweet inspiration for your next website. In this tutorial, we’ll be building a simple WordPress bakery store website website using iThemes Exchange, our free WordPress ecommerce plugin.
Here are the tools you’ll need for this project:
- A self-hosted installation of WordPress
- Builder Theme Madison
- A Stripe account (but you can also use PayPal)
- High-quality photos for each bakery item
- iThemes Exchange (our free WordPress ecommerce plugin)
- iThemes Exchange Add-ons: Variants (included in the Exchange Pro Pack) and Stripe (free)
- BackupBuddy (never build a WordPress site without it!)
Getting Started: Installing Themes & Plugins
We’ll be using Builder Theme Madison for this example site, but you can use any iThemes Builder theme. Builder makes it easy to create your own WordPress page layouts with the use of Layouts and Views so you can really customize the design of your site. Builder also allows you to assign your custom page layouts to your iThemes Exchange store pages (which will come in handy later).
- After purchasing Builder Theme Madison, log in and download the theme zip file from the iThemes Member Panel.
- Next, log in to your WordPress site and visit Appearance > Themes to upload Builder – Madison. From here, you’ll be prompted 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).
iThemes Exchange is our free WordPress ecommerce plugin that allows you to easily sell digital and physical products. We built iThemes Exchange to make WordPress ecommerce simple by splitting features into add-ons (some are core add-ons already built into the plugin and others are stand-alone add-ons that are installed separately).
To install iThemes Exchange, follow these steps:
- Visit Plugins > Add New. In the search bar, search for iThemes Exchange.
- From the search results page, click Install Now under the iThemes Exchange.
- Click OK and Activate Plugin.
The Exchange Quick Setup
The Exchange Quick Setup Wizard will appear after you activate iThemes Exchange, guiding you through a few important settings to get your store set up.
Since this site will be used to sell tangible products (not digital downloads), select the Physical Products option. From here, you can also select Flat Rate or Free Shipping and add a default flat rate shipping amount (more on handling shipping for online orders later).
Click Save Settings.
Enabling/Installing Additional Exchange Add-ons
For this site, you’ll need to enable a few core Exchange Add-ons and install some additional add-ons.
Core Add-ons to Enable:
- Basic Reporting Dashboard Widget: Adds a widget to the Admin dashboard to give basic sales statistics — this is just a helpful way to see sales information.
- Billing Address: Enabling this add-on allows you to collect a billing address at checkout.
- Duplicate Products: This gives the admin the ability to duplicate an existing product (just a handy workflow feature)
- Guest Checkout: Enabling this add-on gives customers the ability to checkout as a guest, without registering. You may want to allow this option for customers.
- Coupons: This add-on allows you to generate coupons that apply to all products in your store.
- Multi-item Cart: Enabling this add-on allows your customers to purchase multiple products with one transaction.
- Physical Products: Since we’ll be selling tangible products (not digital downloads), make sure this is product type add-on is enabled.
- Simple Shipping: This add-on enables flat rate and free shipping for your physical products.
Additional Add-ons to Install:
Follow the normal WordPress plugin installation methods to install these additional Exchange Add-ons:
- Product Variants: This add-on handles product variations like colors and sizes plus product variant pricing.
- Stripe: Allows you to process transactions via Stripe, our favorite simple and elegant payment gateway.
- Mailchimp (optional):Adds customers to your Mailchimp lists so you can build your newsletter lists
More Exchange Settings
From the WordPress dashboard, 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 and contact info. For more help dealing with sales taxes, check out our Easy U.S. Sales Taxes Add-on.
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. We’ll customize shipping even more later, so go ahead and click Save Changes.
Creating Site Pages & the Navigation Menu
Since this is a basic website, we’ll have the following standard pages:
From the WordPress dashboard, navigate to Pages > Add New. Create pages for Home, About, Blog and Contact (but not Store; Exchange will handle generating this page).
By default, WordPress sets the home page of your site to be your latest posts. To change this, navigate to Settings > Reading.
Change the front page displays to a static page and select Home for your Front page and the Blog page for the posts page.
To build the navigation menu, navigate to Appearance > Menus. Create a new menu and add your WordPress pages to the menu. Next, expand the Exchange section to add the Store to the menu. Click Save Menu.
Importing Demo Site Layouts and Views
Builder features the ability to export and import Layouts and Views, so here’s a link to download the Madison demo site layouts and views.
To import them into your site, navigate to Builder > Settings and click the Import/Export tab.
Follow the remaining steps to finish the import. Next, you’ll want to edit each layout with your own photos (for the home page) and add widgets (like these free theme-matching social media icons).
Online Orders Made Simple – Building the Store
Our store has one main objective: to offer a convenient way for customers to place their orders online. With the Product Variants and Simple Shipping Add-ons, we can meet this need by providing quantity and flavor options, plus the ability to select in-store pickup or delivery.
Using Simple Shipping Settings for In-Store Pickup and Delivery Fees
Before we get started adding new products, let’s finalize shipping settings to reflect in-store pickup and local delivery options.
- Navigate to Exchange > Settings and click the Shipping tab.
- Click the Simple Shipping link at the top.
- On this page, enable flat rate shipping and free shipping.
- Change the shipping label for flat rate shipping to Local Delivery and add the default delivery amount.
- Next, change the shipping label for free shipping to In-Store Pickup.
- Click Save Changes.
Adding New Products
To get started adding your first product, navigate to Exchange > Add Product.
- Add your product title and price (think about the “base” price; we’ll cover variations next).
- New, upload your product images for the product image gallery.
- In the Available Shipping Methods section, confirm the flat rate shipping (delivery) cost.
- Click Save Draft.
Setting Up Quantities and Flavors
Now it’s time for Product Variants. Before you start setting up your product variants, check out this post for a few tips on pre-planning quantities, prices and inventory keeping.
- At the bottom of the product page, click the Advanced button to expand the Advanced Settings options.
- Click Enable variants for this product. For this example, we chose radio buttons and added Dozen and Half Dozen options.
- Next up, we’ll add a few flavor options. Click Add New Variant, select radio buttons (or drop-down) and add your flavors.
Setting Up Pricing Variations
Now it’s time to set up pricing variations. One dozen cupcakes are more expensive than half a dozen, so you’ll want to update the product listing with prices that reflect quantity selections.
- Again from the Advanced Settings section, click the Variant Pricing tab.
- From the dropdown list, create your pricing variation combos. For this example, we’re only added different prices for dozen and half dozen orders.
- Preview your product and then click Publish. Pretty sweet!