Step By Step Create Online Store Fully Customized
Now that we have a few products in our Store and a few pages ready, it’s time to go to Online Store> Themes in Shopify and start thinking about what we want our website to do Looks like.
Choose A Theme
The first step is to choose a theme: a template that we install in our Store and that we can use as a starting point for the design when creating an online Store. The Shopify Theme Store hosts both free and paid themes, each with its own set of styles and features.
Some themes are created for more extensive product catalogs, while others are for single-product businesses.
Others are designed for specific industries or types of businesses, such as the Express theme for restaurants.
Here are some key points to consider when choosing the perfect piece when building your Store:
- Each theme has multiple styles, so be sure to research a theme and style based on the size of your product catalog and the type of aesthetic you want for your Store. You want to create the online shopping you’ve imagined.
- Determine if the theme you’re viewing has the built-in features you need, such as a search bar that automatically completes queries or a section that displays press mentions. Note that you can also find free and paid Shopify apps that add extra functionality when building your store website.
- Don’t choose a theme based on colors or fonts. These are all things you can customize later. You can even make your piece truly unique by hiring a Shopify expert to customize it for you.
- You can try a paid theme before purchasing it at a one-time fee.
- Most importantly, keep in mind that you are not stuck with whatever theme you choose. If you change your mind later, you can preview other articles, install them in your current Store, and customize them without recreating your products or pages.
After playing around with free themes like Debut and Narrative, I narrowed it down to Brooklyn (playful style) because Kinda Hot Sauce has a small product line and doesn’t require a lot of features to get started on the right foot.
I love the modern layout of the product grid, the simplicity of the navigation menu, and Brooklyn’s emphasis on visual branding.
If you learn more about Shopify then click here.
Design Your Home Page
Each theme is made up of sections that you can rearrange, add, delete or temporarily hide. Teams can help you choose your store homepage layout and try out different designs.
When determining your homepage design, think about what goals a homepage needs to accomplish and determine how they apply to your specific business:
- Prioritize first-time visitors and help them understand quickly what your business is and what you sell.
- Welcome returning visitors and make it easier for them to navigate the products and pages you are looking for.
- Try to generate interest in your products and trust your business every time.
- Create clear paths that your visitors can take based on their purchase intent. You can highlight an About Us page for people who want to know more about your company or your different collections to allow visitors to independently select the products of interest.
- Design your homepage, assuming that many of your visitors will be browsing it on their mobile devices.
Now, I’m Going To Use These Sections To Do The Following:
- Slideshow (with just one slide) to immediately grab interest with a clever copy explaining why this isn’t your typical hot sauce brand. “Not the hottest hot sauce in the world” breaks expectations as I communicate what my brand is with the tagline “Spice that’s nice.” I also added an overlay and increased the overlay’s opacity to make sure my text is readable when displayed over my image for you.
- Featured Collection made in the presentation with a bold statement on my products: “A delicious hot sauce doesn’t have to be fatal.”
- Image with text to summarize my brand positioning and highlight the purpose of my Store with a link to its About page. I will be using my logo as my image for now, but you can use a photo of yourself, the founder, or an idea that represents your brand well.
- Newsletter the Store will be ready to buy. By offering them a reason to join my email list (slightly spicy recipes in this case), I can build my email list when I start driving traffic to my Store.
- Featured product to showcase my 3-pack hot sauce pack (and the savings they’ve got I’ll get) to ensure customers. I put the latter to offer the last shopping journey to customers who scroll down my home page without clicking anything.
In the future, however, I might expand my homepage to include a section explaining exactly how “hot enough” it gets or a gallery of blog posts sharing recipes that involve my hot sauces. I won’t know if the decisions I make on my homepage are the right ones until I start marketing, but I feel good about this layout.
When you create your homepage, you ruthlessly prioritize information. Usually, less is more. Instead of trying to cram as much as possible on your homepage, direct visitors to support pages that help them sell your business better or explain non-essential information.
Customize Your Navigation Menus
The Header section is wherever you’ll create changes to the highest most space of your online Store, which incorporates your navigation menu, cart, and logo.
We’ll focus totally on making a transparent navigation menu, as this can be; however, folks can notice their method around your website.
There Are Three Main Varieties Of Navigation You’ll Be Able To Create Within The Header Section:
Main navigation. This can be the top menu to order the most navigation methods you would like to supply to customers. You’ll be able to produce submenus (i.e., dropdown menus) underneath every item to avoid cluttering it.
Footer navigation. This can be wherever you retain links to non-essential pages, which may distract new guests; however, it is still obtainable for people who need to notice them. Most internet buyers can grasp to seem here for data like your come back policy or contact page.
Search. You’ll be able to change the search bar within the header to assist visitors indirectly navigate to what they’re trying for. This can be particularly helpful if you have an extensive catalog of products and lots of pages on your website.
You don’t need to overwhelm folks with too many choices from the get-go. Instead, you’ll be able to organize your navigation to order the actions you would like guests to take—with attention on searching, of course.
One menu item can have multiple dropdown levels to step by step feed visitors additional options that support what they’re trying for. For example, you can cluster various Collections underneath one menu item centered on a product for women—that method, you don’t directly overwhelm men who shop with you with options that aren’t for them.
Now, I’m progressing to produce a straightforward navigation structure wherever I:
- Surface my medium sauce assortment and 3-pack bundle underneath a “Shop” menu item.
- Nestle my Our Story and listing pages under a concerning menu item.
- Embody my Contact page, for now, knowing that I can move it to the Footer in the future if I return up with another menu item that serves my goals better.
I’ll even be making another menu for my Footer to surface my non-essential policy pages at a very cheap section of my website.
Tip?: you’ll be able to produce a dropdown menu while not linking bent on a page by entering a # underneath Link rather than an address and dragging any menu things you would like to incorporate under it.
Set Your Colors, Typography, And Different Theme Settings
Colors and typography play an enormous role in your brand’s visual identity and may be a prime thought after building your online Store. Underneath the Theme Settings tab within the online store editor, you’ll be able to customize the planning and feel of your overall online Store, together with colors and typography.
Even though you’re not a designer, you’ll be able to still build your Store and decide on font and color pairings you are feeling sensible concerning exploitation of the following tips.
For Colors
- Think about the psychological science of color and how different colors create folks feel (e.g., red makes people feel hungry, yellow suggests safety, and purple will have a royal quality).
- Use distinction to focus on vital options of your homepage, akin to buttons.
- Use a tool like Colors to cycle through different color palettes to search out colors you prefer and their associated hex code.
- Don’t be afraid to travel along with your gut, or simply keep it simple if you’re unsure (even if it’s merely a straightforward black and white color scheme).
I came up with the subsequent color palette for rather a sauce because I need it to seem daring and colorful. I most likely won’t find myself exploiting all of them. However, I have enough to combine and match to search out a mix I like:
#392B58
#FF0035
#F7EE7F
#654597
#574AE2
Typography
- Attempt to decide two fonts (a most of three) to use across your Store.
- Opt for a body font that is easy to browse (sans line fonts like typeface are typically easier to scan on a screen).
- Use a tool like FontJoy to experiment with totally different font pairings.
For our store, we’ll be keeping it straightforward with two fonts:
- Headings: Lora
- Accent text: Roboto
Body text: Roboto
Tip ?: whereas you’re in your Theme Settings, you’ll be able to set a Favicon (usually your logomark), the icon which will show in browser tabs, bookmarks, and different locations. If you look into the account of this page, you’ll see the Shopify logo. That’s our favicon.
Customize Your Checkout
Under Theme Settings, you’ll additionally customize the planning of your checkout. At the least, it’s a decent plan to feature your brand to your checkout to grant it a branded feel.
If you wish to, you can also customize however your checkout works by clicking through to your checkout settings (or getting to Settings > Checkout).
Here’s a fast summation of the alternatives you can make relating to your checkout:
Client accounts. You’ll opt for whether or not you would like customers to form an account at checkout. This could be helpful if you’re running a wholesale or members-only store. We’ll be disabling it for our Store since we don’t want to introduce extra friction to our checkout experience.
Client contact. You’ll let customers opt for it. However, they need to be contacted by you when inserting an order (email or SMS text messages). I’ll select “Customers can solely look into with email” currently to stay it easy and concentrate on building an email list I can market to.
Kind options. Here you can decide whether or not extra info sort of a name or company name is hidden, optional, or needed at checkout. Since we don’t like all this info to satisfy each order for Hot Sauce, I’m getting to build most of them optional.
Order method. You’ll notice choices to contour the ordering process or add a further confirmation step. To avoid wasting clients some time, we’ll use the customer’s shipping address because the charge address is by default and change autocomplete for addresses.
Email marketing. You’ll build your email list as you build your customer list by rental customers check-in throughout checkout. Since email may be a key pillar in several online promoting strategies, we’ll ensure this is often turned on. Therefore, we will sell our sauce to potential and existing clients on our email list.
Abandoned checkouts. Once a customer reaches your checkout and decides not to complete their purchase (it can happen for various reasons), you’ll come upon an automatic reminder email for these shoppers.
We’ll set up our automated email to travel out ten hours when somebody abandons their checkout, whereas our Store remains recent in their minds and that they could have longer to rethink their purchase.
When in doubt, grade decisions that cut back the friction of finding out for the bulk of your customers.
kindle feedback
Feedback may be a gift, mainly once you’ve been defrayal such a lot of time operating to create your online searching website. Recent eyes can typically spot areas to enhance that you simply don’t and supply valuable insights you’ll use to make tweaks to your Store.
By default, your Store is parole-protected. However, you can offer individuals the password to ascertain it. You’ll notice your password (or amendment it) below online Store> Preferences.
Other Lovely Places To Travel For Feedback Include:
- Individuals getting ready to you who you’ll accept to grant honest, constructive feedback
- Subreddits that your target customers could subscribe
- Facebook teams
- The Shopify Community Feedback On My Store forum
After I shared instead of a sauce for feedback, the following areas were mentioned to concentrate on for improvement:
- The copywriting on my product pages may be additional targeted on who my whole is for (responsible hot sauce lovers).
- A couple of people referred to as out how “charming” the concerning page was and how it created individuals’ need to shop for from this business. I might carry this personal appeal into the remainder of my copywriting and campaigns after I begin promoting.
Take each the nice and, therefore, the danger with a grain of sale as you incorporate feedback into your Store. The simplest type of feedback you’ll get is once you start actively marketing your business.
4. Set Up Shipping
Shipping is often one of every of the foremost advanced issues concerned in running an eCommerce business. Between product weights, packaging costs, shipping destinations, carrier rates, and your potential profit per order, there is a lot of variables to juggle.
Luckily, we can boil it right down to some main approaches that you’ll even mix along betting on the distinctive wants of your business, to seek out a shipping strategy that works for you:
Supply free shipping. Free shipping can be a good incentive for purchasers to buy with you, whether or not it’s applied to bound products, order amounts (e.g., if they pay over $50), or regions of the world. Confine in mind that you simply can issue this into the retail value of your product if you intend on fascinating the importance of shipping on behalf of your customers.
Charge period carrier rates. Shopify integrates in real-time with varied carriers like independent agencies and North American nation Post to develop shipping choices and live to price. This permits your customers to settle on the precise service and price they want. You’ll cash in discounted rates through Shopify Shipping.
Charge a flat rate. Flat rate shipping works best once your product has similar sizes and weights, creating actual shipping expenses easier to predict.
Supply native pickup/delivery. You’ll conjointly provide local customers the choice to choose up their online order at one in every one of your locations, setting specific notification settings, pickup instructions, and alternative details for every location.
For additional recommendations on making a shipping strategy, you can browse our Beginner’s Guide to Ecommerce Shipping and Fulfillment. Bear in mind that, like most of what we’ve done so far, this can be one thing you can return and regulate over time.
For Faja Collection, since it’s located in North American nation, we’re aiming to create our shipping within the following thanks to illustrating a number of the varied approaches you’ll take:
- AN $8 flat rate to ship to Canada and therefore the us
- Free shipping to Canada/us once you pay $30 or additional
- Real-time carrier rates for the remainder of the planet
Regarding Shopify Shipping: With Shopify Shipping, you can get discounted rates, print shipping labels in Shopify, and manage order fulfillment beat one place.
