Table of Contents

Online Store Web Design with Shopify’s SalesHunter Theme (Tutorial)

Our operations are supported by commissions earned from affiliates. Details.

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.


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.


        Get SalesHunter theme free

        Get SalesHunter theme free

        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.

        Sell Online With Shopify

        Trusted by over 1,000,000 businesses worldwide

        Start Free Trial

        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.

        Install theme to Shopify

        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 top bar

        Select the custom HTML code and start editing the message for the top bar:

        Customize header

        Change the colors of the text, background and the link:

        change background color of header

        Change the text alignment and block width:

        Top allignment and block width

        How to add the custom menu bar to the top bar:

        Select the top bar tab:

        select top bar

        Select custom menu:

        change 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:

        logo image change

        How to add a menu and show currency

        Enable the currency editor

        currrency converter

        How to change color for the header

        Select header color:

        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:

        select slide show

        Change the slide show image:

        slideshow image

        Change the text inside each slide:

        text inside slide

        How to customize the collections

        After the header is customized, you can customize your collections inside your store.

        Select the collection list:

        select collection list
        select collection list

        Change the color of the collections:

        change color collection list

        Change the content of the collections:

        content collection list

        Add new collection to this section:

        add collection

        How to create an email collector pop up

        pop up email collector

        Select theme settings and then click on newsletter popup:

        theme setting

        Start adjusting elements inside the pop-up that will show up:

        pop up element

        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:

        select masonry content

        Scroll down to content, select one image and select the effect for that image:

        masonry content edit

        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:

        footer edit

        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:

        select product page

        This is the layout of the product page, with the countdown clock already showing:

        countdown clock layout

        Select the main product section:

        main product select

        Tick the box labelled show countdown timer and choose the countdown time below it:

        enable countdown timer

        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.

          Explore Now

          Explore the #1 Shopify Page Builder today

          Try PageFly Free