Shopify comes with over a hundred themes on the platform’s store and thousands of third-party themes on external marketplaces. But using a theme out-of-the-box, without making any changes, carries a risk that your store will look like one out of many.
So, to make your store stand out, you need to customize a Shopify theme. But if it’s your first time approaching this task, you might have many questions. Do you need any specific tools or apps? What should you pay attention to? What mistakes should you avoid?
As a Shopify development company, we at DigitalSuits have our share of experience in both customizing themes and building them from scratch. You can check out our Garden Plants and Goods Retailer case study to learn more.
In this blog post, we’d like to share our experience with you and cover the following:
- Tools you may use to customize a Shopify themes
- Elements you can (and should) customize
- How to customize a Shopify stores in five steps
- Mistakes to avoid
- Signs that editing your theme yourself isn’t a good idea
4 tools you can use to customize a Shopify stores
To edit your theme, you can:
- Use the default editor accessible via the Shopify admin panel
- Turn to third-party page builders
- Use a theme editor (if there is one)
- Edit the website’s code yourself
Shopify Customize Theme editor
Pricing: free (included in the Shopify subscription)
While it might seem like an obvious choice, the default Shopify editor has a steep learning curve. It’s not your typical drag-and-drop editor. For example, to change the order of elements on the page, you should introduce the change in the list of elements on the left.
Another surprise for new users is that you can’t edit individual pages in the Shopify theme editor. Instead, you edit the templates that get applied to pages. So, if you customize a template, the edits will apply to all the pages that use it.
As for the customization capabilities, the default editor has all the basic editing features you need for:
- Customizing the layout, typography, and color palette
- Adding, moving, and removing sections
- Editing the footer and header (however, you can’t remove them)
You can access the default editor by going to Online Store -> Themes in your admin dashboard and clicking Customize next to the name of the theme you want to edit.
Third-party page builders
If the default Shopify Customize Theme editor doesn’t match your needs or is too complicated for your liking, you have dozens of third-party apps that can facilitate the task. However, remember that their free versions are typically not enough for customizing a whole store.
GemPages Page Builder
Pricing: free, $29/month, $59/month, $199/month
Rating: 4.9/5 (based on 3,114 reviews)
GemPages combines an intuitive drag-and-drop editor, effortless mobile-first design, sleek templates, and extensive marketing features in one package. Here are its key features:
- Advanced design features and animations
- Page optimization tools for fast loading
- Sales triggers and conversion elements
- Extensive library of pre-built elements and blocks
Shogun Landing Page Builder
Pricing: free, $39/month, $149/month, $499/month
Rating: 4.8/5 (based on 2,997 reviews)
Shogun is another drag-and-drop editor that offers a wide range of templates and vast customization options. All plans also include powerful SEO features and a comprehensive marketing toolkit.
Here are Shogun’s other key features:
- Support for all page types
- Extensive element library with timers, accordions, videos, etc.
- SEO control features
- Custom font support
PageFly Landing Page Builder
Pricing: free, $24 to $89 per month (under the pay-as-you-go plan), $199/month
Rating: 4.9/5 (based on 7,096 reviews)
Most suitable for SMEs, PageFly’s drag-and-drop editor is intuitive and comes with plenty of pre-built templates and elements for any taste. Its Product/Collection Assignments feature allows you to customize a Shopify stores by building your pages in bulk, which makes it a time-saver.
Here are PageFly’s other key features:
- Theme sections reusable on other pages
- Clean code and page speed optimization
- Conversion elements (sale countdown, forms, badges, etc.)
- Automatic mobile and table responsiveness
Some theme developers offer their own editor. If you purchase such a theme, it can be a good idea to use the editor that comes with the theme. For one, it won’t cost you extra. Plus, the editor will be optimized for tweaking this theme, so there is a shallow risk of incompatibility issues.
However, not all editors delivered by theme developers are on par with third-party apps like Shogun or PageFly. So, see how they compare before purchasing a theme.
Shopify code editor
Finally, you can get your hands dirty and implement changes directly in your online store’s code. You can access it in your admin panel (Online Store -> Themes) by clicking Actions -> Edit code next to the name of the theme you want to change.
9 things you can (and should) customize
Here are nine website elements that you can and should change when you customize a Shopify website to make your store stand out in the vast pool of competition.
A consistent color palette is one of the essential design tactics for a Shopify store. If you already have a logo, you can stick to its colors. If not (or if your logo is unicolor), you can start from scratch.
Here’s what a website color palette should include:
- One primary color
- One or two additional colors for highlights
- One background color
- One or two typeface colors
When you select your colors, make sure to:
- Use consistent saturation (or use one color with varying saturation)
- Pay attention to the contrast
- Make your text easy to read
- Save the hexadecimal values of the colors for further use
Like colors, your fonts should be consistent across the website – and well-paired, too. Two or three fonts are typically enough; more than three fonts will distract and confuse your visitors.
When choosing fonts, you can select variations of the same font (e.g., Helvetica or Times New Roman) or combine fonts of different typefaces (e.g., a script font for headings and a sans serif one for main body text). Whichever path you opt for, here are a few tips for you:
- Select the font, its size, and color for all text elements: headings of various levels, links, and body text
- Vary the font size to establish the hierarchy of information
- Remember that the text has to be legible
Buttons’ settings are usually global and determine their appearance. When you customize a Shopify store, you can set their:
- Background color
- Text font and color
- Margins and padding
You can also add animations to your buttons for when the cursor is hovering over them, for example.
The favicon is the little logo next to your page’s title in the browser’s tab. While you might not notice it in daily life, the absence of a custom favicon can be a red flag for some users.
You can use your logo as the favicon and upload it in your theme’s settings. Make sure to use the right size: browser favicons are typically 16x16 px.
This is the section on your homepage where you post the important updates for your customers: sales coming up, discounts currently offered, or shipping delays.
Depending on your theme, you may have a pre-built announcement bar section. If not, you’ll need to install a third-party app to add it.
The header is where your store’s logo and the menu will reside. It’ll be present on all of your pages. When you customize it, pay attention to:
- Color palette
- Logo’s position and resolution
- Spacing and padding
- The number of menu items and menu levels
- User account buttons (login/signup/logout)
- Search bar
Footer will also be present on all pages of your online store. It can include a more detailed sitemap, along with:
- Email signup
- Social media icons
- Country or region dropdown selector menu
- Available payment method icons
- Any legal mentions necessary
When you customize the footer, aim to strike a balance between comprehensive navigation and avoiding clutter.
The cart type will define its appearance on your website. In Shopify theme settings, you have four cart types to choose from:
- Cart page (a separate landing page)
- Drawer (a bar that slides to the screen and takes 25% of the space)
- Modal cart (a pop-up in the center of the screen)
- Mini-cart (a small widget that appears when the user clicks on the cart icon)
Your checkout page should sync with your general website style and reflect your brand. This means you should do the following to customize your checkout page appearance:
- Add your logo
- Switch the colors to match your website’s color palette
- Change the fonts according to your website’s typefaces
You can also add a background image and tweak the color of the form fields. However, remember that such changes shouldn’t distract the user from completing the order. So, the simpler the design is, the better.
Head to Settings -> Checkout -> Customize checkout in your Shopify admin panel to introduce changes to this page.
Let’s say you’re ready to edit your theme to demonstrate your store’s unique brand. Where should you start? Here’s your guide on how to customize your Shopify store in five steps.
Find the theme to be your perfect starting point
Be it a free or paid theme, you’ll need one to customize your online store. You can use the default Shopify theme, install a free one from Shopify or third-party developers, or purchase it.
We advise you to choose the best theme that corresponds to your vision of the store. This way, you won’t have to introduce as many changes as you’d have to otherwise.
Duplicate it before making any changes
Head to Online Store -> Themes in your Shopify admin panel and click Actions -> Duplicate next to the theme name you’ll be editing. Introduce all the changes to the duplicate.
This way, you’ll be sure that if you’re unsatisfied with the outcome, you can always roll back to your original theme. Plus, if your online store is live, working with a duplicate will let you introduce changes without adding them to the live store.
Edit general theme settings
To customize a Shopify store, start with the basic aspects of your website’s design. Go to your theme’s settings and define:
- Your website’s favicon
Customize your page templates and sections
Your website should be consistent in its des