Store design

Introduction

With Shopify Plus you can fully customize the front-end experience of your store, so that you can express your brand and give your customers the best shopping experience. In this guide, you’ll learn about the options available to create the customer experience you desire.

By the end of this guide you’ll know:

• What Shopify Themes are and what options you have to build or customize them
• What you can achieve by customizing Shopify’s checkout file
• What custom storefronts are and if they are the right choice for you

Themes

A theme is a template that determines the way that your online store looks and feels. On Shopify, you can switch between themes without affecting your store’s data and content. As you plan your Shopify Plus build, you can choose between customizing a ready-made theme or building your own custom theme.

Theme Store

Browse Shopify Themes to find a theme that’s vetted and approved by Shopify. When choosing a ready-made theme, pay attention that the features meet as many of your requirements as possible: 

• How does the navigation work? 
• How is the product page laid out? 
• Does it offer infinite scroll? 
• Can I add color swatches? 

Every theme on the store has a list of features, a live demo, and can be previewed on your store for free. Once you buy a theme, you can customize it according to your brand, and in most cases, add additional features by using apps or editing your theme code.

When reviewing themes, we always suggest that you not only review the theme demo setup by the developer, but also to take advantage of our Try a Theme functionality. You’ll be able to install the theme and access the theme editor to test its features, but you will not be able to publish the theme or edit the code until you’ve purchased the theme. 

Here are some helpful resources:

• Adding, previewing and buying themes
• Choosing themes
• Customizing themes
• Liquid (Shopify template language) reference

Please note: If you have more than one store, you’ll need to purchase the theme for each store. 

Custom-built Themes

Some merchants can’t find ready-made themes that meet their requirements, so they choose to build a brand-new theme that fully matches the appearance and the functionalities they’re looking for. This option is likely to cost more. It can also take longer than personalizing a ready-made theme, as it requires significant investments in time and resources devoted to design, approvals, development, testing, and implementation. 

If you choose to develop your own theme, you will find documentation here. We recommend working with an experienced agency on it. 

Theme Development Best Practices

Developing and deploying a custom Shopify theme can, in its simplest form, be accomplished by creating the theme on your local machine and then uploading the theme files (as a ZIP) to a Shopify store. This is a very manual process and not a scalable solution when making frequent changes, or when the theme is being developed by a team of people.

To better support frequent changes by one or more developers,  there are a number of available options for automating the theme deployment process. 

For individuals or teams working on developing a Shopify theme that’s managed in a version control tool like GitHub, Shopify’s GitHub integration is recommended (there are also third party apps available, like Beanstalk or DeployBot). Using this type of tool allows teams to all contribute to the same codebase, scalably merge contributions together, complete an approval process before changes are deployed, and deploy specific versions of the theme (from specific git branches) to different Shopify stores.

See the Appendix for an example theme development workflow. 

Learn more about best practices for developing Shopify themes on our Partners Blog.

Checkout Customization 

Checkout extensibility

You can use Shopify checkout to accept orders and receive payments wherever you sell online. If your store is on the Shopify Plus plan, then you can use checkout extensibility to add apps and customize your branding in a way that's upgrade-safe and works with Shop pay.

What is checkout extensibility? 

Checkout extensibility lets you create checkout customizations that are built into apps. These apps are fast to install and upgrade-safe. To add to this, checkout extensibility is continuously evolving to meet your needs through new or improved features, alongside new apps. 

Learn more checkout extensibility 

By upgrading to checkout extensibility, you can take advantage of several new features and capabilities, including: 

 

• Checkout customizations 
• Checkout editor 
• Shopify pixels 
• Branding API 
• Shopify Functions

 

How to migrate to checkout extensibility from checkout.liquid ?

This guide describes new ways that you can use checkout extensibility to customize your checkout on Shopify if you're currently a store on the Shopify Plus plan using checkout.liquid. Use the Checkout Extensibility Migration Kit to learn more about how to assess and migrate your current checkout customizations.

checkout.liquid

Although checkout extensibility is now a new way of checkout customization, you still have access to the checkout.liquid layout as a Shopify Plus merchant. Please note that the layout is not enabled by default on your store, so if you want to access it, you need to contact Plus Specialist Support. Once checkout.liquid has been enabled on your store, you will be able to make changes to the file. 

Keep in mind that Shopify constantly works to improve the checkout experience, which means that checkout upgrades are made on a regular basis. Certain changes that you make to the checkout, especially code that renders HTML, may need to be updated when Shopify releases a checkout upgrade. You will be notified with a Home Card in advance of a checkout upgrade, to give you time to review the upcoming changes and amend your code if necessary. To gain access to the new feature releases, you may either remove your checkout customization or upgrade to a new stable version of checkout. The stable version of checkout will need to be upgraded 3 to 4 times a year to be compatible with the latest checkout features. If upgrades are not made within 30 days, you will default to the non-customized Shopify checkout.

Please review our documentation carefully if you choose to modify checkout.liquid:

• Enabling access to checkout.liquid
• Best practices for editing checkout.liquid

Please note that if you have more than one store, you will need to request checkout.liquid  for each of the stores. It won’t be enabled automatically when you add stores to your Plus organization.

Custom Storefronts

When brands first started selling online, desktop browsers were the dominant way that customers interacted with the web and purchase paths were relatively simple. Retailers used an integrated technology approach, where the back-end ecommerce platform and website front-end were coupled. 

However, trends change as fast as the technology that powers them. With Custom Storefronts, Shopify gives your development team the freedom to create an architecture where the front-end and back-end operate independently from each other. Typical use cases are multiple localized websites linked to one Shopify checkout, mobile apps, and highly customized front-end experiences. 

And for most retailers, an integrated approach will continue to be the best approach. A headless storefront will make sense for:

• Greater customization and personalization of the customer journey
• Greater flexibility for development teams to work on front and backend systems in parallel in any programming language
• Delivering content and trying new approaches to engage customers across multiple sales channels

A headless approach can mean added customizability, flexibility and control. But first, you need to determine whether you should move to a headless architecture at all.

 

Is Headless the Right Choice for You? 

It can be easy to think of headless as the perfect solution to increase speed or conversions. There are many reasons you may be considering a headless implementation, but there are also reasons why it may not be the right decision for your business.

Building a headless storefront is a bit like building your entire house from scratch. Do you have the expertise to do that? The time? Is it necessary? You may not experience the return on investment by going headless compared to the added cost, technical requirements, and complexity that comes with it.

Going headless doesn’t have to be an either/or scenario. Some retailers might start with an out-of-the-box integrated ecommerce platform and move into headless commerce to address emerging business needs over time. For example, a mobile app could run on a headless architecture while the rest of your platform remains fully integrated.

If you believe that a headless storefront is the right solution for you, developers can build it using their chosen software solution and the Shopify Storefront API to access product information, create orders, and check out purchases programmatically. Another option is to build your own storefront with the Hydrogen + Oxygen Shopify Solution.