Designing the layout of your online store is a crucial task in order to lure in new customers and encourage them to buy from your store.
In this article, you will learn how to optimise online store web design with Shopify using simple instructions and the SalesHunter theme.
This is a premium theme and we’ll show you how to get the most out of it.
Outline:
- Web design for online stores with SalesHunter premium theme
- How to install the SalesHunter theme in your Shopify store.
- How to customize the top bar
- How to customize the header
- How to add a menu and show currency
- How to customize the slide show
- How to customize the collections
- How to create an email collector pop up
- How to create effects for each image
- How to edit the footer
- How to create a countdown clock
- Shopify theme vs Shopify Page Builder
- Learn online Shopify web page design with this free course
Defining a Well-Structured Online Store Website Design:
Why do you need a well-structured website?
Before you start building up your website structure, you need to know why the website needs to be well-structured & user-friendly Ecommerce website design so you can act on it accordingly to adjust your site.
A “well structured” website is a website that makes it easy for Google’s bot to crawl through in order to index your website into the Google search engine results.
You can find the Google friendly guide for websites here.
What are the basic design components?
A well-structured online store website design should have these basic design components:
- An announcement bar on top of the page
- A ‘sticky menu’ header
- A body of text, slogan and image
- Featured products
- Featured collections
- Bestsellers
- A footer
- An ‘add to cart’ button
- A checkout page
What are the advanced design components a store should have?
Now that we have established the basic design components for your online store, let’s move on to the advanced part. This is where you can wow your customer and encourage them to purchase from your store:
- Countdown alert clocks about special events on site
- Pop up notifications for collecting emails
- Sales alerts
- Currency converters for international clients
- A fully customizable cart page
Differences Between Paid Themes and Free Themes on Shopify.
Benefits of free themes:
Free Shopify themes are great to start with and here are some of their benefits:
- Free to try
- Beginner-friendly - easy to use
- Have all the basic design components mentioned above
- Require little coding
- Have demo stores to explore before purchasing
- Some have product filtering search tools
Benefits of paid themes:
Paid themes can be expensive (ranging from $60 - $180), however they have their own perks that free themes simply cannot bring to the table. Here are some of them:
- Quick response support team
- Custom code support
- Better integration with third party apps
- Possible customization of features if requested by the buyer
- Responsive design for each device (tablet, mobile phone or laptop)
- Advanced product filtering (more metric with which to search compared to simple filtering available on free themes).
Why use the SalesHunter theme?
The reason why you should try the SalesHunter theme is basically that the SalesHunter theme is a premium theme that is optimized for upping conversions in your store.
What is the SalesHunter theme?
The SalesHunter Premium Shopify theme is one of the best-converting themes for Shopify’s online store. Developed by the PageFly team, SalesHunter Premium theme is created with the sole purpose of increasing conversions and driving sales to the user's store.
The SalesHunter theme is currently being sold for $180. However, in this article, you will learn how to get the SalesHunter theme free of charge with all the benefit of a premium theme.
How to get Premium SalesHunter theme for free:
In order to get the $180 SalesHunter premium theme for free, all you have to do is visit the homepage of SalesHunter theme.
Web design for online stores with SalesHunter premium theme
Designing the layout for your online stores can be a difficult task, especially for anyone who is not familiar with website layout sections.
Well, here we’ll teach you step by step how to design an online store from top to bottom.
How to install the SalesHunter theme in your Shopify store
Go to your Shopify dashboard select “theme” under “online store” and click on upload theme like the image below.
How to customize the top bar:
Now that you know how to install the SalesHunter theme to your Shopify store, let's start with customizing the top bar of your page.
The top bar is the section on top of the page which contains the most important message to encourage actions from customers on the website. For example, store owners can emphasize that their store has a free global shipping option for orders from $200, like in the below image.
Just like that, customers can become enthusiastic about reaching that particular threshold in order to get the free shipping deal.
Firstly, select the top bar option:
Select the custom HTML code and start editing the message for the top bar:
Change the colors of the text, background and the link:
Change the text alignment and block width:
How to add the custom menu bar to the top bar:
Select the top bar tab:
Select custom menu:
Create a menu on Shopify if you don’t have one.
How to customize the header
The header is normally used to show the store logo with a detailed menu about what people can explore on the website. Here is how you can adjust it with the SalesHunter theme.
How to add the logo image:
Select the logo image tab and upload the logo:
How to add a menu and show currency
Enable the currency editor
How to change color for the header
Select header color:
How to customize the slide show
The slideshow is a great way to capture the attention of new visitors as it sums up featured information in a visual way. Normally, the slide will be put right after the header as it is very easy to notice.
Select a slide show tab:
Change the slide show image:
Change the text inside each slide:
How to customize the collections
After the header is customized, you can customize your collections inside your store.
Select the collection list:
Change the color of the collections:
Change the content of the collections:
Add new collection to this section:
How to create an email collector pop up
Select theme settings and then click on newsletter popup:
Start adjusting elements inside the pop-up that will show up:
How to create effects for each image
Select the image that you want to add an effect t. For the purposes of this article, let's take the masonry section’s image as an example.
Select the Masonry content:
Scroll down to content, select one image and select the effect for that image:
It’s also possible to change the text, color or font of the image in this section.
How to edit the footer
Select the footer section:
Start editing each section inside the footer:
How to create a countdown clock
Countdown clocks are a great way to alert customers to a special event that is about to run out of time. It encourages them to purchase quickly.
Select the homepage drop down button and select the product page:
This is the layout of the product page, with the countdown clock already showing:
Select the main product section:
Tick the box labelled show countdown timer and choose the countdown time below it:
There are also many other cool features to explore and optimize in the SalesHunter theme. Explore with them and have fun!
Shopify Theme vs Shopify Page Builder:
If you don’t know the difference between these two Shopify concepts yet, then here we go:
- Theme: A prebuilt website design that affects all the pages inside your store (such as the SalesHunter theme).
- Page Builder: A tool, alternative to the Shopify editor, that helps people build and edit a store.
Basically, themes are for people who struggle with online store web design (suitable for beginners). On the other hand, page builder tools like PageFly are meant for people who have a rich imagination and like to explore design ideas within their store.
Using a theme will limit people to that theme’s design, but using a page builder gives users free reign to design their own store however they want.
