Build a Coffee Shopify Store | Selling Coffee Online

Ok, so you’re looking to design a coffee website, but you need to know how to make that happen quickly and effectively.

This guide will walk you through how to use Shopify to get your in person cafe online and start moving your product through ecommerce.

This guide is designed to describe all major aspects of setting up a coffee website, from structuring the pages, building compelling product pages, to setting up Shopify’s backend settings.

Running a coffee business is about much more than just setting up and managing a website, so the purpose of this guide is to save you time getting your website launched so you can focus more on the nuts and bolts of running the roastery, cafe, and fulfillment etc.

On this page:

Coffee Website Examples

Planning the Coffee Shopify Store

Setting Up the Online Coffee Store

Adding Coffee Products and Collections

Adding Pages to the Online Coffee Website

Designing the Coffee Website

Setting Up the Website Navigation

Testing and Launching the Coffee Website

First.. A Note on Web Hosting

Web hosting refers to services make it possible for a website to be publically accessible. Web hosts basically rent out space on their servers to people and organizations that are looking to make their websites available at the usual "www" address.

This guide largely provides a tutorial on using Shopify to build out your website, so while there are many different companies that you can purchase hosting from, that topic isn't detailed to extensively because Shopify includes their own hosting service in all their plans.

Online Coffee Store Examples

In this section we’ll walk you through a few examples of what different, ideal, coffee websites look like for the purposes of inspiration, and so you have an idea of all the things you’ll need to consider with respect to functionality and design. It’s usually helpful to explore this in detail to get a sense of what competitors are doing and what your potential customers have come to expect in terms of functionality and overall user experience.

Before starting a coffee website, it’s beneficial to review some of the better coffee websites that are already out there. Looking at other websites will provide inspiration and also give you a sense of the competition in the space.

The list of coffee websites below will illustrate the level of design and function that potential customers will have come to expect.

We recommend starting the guide here, so you first get a sense of what direction you want to take your coffee website in.

Alternative Brewing

Let's start with "Alternative Brewing", Australia's "Largest Online Coffee Brewing Equipment & Accessory retailer."

Website: https://alternativebrewing.com.au/

Ok, so technically they are not selling coffee, but rather coffee supplies, but this Australian website gets a lot right straight out of the gate.

For instance, immediately upon arriving on the website, that make it clear to us that:

They offer “100% Secure Online Transactions” and “24/7 Customer Support” - so they’ve correctly anticipated trust as a potential barrier to purchase and are structuring their website to address that head-on.

They set expectations as far as offering $9.95 flat rate domestic shipping. Another big barrier for any eCommerce website, and coffee is no different, is shipping costs. Their rate is very competitive and calling this out immediately also means the customer doesn’t have to wait to find out until after they make the purchase what the shipping costs will be.

Rave Coffee

You could definitely learn a lot from Rave Coffee, a UK based coffee retailer.

Website: https://ravecoffee.co.uk/

First the top banner instantly addresses Shipping concerns. They want to ship internationally, so they waste no time in calling out their international shipping calculator and availability of free shipping on certain orders based on volume.

They also offer a 15% discount which they call out. So clearly they are pushing to sell coffee in high volume and the website reflects that.

The simplicity of the website is also instructive. They have a clear call to action (“Discover Our Great Coffee”) and make it quick and easy for customers to buy products.

The next section on their home page consists of reviews and further below that they jump right into their “best selling coffee beans”:

The point here is that within a few seconds and very little scrolling the customer knows that they provide good shipping value, they ship internationally, their coffee and service is reliable, and it’s easy to figure out what coffee to get if you’ve never purchased from them before.

The website is a great example of structuring elements to appeal to new customers who don’t want to spend a lot of time making a purchase.

Their product pages are most impressive as well, for instance

https://ravecoffee.co.uk/collections/best-sellers/products/signature-blend?variant=3149907329050

Clearly they’ve invested in these pages, and they should, since this is the last stop before customers decide to make a purchase. Here’s some of the most interesting elements to call out:

Fairly lengthy product description, incorporating words like “smooth and balanced” along with “gentle citrus”. This is key since the customer doesn’t have an opportunity to try the coffee, so this space should be seen as an opportunity to make the coffee come to life “virtually”.
Shipping and Customer Service information, reminding the customer how affordable the shipping is and that the coffee will be dispatched quickly. They also callout their Customer Service awards to address any hesitancy to purchase.
“Grind” information, which goes a step further and educates the customer on how they can enjoy their coffee, reassuring them that the equipment they have at home will be enough to make the whole bean coffee. This also prevents bad customer experiences for those who might accidentally purchase the coffee without having the right equipment to brew it.

The option to upgrade this from a one time purchase to an ongoing subscription (with 10% discount as an incentive). This amounts essentially to an upsell and is baked into all their product

Coffee Bean Shop

"Coffee Bean Shop" is another coffee website that does things a bit differently than the last.

Website: https://www.coffeebeanshop.co.uk/

Like most good online coffee stores, they lead with messaging about their shipping at the top, but this time what they call out is “Next Day Delivery for Just…”

So they are also leading with FAST shipping.

They also call out “FRESHLY ROASTED COFFEE DISPATCHED THE SAME DAY”. So clearly the appeal here is the coffee is fresh and fast, despite it having been ordered online and shipped.

There are some elements in common with Rave though, in that they also prioritize both reviews and “popular” coffees so they can make a new potential customer feel like this is a safe and low effort purchase:

Further down the page, they once again emphasize the freshness of their coffee, and why that matters:

So this is a good example of a business that understands their primary selling point (fresh coffee beans, flame roasted and shipped out the same day) and have ensured their website consistently builds around that value proposition.

****

For a more comprehensive view of coffee shop website examples, check out the full guide here.

Planning the Coffee Website

In this section we’ll detail how you need to structure the coffee website and how to work through some of the first things you’ll need to consider, like layout and naming the coffee store. We recommend thinking about this part of your website launch earlier on, before you actually start building out products and pages, as this is really the roadmap of the online store that you will end up building out.

You might be in a hurry to get to building your coffee website, but the intent here is to take some time before you even think about your store’s Shopify setup, products, or design.

There are some steps you’ll want to take before you do anything online to actually visualize and think about what the store will do.

I recommend investing a good amount of time in this phase of your online store setup. The better you can plan and visualize what the store will need to look like and contain, the easier and faster the rest of the setup will go.

We’re less at the “online” portion of the guide and more in the “business” portion of the guide.

The intent is to consider what the coffee business will look like and how it will operation, regardless of if it’s online.

This section can be broken down into two parts:

Structuring the Coffee Store and Naming the Coffee Store.

Structuring the Coffee Store

You’ll want to think about what products and information about your coffee business you want to include on the website and which ones you don’t.

In this phase you also want to think about how all the information on the website will relate to each other, and what the end result might look like from a customer’s perspective.

It’s a good idea to also consider what the typical customer journey is for coffee, how they might make decisions on what coffee to buy and how they might want to navigate your online coffee store.

I recommend investing a good amount of time in this phase of your online store setup. The better you can plan the online coffee store and visualize what the store will need to look like and contain, the easier and faster the rest of the setup will go.

At this stage, we want to plan out how the store will be structured, the types of products (in this case the types of coffee) the store will contain, and how all navigation will be setup, so that potential customers can quickly and easily navigate your offerings.

Getting Started

I recommend using a tool mindmeister like to create an outline of what you would like your online coffee store to look like:

The challenge here is to strike a balance between being comprehensive but also being realistic. Ideally you cover off everything that is *essential* to the store, with the understanding that more product categories, more products, and more types of pages will be added later.

For now you want to focus on the core coffee products you are looking to start selling to launch the store, and ensure you have enough of these categories of pages that your online store outline represents what the scope of the what the website will look like.

Once you’ve listed out all the types of coffee related products you want available on your store, the next step will be to use a tool like mindmeister to organize them.

If you have a large number of decaf coffee related products, than it might make sense for that to be a top level product category.

The higher up the you go in the hierarchy the more accessible the products will be to customers, and the more they will make sense throughout your typical customer’s journey. So this becomes and exercise in both organization and prioritization.

Some key questions to ask in this phase are:

What types of coffee products will I sell online? Eg. “Coffee Supplies”, “Coffee Additives”, “Coffee Beans”, “Coffee Related Merchandise”.

What product categories will have the most products within them? For instance you might only sell a few coffee cups as merchandise, so it won’t necessarily make sense to prioritize that page high up in the navigation and structure. Where as if you specialize in espresso coffee and have a lot of products to sell there, than “Espresso Coffee” is likely going to be one of the top pages you’ll built out and make directly accessible from the home page

How do my customers prefer to choose their coffee? Do they pick Coffee based on tasting characteristics like “Acidic” or are they more likely to look for “Dark Roast Coffee”. Of course you might choose to categorize your coffee both ways, but the one with more volume and significance will be the one you prioritize and put at the first level of your overall website structure.

You could take this approach, for instance:

Coffee - Priority 1
Merchandise - Priority 2
Equipment - Priority 2
Coffee Roast Type - Priority 3
Coffee Flavour Notes - Priority 4

The idea is to give some thought to what your priorities are as a business and then examine what your customers priorities are. Once you’ve established that, the mind mapping exercise to structure the website flow will start to come together.

Naming the Online Coffee Store

This is one of the more enjoyable parts of setting up your coffee store online.

If you have an existing in person cafe, then the decision will be fairly straight-forward, as you’ll likely want to mirror you in person cafe name and use it for your online coffee store. This would enable you to also leverage the website as a store front for people looking to visit in person.

That said, there’s some nuances to keep in mind to make sure the name works for both the in person and online version of your cafe, so this portion of the guide will cover off some best practices and considerations for a name that works offline and online.

Another key part of planning the coffee store is choosing the store name. Some guidelines to keep in mind here are to keep the name short and simple, easy to remember, and something that allows you to potentially branch out to other products if you “go live” with a specific selection of coffee products.

Getting Started

If you have a brick and mortar café than you absolutely do want to make sure the name is the same as you are already using.

An exception to this rule is if you might offer a broader selection of products than what you sell at the café, in which case you’ll need to double check that the current café name adequately represents the offerings (present or future) of the online store. For instance, if you’re Café is called something like “Espresso Café”, buy you envision selling non-espresso related coffee, than you may want to consider something like “Espresso and Specialty Coffee”, for instance.

Another thing to keep in mind, especially if your website will double as a representation of your local brick and mortar café – with an eye towards using it to drive foot traffic, is that the name ideally includes the specific city you operate in. So in this case you might want to go with “Espresso and Specialty Coffee – Toronto”.

Above all, the one thing you want to avoid is choosing a bad name for the store. Bad names would be anything that doesn’t instantly reflect the purpose of the store or the product it sells. Something excessively vague or so complicated it makes it difficult to know what the website is about. This is key because your website name will in some fashion show up across search engine listings (eg. Google) and social media pages when it is shared.

Best Practices

The name needs to be at least a little descriptive of the offerings or people will be less likely to click through on social channels and in organic search when it appears. In addition, some good best practices to keep in mind would be:

1. If you want a memorable name, make it easy to remember! Keep it descriptive but also simple. The shorter it is, the easier it will be to remember.

2. Make sure it’s scale-able. Naming the website after your best coffee, even if it’s the only coffee you’ll initially be going to market with, doesn’t give you much room to expand your offerings. So “White Hot Roasted Coffee New York” makes more sense than “Colombian Decaf Cold Brew inc”.

3. Map out a few different variations of your online store name. You’re probably going to want to register a .com with your name, so if you have a name in mind similar to “espressocoffeeshop.com”, well bad news, it’s taken. It’s better to think of a few different names you’d be comfortable with, understanding your first pick might not be available.

If all else fails, and you have writer’s block, you can use Oberlo’s business name generator. Just type in “coffee” and you’ll get some pretty good selections to use, at the very least, as inspiration.

Once you’ve identified a handful of names you like, you can use GoDaddy’s website to see what’s available:

Setting up the Shopify Store

This part of the guide will walk you through the setup and administrative tasks you’ll need to work through to get the store up and running, ensure you can collect payments, ship coffee correctly, and manage inventory. So before building out the website there will be some “back-end” administration stuff that’s specific to selling online to take care of.

This will be a step by step guide walking you through the initial steps you need to take to make a Shopify account along with all the early admin settings you’ll need to adjust within the platform to basically make your online store a “real business”. It includes everything from setting up the URL, to the currency, to the inventory and user permissions.

Registering your Coffee Shopify Store.

Before you can build a coffee website with Shopify, you’ll need to setup an account and go through some administrative tasks like registering, setting up your payment process details, making sure you’re back-end information on shipping is setup (like carriers, rates, and product weights and dimensions) and, finally, you’ll want to setup domains and mail forwarding. This isn’t a joyful process, but it is relatively quick and painless. This guide should help in making it even more straight-forward so you can jump into building out the online cafe.

At this stage in the setup of the coffee shopify store, you’ll be going through the process of creating a shopify store and setting up all the “back-end” (nothing the customer directly see) settings of the website.

Step 1 - Sign up with Shopify

Go to https://www.shopify.com/ and choose “signup”. It will prompt you to start a 90 day free trial:

The initial from just needs to include your email address, a password you create, and the store name.
The store name will create a website for you that is accessible at https://storename.myshopify.com/. This URL is created as something called a “subdomain” on the myshopify.com domain name. All initial store setups are accessible as “store.myshopify.com”.

To move to your own domain, for instance “buycoffeeonline.com” is very easy to do, but comes at an extra cost.

Note: You need to choose your store name very carefully, as it can’t be changed later. What you choose as a store name here will become your online brand and website address (URL) for as long as you have the store (there’s some ways around that, but it gets very complicated).

The next step in the wizard they provide is to fill out a 2nd form with more context on the store:

Note, it will also ask you what types of products you’re selling. This may not seem important, but as a coffee retailer you’ll want to choose “Food and Drink” as Shopify will tailor their advice and news updates (which get integrated into the store) to that specific business niche:

The final step, just includes filling our your billing / payment address information:

Step 2 - Set up your online store password.

The first thing you’ll want to do is setup “password protection”, so that anyone who visits the URL of the store, including potential customers, can only see the password page. Once the online coffee store is built, you can create a password and give it to customers that you want to enter your store or make it publicly available to all. Only the password page of your store is accessible. Other pages, like product pages, are hidden, and search engines won't display these pages in search results.

Steps to take here:

Go to Online Store > Preferences.

Scroll to the Password protection area, and make sure “Enable password” is checked:

After choosing your password, you’ll want to define a “Message for your visitors”. This can be any message you want to show someone that comes across your website before it’s ready. So something like “Opening soon”, or a more elaborate callout detailing the exact date of your online coffee store opening works.

By default Shopify will show something like the following to visitors without a password:

But when you the store owner access it, you’ll see the following:

Step 3 – Setup the coffee store admin settings.

There’s a few things we’ll want to setup in the Shopify admin settings. To navigate there, take the following steps: 1. Go to settings (at the bottom left) 2. Go to General.

Next, you might want to specify the store name. This is useful in cases where you want the coffee store name to be different than the coffee store web address (URL). So for instance, if you initially set the store name and URL to be https://mycoffeestore.myshopify.com/, but want the actual name of the brand to be “My Awesome Coffee Store”, in “Store Details” you get the option to put in a new store name:

Next, you’ll want to update the “Legal name of business”:

As Shopify explains, the legal name and address is what will appear on all invoices/receipts.

Within this same section (Settings > General), you’ll also want to confirm your timezone is properly setup:

This can impact Shopify’s internal analytics, which is important because it will define the exact times coffee orders etcs are placed and fulfillment is addressed.

Finally, if you continue scrolling you’ll also have the option to specify your currency. This is also important as it defined the currency that your coffee will be sold in, and it can only be changed until you’ve made your first sale through the store.

To be clear, people who purchase your coffee can check out only in the currency set up in these settings, but you can configure Shopify to show multiple currency types to customers based on their location, and ultimately Shopify will convert the currency to what you defined here.

Setup up Payment Processing w/ Shopify.

At this stage of setting up the coffee shopify store, we’ll be walking you through setting up the payment processing to make sure you customers can pay you and, in turn, Shopify can drive revenue from your online coffee store.

Shopify offers their own “Shopify Payments” processing so there’s no need to source or use some other payment provider. You’re pretty much automatically set up to accept all major payment methods as soon as you create your Shopify store. That said, there’s some configuration involved, so I'll walk you through the needed steps in this section.

Set Payments Up

Go to “Settings” > “Payments”:

From here you’ll need to click on “Complete Shopify Payments setup”

You’ll need to complete the form to detail your business type, your BN number, product details, and Banking information. This will enable you to process payments from the following providers:

You’ll need to complete the form to detail your business type, your BN number, product details, and Banking information. This will enable you to process payments from the following provider:

You’ll see from the above list that your store can also enable accelerated checkouts through Apple Pay and Google Pay. You’ll likely want to leave all default payment options selected, although Shopify does give you the option to uncheck any:

Finally, if you have an account with a different payment provider than the ones setup by default, like Moneris, you can go to “third party payment providers” to enable those:

Once you’ve setup the payment processing, you’ll be able to view your coffee store’s payouts within the same section:

Payouts (and refunds or adjustments) will be listed here:

Setting up Shipping to Delivery Your Coffee.

In this section we’ll guide you through the process of thinking through and configuring shipping options if you’re looking to deliver coffee domestically and/or internationally. Shipping with a Coffee Shopify store is easy enough, as long as you’ve considered all the potential options you’ll want to make available for customers.

Decisions about Shipping

Before getting started, it’s important to think through the ways in which you will offer shipping.

Specifically:

Locations:

Decide where you’re going to be shipping. It’s tempting to think “anywhere they will buy my coffee!” but of course there are implications like what shipping options your preferred shipping carrier provides, how much it will cost to ship to locations that are very far from your fulfillment center (fancy word for where your coffee ships from), if you intend to pass on those shipping costs etc..

Shipping Carriers:

Decide what shipping carrier you will use and when. This is important as the carrier you choose will determine the shipping rates and services you will be able to offer. Of course you can choose multiple different carriers depending on where the coffee will ship to.

Shipping Services:

Decide what services you will use / offer to customers. This might take careful planning, because some carriers might offer super fast / express shipping, but they charge so much for it no one is going to want to pay the rate. Conversely, some carriers offer inexpensive shipping but they don’t provide tracking information. Most customers will expect to be able to track their package so if this option is chosen you’ll need to make sure the website checkout process makes it clear the option does not include tracking.

Shipping Fees:

Here you’ll need to decide who will be absorbing the shipping costs, you or your customers? Or both? You’ll also want to decide if there are cases where you want to offer discounts or free shipping as an exception based on the price of the order, the volume of the order, or the location the order will be shipped to.

Setting Things Up

Once those decisions have been thought through, the first step to get your shipping setup is to navigate to “Settings” and choose “Shipping and Delivery”.

Then you’ll go to “Manage Rates” and then “Create Shipping Zone”.

To begin, let’s say you know you will offer shipping to two countries. Canada and the U.S. One option would be to search for each of them and create one Shipping Zone.

So the zone will appear as follows:

The next step would be to setup a Shipping Rate. Click “Add Rate” and you’ll be asked if you want to setup your own rates or “use a carrier or app to calculate..”.

Setting up your own rates might make sense, especially in cases where you already have a business account with a shipping provider and have a good sense of how much it costs you to ship and you also know how much of the shipping costs you want to pass on to customers. This is also the best option if, for instance, you only want to charge customers X$ amount for shipping, regardless of what the actual shipping costs are to you. Another good example of how this option could be helpful is if you want to offer free shipping. So you’d simply add your own rate and set it to 0$ for the zone you just created.

Alternatively, you can “Use Carrier or App” and get shipping services populated and rates calculated automatically. According to Shopify, “If you're in United States, then USPS rates are added by default. If you're in Canada, then Canada Post rates are added by default. If you're in Australia, then flat rates are added by default”.

For example if we were shipping from Canada, then we’d see “Canada Post” as a shipping carrier along with the following information:

A few things to note.

First, as you can see this shipping carrier comes with discounted rates from Shopify. Essentially Shopify has a partnership with Canada Post that enables them to offer Canada Post shipping labels at a discounted cost. You can read more about their discounted rates here.

As you’ll see you also have a number of services pre-populated, so you can check off the ones that you know you will be using and want to offer to customers. Since we chose both Canada and the U.S. the shipping services include options that are specific to both countries (eg “Expedited Parcel” and “Expedited Parcel USA”).

Finally, you can include a handling fee as either a flat amount or %, so customers are charged whatever amount extra you define on each shipment. This is useful in cases where you want to offset the costs of your end to end fulfillment process which will almost certainly include the time and material it takes to appropriate package coffee and ship it properly.

The next step to setting up shipping, especially in cases where you’re counting on Shopify to pull in the automated shipping rates from the carrier, is to define the weight and dimensions of the packages you will be sending your coffee to customers in. The rates Shopify pulls in are based on the customer address and the weight and dimensions of their coffee order, so this information is needed to properly provide those rates at checkout.

To do this, return to the Shipping Settings:

If you scroll down on the Shipping Setting page you’ll see a section for “Packages”. Click “Add Package” and from here the steps are pretty intuitive.

Just be sure to complete this step as accurately as possible, and then make sure the “package” settings you defined are set as the default.

Of course, very often you’ll want to consider selling you coffee beans in different size packages. If you had two packages, for instance 250g and 1.5kg, you’d need to define two different package types within these settings.

Finally, if you want to setup shipping discounts, you can explore the following options:

Go to Settings > Shipping and Delivery > Manage Rates > Choose “Add New Rate”.

From that screen you’ll have the options to select “Setup your own rates”. Name your rate “Free Shipping”, for example, and set the price to $0.00. Then click “add conditions” and you can set a minimum sales price for this new rate to apply:

As you may note you also have the option to apply the rate based on “item weight”. This is how you can set Shopify up to offer things like “Free Shipping on Orders > $100” or “Free Shipping when you order 2 or more bags of Coffee”.

Setup domains and mail forwarding for the Coffee Store w/ Shopify.

The final portion of the setup will be to create a domain for the Shopify Coffee Store and also setup some mail-forward rules that Shopify facilitates.

When you initially setup the online coffee store, Shopify will make your website accessible at a URL like coffeestore.myshopify.com.

Some stores choose to stay at that type of address (for instance https://bakerskateboards.myshopify.com/), but most likely you’ll find it worthwhile to register a domain that excluded the “myshopify” portion of the URL.

Of course even after you register and use a proper domain the coffeestore.myshopify.com URL will still be used to log into your store and identify your account.

Ultimately, you’ll want your online coffee store to be accessible at a simpler URL that you own so that the domain name / URL of the store matches the name of your business.

Option 1 - Buy a Domain Through Shopify

You have two options to register a domain.

First, you can buy the domain through Shopify or you can buy one from a third party and transfer the domain after. Not surprisingly, Shopify makes option 1 fairly easy.

Go to Online Store > Domains. Click “Buy new domain”.

Enter the domain name that you want to buy, and Shopify will show you what’s available:

Click Buy next to the domain that you want to buy. So that part of things couldn’t be simpler.

Option 2 - Transfer a Domain to Shopify

If, on the other hand you want to buy a domain from another provider (or if you already registered a domain or had a different website for your café), Shopify affords you the following two options:

Transfer your domain Shopify – This method allows you to point an existing domain to your Shopify store while ALSO moving the management of your domain to Shopify. So that means payments and settings associated with your domain will thereafter be managed through Shopify’s interface. Also worth noting that Shopify provides extensive documentation on transferring a domain.

Connect your domain to Shopify – This method points your online store’s domain to your Shopify store, but doesn’t transfer the management of the domain to shopify. So if, for example, you had bought a domain through GoDaddy, you would still need to log in to

GoDaddy’s website to manage your domains setting and payments etc.
The final essential setup you’ll want to complete in the “domain” settings is email forwarding. This is useful in cases where you want to be able to display a professional and official email address to potential customers, one that contains your website’s domain name, but are already using a different email for business related concerns.

This is a common scenario where a café owner might be using their @gmail.com email address for business but wants to tell customers they can email them as [email protected], for instance. Email forwarding, in this example will allow you to use [email protected] as your official email on the website, but behind the scenes the address will just forward any emails to whatever inbox you specific.

The process looks like this:

Email Forwarding

It might seem like a small thing, but it’s worth the effort to set this up as using a proper email that reflects the website (as opposed to a gmail account or anything that signals a personal email) is important in terms of building trust when selling coffee online.

Adding Products and Collections to the Online Coffee Store

Here we’ll document how to use Shopify to add in your coffee products, inventory, and collections pages (basically categories of coffee). We’ll also talk about building product pages that look appealing and convert effectively. Aside from the homepage, this portion of the website will be one of the most important. It’s unfortunately not as simple as describing the product and uploading a photo, to effectively sell the coffee you need to build out product pages that are compelling and also overcome any potential barriers to purchase (like Shipping, returns etc..).

It’s helpful to add products in the earlier stages of building your website because the nature of your coffee and the coffee images you use will help determine the look and feel of the website later on.

It’s also worth mentioning that Shopify uses “templates” to bring your coffee and coffee related products to life online: Product Pages and Collection Pages.

Product pages are pretty self explanatory, but collection pages are basically just types of products you can define in cases where having a single page that lists out all your products within a logical category makes sense. For instance you could have a “Decaf Coffee” collection page that would list out all specific decaf coffee you sell.

Adding Coffee Products

This section will be a walkthrough on how to employ the Shopify platform to build out a coffee product page, as well as best practices with respect to product titles and descriptions. This is crucial as all the content used in this portion of the website is going to be key getting your most important pages to show up in search results, while also being the best / last chance you have to convince potential customers to buy your coffee.

The process to create the product pages and collections is fairly straightforward. Shopify knows this type of page is going to be the engine and purpose of the website, so it provides an interface that is both simple and also flexible enough to be suitable for a variety of different products, including coffee.

Setting Up the Pages

Go to Products > All products to begin adding your coffee to the website.

At the top right you’ll click on “Add Product”

The next page you’ll be brought to will allow you to write your product name / title, description, upload your coffee related media (images or video), define the pricing per bag of coffee, inventory information (SKUs and Barcodes), quantity, shipping information, and what Shopify calls “variants” – for those cases where you sell coffee in different volumes.

Product pages are really your “money” pages. Everything you do to market your coffee online and through your website aims to get potential customers here. So building out your product page for each type of coffee you sell needs to consider that this is where you can make your final and most important sales pitch for the coffee. So it’s important to share all the information and details you can upfront (now!) about the product so customers feel good about their decision to make the purchase.

Those details could include:

Cost and expected delivery times for shipping. Customers don’t want to go through an online checkout process to find out if and how much they pay for shipping. They also want to know when they can expect to receive the coffee before they even begin to consider purchasing it.

More obviously, customers want to know the price of the coffee and, if you sell it in different volumes, they want to know how the price compares if they buy a larger bag vs a smaller bag.

Also, since people consume coffee “by the cup”, but you obviously can’t sell it that way online, I’d recommend telling people how many cups of coffee each bag will give them.

Potential customers can’t taste your coffee so, above all, ensure you use this space as an opportunity to bring your coffee to life.

Defining the Product Title

The product title will be the first thing customers see on the product page and it will also be what gets pulled into your homepage if you showcase any collections. Ideally the title will be as descriptive of the coffee as possible, while also being as concise as possible.

You can use the product description field or variants to describe other aspects of the coffee, so the title is really the pace for the essentials. The coffee name obviously needs to be included, but I also recommend including the most important differentiators. For a third wave café that might mean including tasting notes, like “a splash of citrus with a sweet aftertaste”, whereas for other types of cafes you may want to lead with the roast type, specifying if it’s a dark roast vs light roast coffee.

The best way to think about it is to ask yourself, what is the first question customers usually ask me about a coffee before deciding to order it?

Defining the Product Description

Product descriptions offer more space and so this content is an opportunity to really make the coffee come to life. This is also an opportunity to not only explain to customers why they should buy the coffee, but why they should buy coffee from you. Home Depot are not at all coffee related, but they do eCommerce very, very well so consider their product description for wooden blinds:

Note, the description does a great job of calling out both features and benefits (I’ve highlighted the benefits). They don’t just explain what features the blinds have, they go a step further and make it clear how those features benefit the customer.

If you were selling a great tasting decaf coffee, for instance, it would make sense to describe that the coffee tastes great while being decaffeinated (feature!) and allows you to enjoy an amazing digestif / after supper coffee without being unable to sleep at night (benefit!).

Standardize the approach

Once you’ve considered all the elements you’ll want to include on your product pages, it might be helpful to put together a template (for each product type) that you can fill in as you add each product.

For instance:

Product Type: Coffee
Product Title (be concise but descriptive):
Price:
Variants (all sizes of bags offered:
Product Description (Describe coffee, describe benefits, make coffee flavour as “real” as possible):
Business / Product Value (remind customers of what makes ordering this specific coffee from you so special):

Once you’ve established a checklist for each product type you have, build the content out in word or something similar first, and then start to build the product pages for your coffee.

Coffee Product Photos

This section is nearly as important as the last. Coffee might not seem to lend itself well to creating compelling visuals, but of course there’s always a way to use photography to market any product. We’ll go through some best practices on product photography in general, as well as product photo best practices specific to coffee.

Even just a simple photo of a coffee bag is fine, but the photo lighting and clarity is still very important. Something else to consider is to try to maintain the same aspect ratio (i.e. the ratio between the width and height) across all the photos so that they have a consistent size.

Another tip is that, especially when it comes to images of coffee bags, transparent backgrounds work really well. I’d recommend using a great high quality picture of a coffee bag (with a hopefully elegant or distinct design) shot against a solid / boring background, and then employ a tool or a website like remove.bg to remove the background.

It’s close to impossible to complete your setup of the coffee product and collection pages without adding photos.

The media section of the product page will let you upload images, animated GIFs, and videos. Bearing in mind that in the online world, we need all the help we can get as far as getting the customer to really imagine the coffee, without being able to taste it, and we cannot overstate how important great product photography is.

It’s close to impossible to complete your setup of the coffee product and collection pages without adding photos. The media section of the product page will let you upload images, animated GIFs, and videos. Bearing in mind that in the online world, we need all the help we can get as far as getting the customer to really imagine the coffee, without being able to taste it, and we cannot overstate how important great product photography is.

You don’t need *many* images of each product, but you do want to ensure the images you do include are high-quality photos that clearly outline the dimensions, size, and quality of the package customers will receive. Even just a simple photo of a coffee bag is fine, but the photo lighting and clarity is still very important. Something else to consider is to try to maintain the same aspect ratio (i.e. the ratio between the width and height) across all the photos so that they have a consistent size.

Adding Coffee Product Photos

Adding the photos is simple enough, Go back to Products > Choose one of the products you created. Click Add media and select the file that you want to upload:

Drag and drop the file that you want to uploaded.

According to Shopify, “If you add more than one media item for a product, then the largest one shown on your product's details page is the product's main media item. You can set a new main media item by dragging a different media item to its place. You can also sort the other media items by dragging them”.

Choosing Compelling Product Photos

The dilemma with creating compelling images of your coffee is that it can be hard to distinguish them and hard to communicate why they might be better appreciated by the consumer. After all, all coffee beans more or less look alike and just the packaging might not tell enough of a story or illustrate the flavour very well.

One approach I recommend is to setup the coffee product photography in such a way as to communicate all the flavours. So extend the photos to not only include the coffee itself but any other visual aids that make sense. For instance, if your coffee has a sweet berry-like after taste, than you can include some photos of berries as well. For instance, the following photo, which compares Tea to Coffee, is an excellent example:

Note the inclusion of bits of lemon along with mint leaves etc.. that instantly communicate the experience of drinking a cup.

You would probably want to stick to a boring but clean and simple photo of your coffee package against a nondescript background as your primary product photos, but since Shopify allows you to add multiple photos per product, we’d recommend including at least one of these types to better sell the coffee and flavour.

Adding Pricing and Inventory for the Coffee Products

This is pretty straight forward, Shopify will always show the price of each product / coffee when you populate it. Like the product title, the price will be apparent on both the product page and any parts of your website that pull in the product or collection.

You might be wondering what the “compare at price” field is for? Basically this field can be used to showcase the “typical” coffee pricing vs your sales pricing – if you are having a sale.

Also, it’s important to note how this works with product “variants”. Basically Shopify allows you to create variants to support different version of the same product, if you’re selling coffee that basically means you’re going to end up using product variants to offer your coffee in different amounts.

If you had two bags of coffee to sell, on 340g and one 2.2kg you would define the variants as follows:

What’s important to know at this stage is that each product variant has its own price and inventory settings.

Product Inventory

Speaking of inventory, the next part of the Shopify form will ask you to define some settings relating to the product inventory. These settings are specific to each product.

First, you’ll need to define how much quantity of a specific coffee you have available to sell.

I’d recommend initially setting up a small quantity so that if things sell faster than anticipated you don’t have to worry about not being able to fulfill orders. It’s better to say “sold out” then to have new customers order coffee that they expect delivered in a few days and only have it shipped out to them a few weeks later. A customer who sees a coffee is “Sold out” might come back, but a customer who had a bad purchase experience with you probably won’t.

Select “track quantity” and unselect “Continue selling when out of stock” to stay on the safe side.

Alternatively, if it really doesn’t take long for you to roast and package new coffee batches, then feel free to check “Continue selling when out of stock”.

If you have a need to manage your product inventory with SKUs and Barcodes that Shopify will also facilitate that as you can see from the above screenshot.

Another important implication of inventory tracking is it enables you to hide any types of coffee that have been sold out. If you navigate to Collections > and choose a collection where your coffee is displayed, you’ll find an option to create collections based on conditions:

One of the easiest conditions you can setup is to simply say “inventory stock is greater than 0”

So as soon as a specific coffee is sold out, the rule will ensure it does not appear in whatever “collection” you have it appearing for.

Shipping, Customs, and Availability for Coffee Products in Shopify

Shopify has a number of built in features that we’ll describe which facilitate all aspects of shipping your coffee, including setting up harmonized tax codes, product inventory availability, and other essential requirements to quickly and reliably be able to use your online coffee store with whatever fulfillment and shipping processes you can setup.

At this stage, you’ve hopefully gone through the initial setup of your coffee product pages, included photos, and defined prices etc.. The shipping section details will be used to calculate shipping rates and, if you use the Shopify printing labels, these details will also be used for the shipping labels on each order.

Configuring the Shopify Shipping Parameters

Since you’re selling coffee, you’ll want to check “This a physical product” and enter the weight of one bag on its own. The weight you enter here is not only important in terms of telling the customer how much of the product you are selling, but in terms of calculating shipping rates.

If you end up using Shopify’s automated shipping rates (and discount), then this is the weight it will use when it automatically pulls in the shipping carrier rates and adds that charge to the customer as checkout (assuming you are not using free shipping for your coffee).

As previously mentioned, if you offer the coffee in different amounts, then you can use product variants to define those at different entities with their own weights, prices, and inventory levels. You can also use this section to enter customs information, which is important in the case that you want to sell and ship coffee internationally.

You can look up the Harmonized System code on a website like https://www.flexport.com/data/hs-code/0-all-commodities. If you’re selling coffee you have a few options:

Not the code changes depending on if you are selling to beans roasted vs not roasted and caffeinated vs decaffeinated. The most important step, arguably, is to ensure you define your product availability. At the top right you’ll see an option for “product availability”. Click “Manage” and make sure you have “Online Store” checked:

Adding Pages to the Coffee Website

In this section we’ll go through the steps needed to add non product specific pages, what types of pages those should be, and how they are structured by Shopify. Adding pages, that are not products, is essential. It might not seem so, but people need to know who they are buying coffee from, especially if they are being asked to buy online - where trust isn’t as easily communicated as it is when you are dealing with people in person.

Ok, the products, product pages, and collections are important when building the coffee website – but there absolutely has to be other pages on your website.

Why?

The biggest thing to keep in mind when selling online is that your potential customers have no idea who you are. They don’t know if they’ve come across a scam website, a fly by night operation, or someone who hasn’t thought through their business operations and fulfillment processes.

Before someone considers making a purchase they really want to be able to trust the vendor. Most of your other pages need to communicate, sometimes explicitly, that you can be relied upon to sell quality merchandise, deliver on your promise, and ultimately ensure the customer is satisfied.

Building Out the Pages

Building out the pages is simple, you’ll just need to go to Online Store > Pages:

The priority pages to create are as follows:

Contact Page

It might seem obvious, but you want to make it clear to customers how they can reach you. Including various contact methods (mail, phone, email etc..) also helps to illustrate that your website is an extension of a serious commitment to do reliable business and provide customer service. This type of page might seem straight-forward (and it is) but to get the most out of it I also recommend adding an FAQ to it. This might need to come later, as you get better acquainted with the types of questions or concerns people bring up when they contact you, but eventually building out a FAQ section specific to the concerns people often get in touch for is a benefit to both you and your customers. For instance if people often ask if you have decaf coffee available (and you don’t) then calling that out here also makes sense. That said, we still recommend building out a separate FAQ page as well.

About Page

The about page is an opportunity to sell customers on your brand/business while also instilling trust. You really want to provide as much transparency as possible about your business, while also tailoring the content to things the customer might care about. So it might be helpful to write out content that answers the following questions a customer might have: Who are you? (your personal story, your brand’s story etc..) Can you do anything for me? (what customer needs drive your business, why your business exists) Why should I trust you? (how long you’ve been operating, number of customers served, testimonials etc..)

FAQ Page

I recommend creating an FAQ page as another way to instill trust, but also as a way to head off customer service issues. If you’ve been operating an in person café for sometime definitely feel free to leverage that experience to create a list of common questions or concerns people have related to your coffee. The idea is to help customers avoid having to spend time reaching out to you and waiting for your reply, so a good FAQ page will save time for all parties.

Legal Pages

Here I’m referring to pages like a Privacy Policy, a Shipping Policy, a Refund Policy and a Terms of Service. Again, the purpose is always to earn the customers trust. Shopify understands the importance of these types of pages so much they actually provide boilerplate text for you at the following resources:

Terms and Conditions generator

Refund Policy Generator

When crafting a Shipping policy, keep in mind what you are trying to do is set expectations. You want to lay out all the potential shipping costs (if you don’t offer free shipping), and the regions you deliver to, and all the expected wait times. That information can really vary depending on the customer locations, but it’s very important to document everything as clearly and concisely as possible.

Aside from trust, Shipping is one of the single most significant barriers a business needs to contend with when they sell online, and that holds true for businesses of just about any size. You really want to communicate to customers that you have thought through all your logistics and shipping processes and that they can trust you to tell them when they can expect to receive their coffee.

Defining the Look and Feel of the Coffee Website

This part of the guide considers everything you need to know about designing a coffee website that looks great, represents your brand, and works quickly and effectively to help you sell as much coffee as possible. Shopify allows you to use and purchase templates for your website, but there will always be some amount of customization required.

When it comes to web design to support an eCommerce website, things can get pretty complicated, even for a regular coffee website.

Shopify simplifies this by setting things up so that their stores all share the same essential design framework, with enough customization available to ensure the website is still distinct and the overall aesthetic can still be tailored to the brand or café’s style.

The way this works is Shopify builds out pages on the website in the following fashion:

Choosing the Shopify Theme

Each block you see above represents a specific template that Shopify provides every website. You’ll only have one “home” page, but you may have several iterations of each of the other page templates. For instance you’ll likely have several product pages that will be used for specific coffee beans you’re selling, and each product page will use the same “Product” template, which means they will look consistent in terms of formatting and functionality. Each page template’s look and feel, along with their associated functionality is mostly determined by the Shopify theme you choose. A theme is a template that defines the overall look and feel of a website, including the size of different elements, the fonts used, the overall layout and the formatting. Themes can be customized, but the closer you are to choosing a Theme that looks exactly as you’d like the website to look, the less work there will be to tweak it further.

By default, Shopify will first step your store with a very basic free theme. You'll find most themes require some small customizations, but choosing a theme that best meets your coffee website's needs in terms of both layout and functionality will really save you the time you'd otherwise have to put into changing / customizing things. Alternative themes are thankfully available, to provide more varied looks and features for the online store.

How to Pick Your Coffee Theme

By default, Shopify will first step your store with a very basic free theme. If you navigate to “Online Store” > “Themes” you’ll see whichever one has been setup:

Further down, you’ll have the option to choose from a library of Free or Paid themes by clicking on either button:

Now you might be wondering if you need to pay for a theme or use on of Shopify’s free ones.

I do recommend using a paid theme for a few reasons.

First, Shopify only offers 9 Free themes vs 64 (at the time of this writing) paid themes, so the odds of finding a theme that meets all your design and functionality needs are much higher if you include the paid themes.

Second, the paid themes cost, at most, $180. This is a one-time cost, as opposed to a monthly re-occurring, so in the longterm it’s a worthwhile investment.

Finally, if you choose a free theme and then customize it, you’ll likely incur additional costs to pay someone who can code or, if you do It yourself, you’ll end up sinking quite a few hours that could be better spent in other areas of your business.

I’ve looked through many, if not all, of the available themes and would recommend a few. But the biggest determining factor in your choice here is the number of products you will be selling. The choice of Shopify theme for a website that sells four different types of coffee vs 40 different types of coffee varies considerably.

Considerations in Choosing a Theme

When choosing a theme, it’s important not to pick one based on colors or fonts, since those can be changed quite easily. We’re mostly looking for something that can accommodate the typical online coffee shop, in terms of both design and functionality.

So, for instance, you’re looking for something that:

1. Can make your products easy to find and purchase. This matters because some themes do a good job of this only when the product selection is limited. So if you have only 5 products vs 25 products your choice of theme might vary.

2. Would look good when you upload coffee specific photography (product photos etc..). Some themes are really made for service or tech industries, and don’t always accommodate coffee related product images in a way that looks elegant.

3. Has features that you will need. For instance if you have a very large coffee related product catalogue, you’re going to want a Theme that supports features like advanced product filtering or multi column menus, so the navigation makes it easy for customers to sort through your many products.

There’s other considerations, but the ideal approach is to just upload the theme you are considering to your store so that you can play around with it yourself and then decide if it works. All themes have a “try” button you can use:

Single Product Website Themes

For a single product coffee website (let’s say you are doing one big launch), I’d recommend something like “Launch”. The theme costs $180 and can be previewed here: https://themes.shopify.com/themes/launch/styles/cool/preview

Themes for Small Coffee Websites (4-20 Products)

For a coffee store with 4-10 offerings, I would consider any of the following: Venue (probably the best choice).

Preview: https://themes.shopify.com/themes/venue/styles/evening/preview

Colors (but you really need to have the high quality product images to make it work).

Preview: https://themes.shopify.com/themes/colors/styles/generic/preview

Colors (but you really need to have the high quality product images to make it work).

Preview: https://themes.shopify.com/themes/colors/styles/generic/preview

Grid. Preview: https://themes.shopify.com/themes/grid/styles/bright/preview

Themes for Large Coffee Product Collections (20-50 Products)

Now, if you have a broader product selection, like 20-50 Coffee types, a theme like Editions would work well.

Preview: https://themes.shopify.com/themes/editions/styles/modern/preview

Customizing the Shopify Theme

As mentioned above, customization is simple and in most cases very necessary, even if you choose a theme / template that really suits your coffee business. We’ve included this quick how to guide to help you better understand some of the more basic technical concepts as well as some best practices to consider in customizing the online store.

No matter how good a shopify theme you choose, it’s almost certain that you will want to customize the theme you select. The customizations that are easily available extend to content, layout, typography, and colors. I’d say typically 80% of this can be done without any code, and that’s typically enough for more coffee retailers.

Creating a Backup of the Theme
Before changing the theme, it’s a good idea to create a “backup” of it. This can be done by duplicating it as follows:

From Shopify admin, go to Online Store > Themes.

For the theme that you want to duplicate, click Actions > Duplicate.

If you make any changes and can’t find a way to fix them, you can just go back to the same section, choose the “Copy” of the theme you duplicated, and then go to Actions > Publish:

Types of Customizations

Customizations call into 2 basic categories, basic and advanced. Basic customizations will likely cover off all your needs, or at least enough to get your online coffee shop launched. Advanced customizations are useful when you decide your store needs to look a little more slick to better differentiate or to better represent the overall brand.

Basic customizations:
Designing the homepage.
Designing the product pages and uploading product images.
Upload your logo.
Customize fonts.
Customize colour schemes.
Top page banner image or slideshow.
Featured products.
Navigation menus.
Adding a newsletter signup.
Adding Social Media Links.
The actual products and content (obviously!)

More advanced customizations:

Anything that fundamentally changes the layout and design. For instance, having the homepage function as a an elaborate single product store (something like https://getsnooz.com/) assuming you didn’t choose a single product theme.
Adding extra functionality like a sales countdown timer.
Adding popups and notifications.
Adding additional currency selection options.
Building fancy FAQ “accordion” layouts:

Basic Shopify Theme Customizations

Most basic customizations can be done easily through the Shopify interface. You’ll want to go to Online Store > Themes > Customize:

You’ll initially be brought to an interface similar to the following:

This interface allows you to change the theme settings and templates on the left while providing a very quick preview of what the website will look like after each change on the right. Moreover, at the top right you’ll have the option to select a different “device” to use for the preview, so you can also make sure the website looks right on tablets and mobile:

Finally, the way this interface works, each page “template” can be customized separately. By default, the first page chosen is the homepage, but you can use the drop down menu at the top left to choose other page templates:

Also bear in mind that you can make customizations that will only apply to one page at a time (if you desire). For instance, you may customize your “Product Pages” template one way, but still have the ability to customize one specific product page differently as it will also show in the above dropdown once the page is published.

Generally speaking, any options you don’t find within this interface will require changes to the HTML, CSS, or Liquid PHP code that Shopify employs.

Customizing the Home Page Template

The home page is arguably going to be the most important page on your coffee website, so details on all the ways it can be customized to not only look pretty but help make more sales are important. It will also be helpful to review some of the better examples of well designed homepages to ensure your website stays competitive.

The first step in customizing the online store is going to be focusing on the homepage. It’s a priority as far as the customer experience and so Shopify has built in a large number of options and settings that you can use to tailor the look, feel, and functionality.

The Basics of Homepage Customization

To being customizing you’ll need to take the following steps:

1. Go to “online store” > “Themes” and then “Customize”

2. Next, you’ll want to go to “Theme Settings”

From this menu you can choose your Colours, Fonts (typography), and the basic cosmetic aspects of the website. You’re defining the consistent look and feel of your online coffee brand, as many of these options will apply across the entire website.

To learn more about colour palettes I recommend reading “webstaurantstore’s” blog article here. They talk about choosing a colours for the décor of a brick and mortar café, but the same logic can be applied to your online coffee shop. For instance, they write:

“Blue reduces customers' appetites, but it makes them thirsty.” And “Brown is an earthy color that helps guests relax and feel comfortable. It can also give customers a sense of support and stability, and it can even convince guests to come back as repeat customers.”

I’d also recommend using a website like https://coolors.co/ to generate a colour palette if you’re not super design minded.

For fonts, you’d do well to employ a tool like https://wordmark.it/ to test out a bunch of fonts until you find one that communicates trust and professionalism, while still being consistent with your overall brand.

More Detailed Sections on the Homepage

Once these are tailored to your liking, you’ll want to return to “Sections”. Any customizations applied here only impact specific page types. Be default, the first page type selected will be the “Home page”:

Each time you use the dropdown to select a different page “type”, the options within “Sections” will be specific to that type of page.

The first option you might see, depending on your theme, is the sidebar menu. The menu applies to how the website navigation will be displayed on mobile devices or tablets. So, basically, once the navigation collapses into these three bars:

Clicking on those bars will trigger a menu to appear on the side of the website, transforming it into a “sidebar” menu.

Customize the Header Logo

The other sections will vary depending on the Theme you chose as well. But there’s some important things to add / change here, starting with the “Header”. Once you choose “Header” you’ll the first change to make is to upload an image of the website / coffee store logo:

Homepage Slider

Next, most online stores will choose to have a top banner or slideshow image immediately under the website header. This section often gets used as a bit of a vanity play, as online coffee shops will focus on putting something slick, or pretty looking here and call it a day.

That said, the section can and should serve an important function. This is the first place most potential customers eyeballs are going to be drawn to when they visit the website, so the aim should be to use the space to succinctly communicate what the coffee shop is about, and how it can help them.

The section should be used to add an image that communicates the brand’s unique strengths, and text that instantly tells the viewer what the website offers.

So, for instance, https://www.craftcoffee.com/ does a good job effectively using this space:

First, they call out exactly what they offer in “Craft Coffee Subscriptions”. So we know precisely what we can get from browsing their website. They briefly include the value proposition of “better coffee for less money” along with very short bullet points that call out free shipping, no commitment, and price match promise. There’s also a clear call to action for people to “Learn More” which makes it easy for the website visitor to understand the logical next step in the journey.

Homepage Featured Collection

The next important section to define on the home page will be the featured collection. Shopify will automatically import products into this section based on what you define to be your featured “collection”. Setting up Collections will be defined later.

I’d typically recommend including this section high up on the page, immediately after the slideshow / top banner so you can get your products out in front early. Coffee isn’t a complicated product, so letting website visitors know early that you have coffee to sell makes sense.

Other Homepage Sections

The remaining sections on the homepage can be pretty much whatever you want, depending on the purpose of the website and the things you can offer coffee customers. Most pages will include something like the following:

A block of content that mentions your in person café (if you have one). It’s good to signal to customers and search engines that your website is an extension of a real brick and mortar business. It tells potential customers that you have a legitimate operation, a history of delivering the product, and are capable of handling various customer service needs.

Other common opportunities for content would include anything that instills trust in your business and the quality of your coffee. Testimonials, reviews, pictures of the coffee (or roasting process), and/or an explanation of what makes your coffee so much better than competitors.

Finally, most Shopify themes will be setup to add a section for an email newsletter signup and a “footer”. The email newsletter signup is typically included because it never hurts to capture email addresses that you can use for marketing purposes later.

The footer is standard on all websites and is a good / logical place to link out to pages that are important but not necessarily the ones you want to include in the main navigation of the website, which is usually informed more by what the customer is most likely to want to do on your website. Typical footer links include things like a link to a sitemap for the website, terms and conditions pages, and contact information.

Also it’s important to remember that you can rearrange, add, remove, or hide all sections on your homepage. Each section will be customizable to the extent of being able to define the size, images, content, alignment etc.. based on the nature of the section type. The full list of possible homepage sections for most themes includes:

Blog Posts
Collection Lists
Featured Collection
Image grid with text
Image Slideshow
Image with text
Image with text overlay
Logo List
Slideshow
Featured Product
Events
Newsletter
Rich textTestimonials
Custom
HTML

Customizing Product Page Templates

The product page is at least the 2nd most important page on the website as it functions as your last chance, typically, to convince your customers to purchase the coffee you sell. Shopify has also ensured that as a page type, it’s one of those pages where you have the most features and functionality that can be added. We’ll summarize everything you need to know about designing a high converting product page to sell your coffee.

As mentioned in previous sections, each page template comes with its own customization options, so in addition to the homepage you’ll definitely want to spend some time customizing the template of the typical “product pages”.

Getting Started

You can customize the look and feel of all the product pages in the same fashion as you would the homepage. After choosing “Product Pages” from the dropdown, your typical options (they var by theme) will look as follows:

The first thing you might notice is many of the options are similar to the homepage. By default once you’ve set them up on the homepage they will be carried over to all the other page “types”, like the product page, but if for whatever reason you want to customize them and make them different on this page type you can do so through this same Shopify interface.

By way of example, the following screenshot illustrates some of the options that might be available to customize, depending on the theme chosen:

As you can see, the options include defining how the product variants (the different amounts of coffee packages you might offer) can be selected on the product page. Other options include calling out things like certain types of coffee being low in stock (a good way to communicate some urgency and improve sales).

Other product page “options” will relate to the media on the page:

So you will be able to customize the look of the product image (or video) and define how much space it takes up on the page, for example.

Product Collections Pages

Other theme and customizing considerations that are specific to product pages include the layout, the fonts and colours (if you want them to be different than the overall theme) and product image sizes.
Other page types, like Collections pages, are equally important when it comes to customizing their appearance. As previously mentioned, generally speaking the customization options you have available for all page types (Home page, product, collections etc..) depend on your choice of Theme. That’s why, more than the specific colours etc.. you see displayed in a theme demo, your choice of theme will depend more on the functions and customizations it makes available.

To be clear, Shopify will offer customization of two “collections” related templates. One will be called “collections pages” and the other will be called “collections list”. The first is basically you’re category of product, so something like “coffee” or “decaf coffee”. The latter is essentially a collections page for your collections pages. So it’s the page that will bring together all the collections you offer. So your “Coffee” collections page will show all the coffee products you have. The Collections List will show your “Coffee” collections page + your “Merchandise” Colllections page + your “Coffee Equipment” collections page etc..

Like the product page, the collections page template will have customization options specific to its page type + the other customization settings we’ve already discussed. Depending on the theme, these are some examples of things you will be able to customize:

So many visual elements, like the number of products it will show per row, the images, and the formatting of the page will be available.

Other page types will follow similar logic, but the products and collections are among the biggest priorities because, even if they look great, you’ll want to make sure they reflect the functionality that you want to provide customers.

This section will document a how to guide to help you use Shopify to setup functional and elegant user navigation so customers can easily find and purchase your coffee.

Defining and setting up the navigation for your website involves taking time to first think about how you will want your customers to browse your online cafe. The setup is always focused, first and foremost, on the user experience - but it has implications on how search engines interpret the website and how the pages relate to each other.

Shopify sets things up so you have two “default” menus available at the start: The “Main Menu” and the “Footer Menu”:

The Menus

The main menu is that “static” menu, typically at the top, that will appear on every page. It’s used across most website’s to ensure that no matter where the customer browses they always have our core website pages quickly available. The footer menu is also typically displayed across all website pages at the bottom of the page.This menu will include links to pages on your website that customers may want to access quickly (like a return policy) but not the big priorities that are essential to the overall buying experience.

Menus can be defined in Shopify by going to “Online Store” > “Navigation”:

As mentioned by default there will likely already be a “Main Menu” setup. You can navigate to that menu and add any pages you’ve set up until this point. Click on “Add Menu Item” and you’re going to be provided a drop down list of pages currently available:

The menu items you’ll want to ensure are in the main menu at the homepage and a collections page. If you have several collections pages with a large number of products in each, then it may make sense to add more than one. For instance, you might add “Coffee” and “Decaf Coffee”. If you have fewer than 15 coffee products you’re selling, than in most cases a single collections page that includes them all will be enough, and that’s the one you’ll want to add to the main menu. Above that, it’s typically a good idea to include pages that instill trust in the business, like an “About-Us” page and/or any FAQ page you might have. Finally, if you are publishing blog articles, than the “Blog” page will also likely be listed here (it has it’s own page-type in the drop down of possible menu items.

Nested Navigation Menus

In the event that you have multiple collections pages that are setup for many different categories of coffee products, you can also build out “nested” navigation menus. Shopify’s support document outlines the details, but essentially you can drag and drop different collections pages under a single menu item. In this case the top level menu item becomes your “parent category”. For instance you’re menu might look like this:

If you do setup navigation in this fashion, it’s helpful to introduce your menu item so customers know that it will expand to feature subcategories. For instance, rather than have the menu item simply say “coffee”, you’ll want it to say “Shop by Coffee”. Or if you only include different roasts as subcategories you can simply set it up to say “Shop by Coffee Roast”.

Website Search Tool

Finally, if you operate a coffee website with enough different types of products/coffee, it may also make sense to implement a website search tool. Shopify allows you to also set this up as a menu item:

Testing and Launching the Coffee Website

The final part of the guide will show you the finishing touches you’ll need to consider and implement just before “going live” with your online store. You’ll need to check out this section to ensure everything on your website, from shipping to payment processing, is working as intended.

Last steps to set up Shopify to launch your coffee website.

Test the Product Checkout

First and foremost, you’ll want to test out the product checkout process for your coffee: Depending on what kind of shipping rates you setup, you’ll want to make sure those rates are apparent during checkout. This can be tricky in cases where, for instance, you offer free shipping for select locations, or on select order sized, but otherwise don’t. So you’ll want to go through the checkout process simulating customers from different locations and making different purchases. You’ll also want to ensure there’s no broken functionality you would expect the checkout process to have. For instance making sure that the customer can modify their cart volume in adding and removing purchases.

Setup Order Tracking

Ensuring there’s an option for customers to track their order. Moreover, one important note is that not all carrier services provide order tracking and unfortunately the services that don’t provide tracking are not always super clear in communicating that. So you’ll also want to ensure that if the customer can choose a carrier service that does not provide a tracking number, they are aware before they make that selection. This appears, as of this time, to be a limitation of Shopify and certain carriers. More information and workarounds can be found here.

Setup Contact Information

Ensure your contact information is clear and obvious, and even include it in several places (contact page, returns page, footer etc.). You want to make sure customers can easily reach you before setting the coffee website live.

Test Payment Processing

Finally, you’ll want to make sure the payment processing is actually working. With Shopify Payments you can place a test order on your site with a live payment gateway to make sure everything works. Shopify has a great support document outlining how you can fully test an order before launching the website.
So concludes the guide on setting up your online coffee website through Shopify. While this can only function as a beginning as far as your journey to sell coffee online, we hope you found the information helpful, and wish you the best of luck.

The Guide to Building a Coffee Shop Website w/ Shopify.

First.. A Note on Web Hosting

Online Coffee Store Examples

Alternative Brewing

Rave Coffee

Coffee Bean Shop

Planning the Coffee Website

Structuring the Coffee Store

Getting Started

Naming the Online Coffee Store

Getting Started

Best Practices

Setting up the Shopify Store

Registering your Coffee Shopify Store.

Setup up Payment Processing w/ Shopify.

Setting up Shipping to Delivery Your Coffee.

Decisions about Shipping

Setting Things Up

Setup domains and mail forwarding for the Coffee Store w/ Shopify.

Option 1 - Buy a Domain Through Shopify

Option 2 - Transfer a Domain to Shopify

Adding Products and Collections to the Online Coffee Store

Adding Coffee Products

Setting Up the Pages

Defining the Product Title

Standardize the approach

Coffee Product Photos

Adding Coffee Product Photos

Choosing Compelling Product Photos

Adding Pricing and Inventory for the Coffee Products

Product Inventory

Shipping, Customs, and Availability for Coffee Products in Shopify

Configuring the Shopify Shipping Parameters

Adding Pages to the Coffee Website

Building Out the Pages

Contact Page

About Page

FAQ Page

Legal Pages

Defining the Look and Feel of the Coffee Website

Choosing the Shopify Theme

How to Pick Your Coffee Theme

Considerations in Choosing a Theme

Single Product Website Themes

Themes for Small Coffee Websites (4-20 Products)

Themes for Large Coffee Product Collections (20-50 Products)

Customizing the Shopify Theme

Types of Customizations

Basic Shopify Theme Customizations

Customizing the Home Page Template

More Detailed Sections on the Homepage

Customize the Header Logo

Homepage Featured Collection

Other Homepage Sections

Customizing Product Page Templates

Getting Started

Product Collections Pages

Setting Up the Website Navigation

The Menus

Nested Navigation Menus

Website Search Tool

Testing and Launching the Coffee Website

Test the Product Checkout

Setup Order Tracking

Setup Contact Information

Test Payment Processing