Mary-Rose Sutton 03/06/2017

How to Build a Beautiful Website on Shopify

I remember building my first website when I was a university student looking for a summer internship. In an era before LinkedIn, I thought putting my resume online would be an easy way to impress recruiters.

After a week of late-night googling, I had created a single web page with text that looked almost identical to a word document. Needless to say, my site didn't land me the internship of my dreams, but I was impressed with my work and began to secretly liken myself to a website developer.

Eight years later, I'm blown away by the beautiful websites I see everyday while working at Shopify. While a simple website with text used to impress me, websites these days are dynamic— they move, change colours, and elements pop-out and recede into the background as you scroll. It seems as though building a website has gotten significantly harder. 

When we decided to redesign this website last month, my first instinct was to ask a team of professional designers and developers here at Shopify for some assistance.

The advice they gave shocked me so much that I decided to write about it. Not only is it possible to build a beautiful website on Shopify with no professional experience, but Shopify recently released a new feature called Sections that takes its simplicity to a whole other level.

Creating a Website on Shopify

Turns out, many of the stunning websites I see everyday at Shopify are created by users who don’t have any website design or development experience. Instead, they selected one of the beautiful pre-built themes from the Shopify Theme store, and customized it using the Theme Editor and Sections.

The Theme Editor is a tool Shopify provides that allows you to preview how your website looks to visitors and make changes to each content block’s text and images before publishing your changes to make them live. Best of all, this can be done without tampering with any code.

 

In October, Shopify took the Theme Editor to a new level of functionality that extends its ease of use to the entire homepage. With Sections, Shopify recognizes that no two websites are alike. While it might be easy to find a beautiful Theme in Shopify’s Theme store, every website has it’s own unique needs, and will likely want to change various components of the Theme’s layout to suit those needs.

Sections give users access to a variety of different content blocks that they can add, remove or reposition anywhere on the homepage, customizing their website theme to be exactly the way they want it.

 

Eye catching upgrades like lookbooks, photo galleries, featured products and a location map can be placed anywhere on your website homepage. In the past, these elements were scarcely found in pre-built themes, and required extensive coding to get them exactly where you wanted in your homepage.

Now, you can have multiple occurrences of any of these sections throughout the page, wherever it makes sense for your website and the story you want to tell your visitors.

Using Sections with Shopify’s Debut Theme

You might be asking yourself, does my Shopify website have this cool new feature? As of today, every Theme offered in Shopify’s Theme Store supports Sections.

When you sign up for Shopify you will automatically start off with the Debut Theme as default. Debut is a free Theme that was designed to be the perfect starting point for any website. Its unopinionated and flexible enough to suit a variety of needs. It has the basic Sections needed to start selling online, and with the Theme Editor, you can add and remove Sections as you please.

Debut is the Shopify Theme that was used to redesign this website last month, and we were able to customize it using Sections.

Since our website produces a lot of video and blog content in addition to selling products, Sections allowed us to display and promote this content on the homepage of our website.

Here is a before and after look at our website redesign:

Pre-Debut

 

After switching to Debut and customizing the store.

 

Now Over to You

After discovering the endless possibilities that the newly released Sections present, you might be stuck wondering what are the best Sections to use on your own website. To help you get started, I have put together some template examples of different websites you can build using Shopify's Sections.

Best of all, it’s free!

        

Shout out to Kathleen Babin and Steve Bosworth for telling us about the magic of Sections and for working on our new website. They are part of the talented Design and Development team at Shopify!

1 comment

  • Thanks Mary Rose. I didn’t know about Seyctions before reading your post, but I’m definitely going to use it to build my personal website.

    Stephen Lahey

Leave a comment