Shopify
12 Design Secrets for Building a Shopify Site Fast
This post has my top 12 design secrets for how to build a Shopify website fast. All of the steps are actionable and require limited technical knowledge.
So you need a website fast?
Shopify is a fantastic choice because the learning curve isn’t nearly as steep as it would be to learn how to code your site from scratch.
As a website designer who spends half of her life in Shopify, I’ve stocked up on a list of tricks and best practices that enables me to breeze through building websites.
If you’re completely new to the website building process, no worries. I’ll walk you through where to start and then get into the tips to build your site quickly.
Shopify is an all-in-one website builder. Meaning it includes everything you need to build your website and start selling online.
All of the Shopify themes organize the content of your page by sections. Each section can have different functionality.
There are a ton of different section options to choose from. For instance, you can add sections for featured products, Images, Galleries, and Blog Posts just to name a few.
But how do design your page?
You click the Add Section button. You can also delete the sections already on your theme and rearrange them anyway you want. Here’s a photo of what it will look like.
I can take a Shopify website theme and within a matter of hours turn give it an entirely different look. You can do this to by changing around the sections and adding in your content.
So now that we’ve got the basic’s out of the way, let's move on to how to create your site fast.
I can’t stress how important it is to take the time upfront to get organized. It makes building your website so much quicker and you’ll be so less frustrated during the actual build - trust me!
In this post, I go in detail about how to make sure you’re setting your site up to succeed from the beginning. User Experience an important part of designing and building websites and is sometimes overlooked. If you take the time upfront to understand what your clients want to see, you’re guaranteed to make your clients happier - resulting in them spending more time on your site and buying more!
Good news for you - I have an entire post on how to pick your theme. Check it out here. You can save your self a lot of time if you pick the best template from beginning.
If there’s a Shopify theme that matches your style and has similar content blocks to what you want on your site, choose it. This is less that you’ll have less to do later!
Warning: Do NOT pick a template just because it’s in the same industry as your business. For example, if you are a jewelry company, don’t pick a theme that has all jewelry demo content. This is because the majority of your competitors are probably choosing it! It would require a lot more work to make your site look different from theirs.
So, pick a theme that’s close to your style, not because the demo content matches your industry.
Even though you’re not choosing the same theme as the rest of your competitors, I highly recommend making some changes to the theme so your website doesn’t look generic.
For all of the websites I build, I’ll start out with a pen and paper. Sitting down without my computer lets me dream up a site that makes sense and serves a purpose.
Warning: Unless you’re a pro at coding, I suggest drawing out the fundamentals of your theme first. Otherwise, you’re going to have a hard time matching your site in Shopify.
After you’ve drawn out your site layout, I suggest creating a mockup in a design software. This step will take some time, but trust me it will be so worth it!
Canva is a great place to build your mockup. It’s a free to use graphic design program that’s easy to use. However, if you want complete creative freedom, check out Adobe XD.
When you spend the time to complete a “rough draft” (or what us designers refer to as a mockup) of your site, you’ll notice that some things don’t look as good together as you thought they would. This will help reduce the time you would spend after the sites built making changes.
Oh yeah - and it’s way easier in Canva.
Moving around sections, buttons, text, and pictures is WAY easier and quicker to do in Canva than it is to do in Shopify.
Note: Don’t try to make your site look perfect in this step. You’ll be adding content and updating it in the next few steps.
I recommend adding the content you create in steps 4 & 5 to your Canva mockup.
Here’s the best part - once you’re happy design in Canva, you can refer back to it when creating your website, making that process way easier and faster!
Any color or font you will be using on your site should be easily accessible at all times.
I prefer to write them down on a sheet of paper that I can see when designing and also on the notes app on my computer.
I also like to write down every font/color combination that I’ll be using for each part of the site. For instance, I’ll write down what I need for headings, body text, primary and secondary buttons, and form fields.
This makes the actual building process in Shopify go so much faster because I already have all of my styles selected. Your site will look more put together with all of the text styles matching throughout your site. Which is good for brand building!
Another thing that’s incredibly beneficial to have upfront is your copy. This helps SO much when you’re designing the layout for your site.
It’s also important to lay out your copy so you can make sure it tells your brands story with supporting imagery.
Write out everything from headers, paragraph text, button text, body text, and calls to action. I like to have my clients do this in a Google doc so that its easily accessible.
Once you’ve got your copy written out, go back to your Canva mockup and add it.
After I’ve picked out which images I’ll be using for the site, I’ll rename all of them and compress their size.
Here’s how I do it:
I put all of the images I’ll use in a folder on my computer.
The next thing I do is rename all of the images. Google can’t tell what your image is, so you must tell them what it is.
If you have a picture body lotion that you’re selling, change the image name from DSC4582.jpg to company-name-body-lotion.jpg. Make sure the main subject of the photo along with your company name is in the file name.
Now on to optimizing your photos.
You’re really going to appreciate taking the time to do this step once your site is up.
Hint: It will help speed up your site!
So many people forget to do this step when creating a site and they wonder why their site is so slow.
I recommend using TinyPNG to compress all your images. More than likely you won’t be able to tell a difference in your picture but the size of your image will be reduced drastically.
By optimizing your images and renaming them, your website will be faster and you’ll have better ranking SEO!
In the editor, scroll down to the bottom and click on Theme Settings.
There is a plethora of things to do in this section, but I recommend starting out with putting in all of your color selections and fonts.
The best part about this step is that you’ve ALREADY done the work in Canva!
So put on some music, grab a glass of wine, and enjoy this step!
Oh, and while you’re here, go ahead and add your favicon. Just make sure it looks good at 32 x 32px (because that’s what Shopify will size it down to.)
Keep the wine out, this step is also really quick and easy because you’ve done the work!
From any section, click the select image button. Navigate to that handy dandy folder you already created with your optimized photos, and upload them.
From the editor, go to Themes > Customize Theme > and click on Header
In this post, I go into detail about logo size and placement. But since you’re trying to get your site up fast, I’ll go ahead and give you the spark notes.
Basically it’s a good rule of thumb to have your logo in the top left corner and to make sure it’s not too big or small. An optimal logo size is 250 px (width) and 100 px (height). Try to keep your logo around a similar size.
If you have two computer screens, I recommend putting your Canva design on one screen and your Shopify store on another.
If not, just make sure you can see both screens at once.
Go through your design and add sections, rearrange sections, and delete any sections you won’t be using.
Then enter all of your content. This includes all of your products, text, buttons, headings, and anything else you want on your site.
I know you’re thinking “wow, this step was really easy too.”
Yup, having a design that you’re happy with to refer to is KEY to making building your site faster.
Another pretty easy step! Go to Theme Settings > Social Media and enter any accounts that you want attached to your site.
And just like that, you've created your very first Shopify website - hopefully without too much trouble!
Is creating your website is just too time consuming and you just want to focus on building your business? Then leave it to the experts! I'd be happy to chat with you to see if we would be a fit. Just send me a note!
Here’s the truth about creating your new website:
The hardest part is getting started.
I’ve heard of people talk about getting their website up and running and then take months (or even years) trying to decide the best platform, theme, or layout.
Times a wasting sista, there’s no better time than now to get your site up!
A sign of a successful entrepreneur is someone who gets started before they are ready.
So go ahead, get going already!
.svg){kind=small}
.png){kind=small}