The Everything Design Guide for Shopify Stores

Fonts, colors, action! For the artistically inclined, designing your Shopify store can be an exciting challenge. But for marketers and entrepreneurs who feel a little clammy when tasked to choose between serif and non-serif fonts, this process can feel extremely daunting. 

Though Shopify has numerous resources that make it easy to get started — we’re talking pre-made theme templates, expert designers for hire, and marketplaces full of apps and widgets — decision paralysis is a very real affliction. Case in point: Everyone wants a Shopify store that’s visually attractive, attention-grabbing, and optimized for conversions — but getting there is easier said than done. 

With the sky being virtually the limit when it comes to design options for your Shopify store, where do you begin? Put down the color swatches — here’s the ultimate design guide for Shopify that you’ve always needed but didn’t know existed, with all the tips and tricks you need to customize, launch, and start selling.

In this article:
Shopify Themes
Product Photos
Theme Customization
Menu Structure
Homepage Header
3 Takeaway Tips
Need Help?

Shopify Themes

The first step to building your Shopify store involves choosing a suitable theme. Think of it as the backbone of your site that determines your store’s user experience, visual aesthetics, and functionalities. 

Shopify’s Theme Store, which offers hundreds of options, makes it simple for you to find your perfect match. Plus, most of them provide multiple style variations, meaning you can customize them to match your brand’s look and feel in regards to colors, fonts, and apps. 

Feeling overwhelmed? Use Shopify’s filters to narrow down your choices by:

• The size of your product catalog. If you have numerous products, you might need features such as infinite scrolling or a grid layout.

• Your industry. Fashion companies may require themes that allow shoppers to choose from multiple sizes and colors, while art and photography brands may need larger product image slots. 
• Price. Although Shopify offers various free themes, more complex ones can cost up to $180. 

Though you can customize typography and color schemes later on, the customization process is more straightforward if you choose a theme that matches your vision for the site in terms of overall aesthetics and layout. 

Product Photos

While we’re huge fans of Shopify’s robust marketplace of themes, there is one risk: having a store that looks just like everyone else’s, even when you factor in customization. One quick solution? Unique product photos. 

To distinguish your brand from your competitors, it’s important to take product photos that encapsulate your company’s identity and attitude. Photography plays a huge role in setting the style and tone of your brand. 

Don’t be afraid to have some fun and be a little bolder with your product photos:

• Mix up your product photos with some lifestyle photos, where your products are being shot on location with supporting props and models. 
• Experiment with different layouts. For example, rather than always shooting apparel by placing it against a white background, consider doing a flat-lay or hiring models. 
• Crop and photograph from interesting angles rather than straight-on. This is a great way to add style and flair to your shots.

For more tips on taking amazing product and lifestyle images, check out this DIY guide. 

Theme Customization

Now that you’ve chosen your theme and have a whole camera roll of product photos to choose from, here comes the fun part: transforming the site into something that’s uniquely you. 

Thanks to the convenience that Shopify offers, customization doesn’t require any coding on your part. Instead, simply click on Theme Settings, and you’ll find a number of ways to adjust the visual style of your store.

Colors

In the Colors menu, you can toggle the colors for many of the elements in your store, including the text, buttons, and form fields.

Pro tip: To make your call-to-action (CTA) stand out, consider making them a bolder and brighter color that contrasts with the rest of your page. 

Typography

This section controls the visual appearance of all the text throughout your store. You can adjust the font type, weight, and scale for headings versus body text.

Favicon

Favicons are the small icons — typically a logo or simple image associated with a company — that appear in the tab of your browser.

• Have an appropriate image? Once uploaded, Shopify will automatically resize it to 32 x 32px. 
• Don’t have one? Shopify has tons of free images you can use. 

Checkout elements

Your checkout process is hands-down the most important part of your ecommerce site. Without a fantastic checkout experience, you risk shoppers abandoning their carts halfway through purchasing. 

To make your checkout as seamless as possible, you can customize:

• The colors for accents, buttons, and errors
• Checkout-specific typography
• The background pattern, color, or image for the checkout and order summary pages

Menu Structure

While most of Shopify’s pre-made themes will come with these key elements, you’ll want to keep these tips in mind before launching your store: 

Navigation Bar

A navigation bar sits at the top of every page, allowing shoppers to jump between pages quickly. 

Pro tip: Make it easy for shoppers to find what they need without overwhelming them. To keep the main navigation bar relatively clean and simple, you can add categories and subcategories as dropdown options that are hidden unless hovered over. 

Announcement bar

A limited-time sale? Shipping delays? New store opening hours? When you need to promote essential information that all shoppers need to know, an announcement bar (also known as a global header) is your answer. 

Most Shopify themes come with announcement bars — you just need to customize them and turn them on via the Shopify theme editor. 

Pro tip: Make sure your announcement bars are stylized the same way as your site(think brand colors, fonts, and CTAs).

Footers

Footers are one of the most underrated areas on your site. While it’s true that few shoppers will scroll all the way through your homepage and reach the footer, it’s one of the first places they’ll look when they need quick access to information. 

To edit your footer, you’ll need to go to the Navigation page under Online Store.

Pro tips:

• Your footer shouldn’t just be a rehash of the same information in your navigation bar. Instead, add important links to pages about shipping, returns and exchanges, site privacy, job opportunities, and more. 
• Use social media icons as buttons — it’ll reduce the wordiness in your footer. 
• Allow shoppers to sign up for email or SMS updates. 
• Provide customer service quick links, such as hotlines, “start a live chat,” or email help. 

Homepage Header

Your homepage header is the first thing shoppers see when they land on your website. Make an excellent first impression, and they’ll scroll for more. Fail to attract them, and they’ll close the tab. With that being said, your homepage header should: 

• Provide a quick snapshot of what your brand is or what products you sell
• Promote a sales event
• Demonstrate your brand’s attitude and identity
• Showcase your top products

Whether your homepage header is a video, carousel, or static image, you should aim to change it up regularly — you never want your website to feel stale or out-of-date for loyal customers.  

3 Takeaway Tips

Designing your Shopify store can be a lot of fun, but it can also get out of hand once you start experimenting with fonts, colors, and widgets on what is essentially a blank canvas. To keep the Shopify design process as manageable and headache-free as possible, here are some tips to keep in mind:

1. Function over form, always

You can have a beautiful site, but if it doesn’t flow intuitively and offer a fantastic customer journey, you’ll see sales stagnate. We recommend:

• Focusing on what you want to accomplish with your site before you start the design process. This will help narrow down the tools or widgets you need and prevent the choice paralysis that’ll likely happen the first time you visit the Shopify App Store. 
• Implementing useful features, such as recommendations and robust filters to allow shoppers to quickly narrow down their product search. 
• Prioritizing site speed. While it’s tempting to add a ton of whizzy animations, cool apps, and high-res images, the more elements you include, the longer your site’s loading time will be. Studies have found that every extra second your page takes to load can reduce conversions by as much as 7% and page views by 11%. On the other hand, faster sites get rewarded with higher rankings on Google. 
• Compressing images. Free tools like compressor.io can help you keep high-quality product images crisp while reducing the file size.  
• Choosing themes on the Shopify Theme Store over those from third-party websites. As third-party themes don’t go through Shopify’s assessment process, some can have unexpected additions in the back-end that can drag your loading times up. 

Remember: Launching your Shopify store isn’t a one-and-done process. After you’ve launched your site and start to see sales trickle in, you want to continually optimize every page, from revamping header images, rewriting SEO copy, or updating images. Trust us: Though it’s tedious, it’ll help boost conversions, attract new shoppers, and improve the customer experience. 

Pro tip: Not sure how your site is faring in terms of site speed? Check out Google’s PageSpeed Insights tool — just pop in your URL, and it’ll provide you with insights and recommendations on site speed improvements. 

2. Keep your site simple

It’s tempting to showcase all the products, images, and copy in your arsenal, but most of the time, that’ll just clog up the customer experience. You don’t want to overload your site with too much information — nobody wants to sift through products in a digital version of a messy thrift store. Instead, keep it simple, focus on your bestsellers, and trim the fat wherever possible (whether that’s images, copy, widgets, pages, or even products themselves). 

3. Test everything

What if we told you that you could boost conversions by simply changing that one button from blue to red? While you’ve launched your site with specific colors, images, and graphics, there’s no way to know they’re working well. (We’d love to give you a winning formula, but the truth is: The best practices depend on a brand’s unique customers, products, and niche.) 

Here’s where A/B testing comes in — a process that’s crucial for determining what performs best. (For new marketers, here’s a guide to all things A/B testing.) Rather than operate from pure instinct alone, you’ll want to A/B test these store design elements: 

• Colors of different buttons
• Locations of CTAs, widgets, and images
• Navigation bars
• Design of social media icons
• Image style — e.g., product vs. lifestyle image
• Background images or textures

Need Help?

While Shopify’s interface makes it easy for marketers and entrepreneurs to DIY their store designs, it can become a time-consuming process if you’re a perfectionist with a crystal clear idea of how you want your store to look.

Good thing it’s okay to ask for help! Shopify offers a wealth of resources and hundreds of experts who you can trust to take care of your store. Sometimes, it’s better to leverage the expertise of a pro designer rather than wade through the weeds alone. 

As for us, AdRoll has your back when it comes to providing top-notch marketing for your Shopify store. If you’re ready to turbocharge your sales, check out the AdRoll integration for Shopify. 

Last updated on November 5th, 2022.