Guide

Live Case Study Week #5: How I Designed a Shopify Store From Scratch

When it comes to designing a Shopify store, there are basically three ways to do this:

  1. Using a theme that is „pre-designed“.
  2. Using a Shopify page builder app.
  3. Go full custom (headless).

Headless ecommerce is amazing and definitely the future. There’s no doubt about that. But for my purpose it’s too complex.

I wanted to start small(er).

So I decided to go with a hybrid model. Using a page builder for my homepage and letting the rest do the pre-designed theme.

This gave me great lots of room for customization without spending too much time on every little detail.

As always, speed was more important to me here than perfectionism.

Installing a Shopify Theme

I looked through many Shopify themes. The free ones looked great but not really comparable to the premium ones. They lacked functionality, style or just didn’t seem good enough to me.

However, I didn’t want to spend money on a theme. At least not upfront. Maybe I will change my opinion later on. We’ll see.

In the end, I went with Dawn. A free theme by Shopify that supports Shopify OS 2.0.

It‘s Shopify’s default free theme and is therefore supported by pretty much all available Shopify apps.

In terms of customizing the theme, I didn’t do much at that point. First, I wanted to build my homepage.

Installing a Shopify Page Builder App

As mentioned, I wanted to build my homepage using a Shopify page builder app.

Now, one can argue that the product pages are even more important than the homepage. And I agree. This is where the actual conversion will happen. However, I was already planning my marketing strategy in my mind and came to the conclusion that I should focus on the homepage first. But more on that later when we come to the marketing part.

For now, let’s continue with building a great looking homepage.

Ok, so there are many great page builder apps on the Shopify App Store. I signed up for PageFly.

Designing and building a Shopify store homepage with the Shopify page builder app Pagefly

With more than 6,100 very positive reviews, I felt I was in the right place.

And to kick things off, I created my first page by using one of PageFly’s templates.

Start designing a Shopify homepage with a template

From there, I played around with all the different sections and possibilities. It took me around 30 minutes.

After I felt good about my initial home page setup, I faced a problem. A big one, actually.

Ecommerce in 2022 is more visual than ever. I think we can all agree on that.

Now, ALL the images I had from the AliExpress supplier have a super low quality. I really didn’t want to use these in my store.

An online store with proper visuals is not trustworthy at all.

To solve this problem, I did three things:

Ecommerce Visual Hack #1: Photo Quality Enhancement

I used the photo quality enhancement tool Remini to increase the quality of all the images that I had from my supplier. 

Honestly, The results were crazy:

Enhancing the photo quality of product images from AliExpress with Remini

It looked SO MUCH better.

Ecommerce Visual Hack #2: Photo Reviews

Maybe you remember…

Last week, I installed Loox to import photo reviews. And now I will take advantage of PageFly‘s integration with Loox. 

It lets me easily integrate all of my reviews on my fully customized homepage.

The Shopify photo reviews and referrals app Loox integrates with the page builder app Pagefly

All of a sudden I had tons of new visuals on my store AND added social proof.

Here’s how I did it with just a few clicks.

Ecommerce Visual Hack #3: Stock Images

I created a section on my homepage that showed three possible ways to use the product.

To visualize this, I downloaded three free stock images and displayed them on my store:

Sections of a Shopify store design

Nothing too fancy but it definitely looks great.

Having done all of that, the store looked way better than before.

But it wasn’t finished yet.

Arranging All Design Sections

With all sections built, it was time to put everything together.

I pushed back and forth several sections, played around with lots of different styles and finally came to a result that I liked:

Click here to see the full page screenshot.

It’s far away from being perfect or 100% optimized. But as the initial homepage setup more than enough.

And that’s it for week number five. I’m still excited as on day number one and we’re getting closer to opening our store.

See you next week, my friend!

Want The Next Part?

<cms-button>Yes, Send Me Part 6 When It’s Ready<cms-button>