Written by on

How to Build a Sweet Bakery Store Website with iThemes Exchange

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.

wordpress-bakery-cupcake-site

Visit the Demo Site

Tools Needed

Here are the tools you’ll need for this project:

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).

installing-ithemes-builder-theme

  1. After purchasing Builder Theme Madison, log in and download the theme zip file from the iThemes Member Panel.
  2. 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).

install-ithemes-exchange

To install iThemes Exchange, follow these steps:

  1. Visit Plugins > Add New. In the search bar, search for iThemes Exchange.
  2. From the search results page, click Install Now under the iThemes Exchange.
  3. 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.

ithemes-exchange-quick-setup-wizard

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.

ithemes-exchange-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 VariantsThis 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.

ithemes-exchange-settings

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:

  • Home
  • About
  • Blog
  • Contact

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.

how-to-change-wordpress-home-page

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.

add-new-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.

ithemes-builder-import-export

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).

madison-social-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.

online-bakery-store-wordpress

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.

in-store-pickup-delivery-ithemes-exchange

  1. Navigate to Exchange > Settings and click the Shipping tab.
  2. Click the Simple Shipping link at the top.
  3. On this page, enable flat rate shipping and free shipping.
  4. Change the shipping label for flat rate shipping to Local Delivery and add the default delivery amount.
  5. Next, change the shipping label for free shipping to In-Store Pickup.
  6. Click Save Changes.

Adding New Products

To get started adding your first product, navigate to Exchange > Add Product.

add-new-physical-product-ithemes-exchange

  1. Add your product title and price (think about the “base” price; we’ll cover variations next).
  2. New, upload your product images for the product image gallery.
  3. In the Available Shipping Methods section, confirm the flat rate shipping (delivery) cost.
  4. 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.

product-variants-wordpress

  1. At the bottom of the product page, click the Advanced button to expand the Advanced Settings options.
  2. Click Enable variants for this product. For this example, we chose radio buttons and added Dozen and Half Dozen options.
  3. 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.

price-variations-wordpress

  1. Again from the Advanced Settings section, click the Variant Pricing tab.
  2. From the dropdown list, create your pricing variation combos. For this example, we’re only added different prices for dozen and half dozen orders.
  3. Preview your product and then click Publish. Pretty sweet!

cupcake-shop-wordpress

Download Exchange to Set Up Your Online Store

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 now

Comments

  1. Hi Kristen,

    Great article – thank you. I’m an iThemes BackupBuddy Gold & Plugin Suite subscriber and looking to set up an Exchange store very soon.

    I had a play with the Madison demo and overall it looks great, but I struck a couple of issues. I’m wondering if you can give me an indication if these are configuration issues, or areas where Exchange still needs to be tweaked a little.

    1) When adding a variable product with two variables (number & flavour) there seems to be no way to add a second variation.

    So if a customer adds a dozen Vanilla Signature Cupcakes there’s no way to also add a half-dozen French-Vanilla Signature Cupcakes.

    I can go back to the Signature Cupcakes page and change the options (1/2 dozen vs dozen, flavour) but there’s no way to submit it as an additional product order.

    Cake Pops are another example. I can put a dozen Chocolate Cake Pops in the cart, but how do I also order a dozen Strawberry? I can select Strawberry on the product page but there’s no way to add it!

    From a customer perspective it’s very confusing.

    Can the store configuration be tweaked to allow customers to order multiple variations of a single product?

    2) Because I was testing I used the checkout as guest option which proved to be extremely confusing. At three separate places in the checkout process I had to enter my email for guest checkout:

    * Click Checkout Button
    * Checkout as Guest (entering my email)
    * Enter billing address (with ship to billing address ticked)
    * Enter shipping address (Why? I just selected ship to billing address!)
    * Select shipping method: in store pickup

    At this point I’m confronted with the Checkout screen asking me to Checkout as a guest, create an account or log in. A moment ago it was showing me as “Checking out as: “, now it feels like the checkout process is broken and I have to start again?

    If I change the shipping method again I also get the “You must be logged in to complete your purchase. Log in, register or edit your cart” message and scrolling up again have to enter my email address to “checkout as guest”.

    If I select the “multiple shipping methods” option then once again the screen refreshes and I’m confronted with the “You must be logged in to complete your purchase. Log in, register or edit your cart” message and scrolling back up have to enter my email again.

    If I do that then I can finally hit the Pay with Check or Buy Now buttons.

    So overall it is an exceptionally confusing process for potential customers.

    Can these two issues be addressed in the Exchange settings? Or are there additional tweaks that need to be made to Exchange? i.e.:

    1) Ensure if “ship to billing address” is selected that the shipping address gets properly updated with the billing address details.

    2) Ensure someone using the “checkout as guest” option is properly tracked between changes to the cart so they don’t have to keep getting confronted with a register, login or checkout as guest option.

    Given how great the ithemes products and support are I know that if there are tweaks required Exchange will get updated very quickly. Overall I’m very, very much looking forward to starting to use Exchange as a product offering.

    Thanks!

    Phill

    • Hi Phill,

      At this time, the customer can only purchase one variant at a time. If they want to purchase a half-dozen and a dozen of the same cupcakes, they would have to complete the purchase of one before they could purchase the other.

      I’ve added this as a feature request which you can vote for on the Exchange Roadmap.

      As for the issues with checking out as a guest and the billing/shipping address, it looks like this is a bug. I’m reporting this to the developers and we’ll have a fix out as soon as possible.

      If you have any additional questions, we’d be happy to help you out in the Exchange forum.

      Thanks,

      Elise

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35