Do you have a Shopify website and need help with design? SeedCart develops mobile-friendly Shopify themes that are responsive, fast loading, and give your customers a unique one of kind shopping experience.

Here are some basic steps to create a theme from scratch:

Set up your local environment

Setting up your local environment is quite simple. To start, you’ll need to install Ruby version 2 or higher. You can check which version you have by running ruby -v in the command line. If you don’t have Ruby installed, you can use Homebrew on Mac or use the installer for Windows systems to set it up.

Next, install Bundler, which will help manage the dependencies of your theme (a dependency is a piece of code that another piece of code depends on). To do this, just run this command:

gem install bundler

After Bundler is installed, we can now install the Shopify Theme Gem using this command:

gem install shopify_theme

Make sure to create a private app in your Shopify store if you haven’t already done so. This allows Shopify’s API to communicate with your local environment so you can upload and sync files between them as they change during development.

Upload the theme to your Shopify store

To add the theme to your Shopify store, download it from the Theme Store. Then, head to Online Store > Themes > Upload theme in your Shopify admin. Click Choose File and select the theme’s .zip file.

Once you’ve uploaded the theme, make sure that you have it selected as your current theme and that it’s working properly—a good way to check is by checking out a product page on your store.

Customize theme settings

Next, you’ll want to customize the theme settings. Settings are stored in the settings_data.json file and show up in your theme editor for merchants to change. The settings_schema.json file allows you to access these settings within your theme code. Settings allow merchants to change the visual appearance of their storefront from within their Shopify admin without having to modify any code directly on their theme files.

To create a new setting, add an object within your schema file’s “settings” array. Every set has a type (which determines where it falls on the page and how it is formatted), a default value (which is used when there is no saved value), and an id (which is used as the key when accessing that setting’s value).

Add a blank theme to your Shopify store.

Shopify has a built-in theme generator, which is a great way to develop Shopify themes. With this Theme Kit, you can use your development tools to build the theme while still taking advantage of the many features of the Shopify platform. The Theme Kit will watch for any changes you make locally and upload them directly to your store, allowing you to view them as you work on them. You can also use our downloadable starter templates if you don’t want to start from scratch.

To add a new theme:

• Log into your admin account
• Go to Online Store > Themes in your admin dashboard and click Add new theme in the upper right corner of the page.
• Click Upload Theme in the top right corner of the pop-up modal window that appears after clicking “Add new theme.”
• Choose or drag and drop a .zip file from your computer that contains all of the files for both layout and templates of your custom theme (or use our starter templates). If there are no errors during upload, then the custom theme will successfully be added to your list of themes in your admin panel.

Configure theme settings

These settings are a way for merchants to configure the design of their Shopify store without having to code. You can think of these settings as an input form, where the merchant can provide values, and your theme templates use those values. For example, if you add a setting that lets merchants select an accent color, you can use that value in your CSS when they select a color in your themes editor.

The following sections will explain how to create and configure theme settings using the theme-settings.json file:

• Configure the type and name of your setting
• Add options for each setting or make it required
• Add conditional logic for when a setting should be available

Set up theme files and directories

Now you’re almost ready to get started.

• Create a new directory inside the Themes folder in your Shopify project named after the theme you want to create, for instance, YourThemeName.
• Inside this theme directory, there are several subdirectories and files you’ll need to create. These are the layout directory, the snippets directory, the templates directory, and the assets directory. These directories will contain template files that define your theme structure and appearance. You’ll also need to create a config folder, which is where you’ll place configuration files for your theme settings. Finally, you’ll need to create a locales folder as well as a sections folder—the former contains translation files if you’re going to use them, while the latter holds section-specific scripts if needed.

Update the product-template.liquid file

The product-template.liquid file is present in every Shopify theme. It is used to display the details of a product page that has been set up by the merchant or store owner. Product pages are an important tool for merchants to show their products on the storefront or storefront page and help shoppers learn more about those products.

To add data-section-id and data-section-type attributes to a block (a component) element, follow these steps:

• Open your product-template.liquid file in Theme Editor.
• Find {% schema %} at the top of the file and add a new line after it with data-section-id=”{{ section.id }}”. This adds a unique ID for each block element on your product page. Each block element on your page will be assigned its ID that can be referenced elsewhere in your theme codebase to help you style specific elements based on their position on the page, helping you provide a more customized experience for customers visiting your site.
• Add another new line after {% schema %} with data-section-type=”product” to identify this template as one that should be used only when displaying products on your site and not other types of content such as collections or blog posts.

Add a new section schema.

Adding a new section schema allows you to create new custom section style options in the theme editor. These are made using JavaScript and require some working knowledge of this programming language.

For example, by adding section schema, your customer will be able to add:

• An image with text on the left or right side of it.
• A full-width image with text below it.
• A gallery of images that link to other products or collections.
• A group of product previews where each preview links to a product page when clicked on.

Things to know before creating a theme

Shopify is one of the most popular eCommerce platforms today. It allows developers to create custom themes, extensions, and integrations that can be used to power a unique shopping experience. The Shopify platform is extremely flexible, and you can use it to sell just about anything online. The fundamental architecture and design of Shopify are geared towards selling physical products, so if you’re planning on selling services or digital goods, then you’ll need to make some adjustments.

Because of this, many developers and designers are building custom themes for their clients using Shopify. But as with any platform, there are things you need to know before jumping in blind and starting your next project.

We will cover some of the things you should know before creating a custom theme from scratch.

Learn Liquid {{content}} Shopify’s Template language.

Shopify’s Liquid templating language is a template language created in Ruby that loads dynamic content on storefronts.

Liquid has been in production use at Shopify since 2006 and is now used by many other hosted web applications.

What are the advantages of using Liquid?

One of the most powerful features of Liquid is that it can be used anywhere, not only in templates but also in product descriptions, blog articles, store policies, or custom pages. The same Liquid objects and filters are available everywhere, so developers only need to learn one language.

Implementing UI elements in Shopify.

When you create Shopify Plus developers, you will be implementing UI elements that are not native to Shopify. These elements can include sliders, OWL carousels, accordions, tabs, etc. You will need to use Ajax calls to get the data from the server and populate these UI elements. You will also need to use JavaScript, Jquery, and other libraries/frameworks like Bootstrap and Font Awesome for designing your theme. It is assumed that most of you have some knowledge of HTML, CSS, and JavaScript, which we can build upon for creating our custom Shopify themes.

Create a unique customer experience.

There are a lot of resources for designers out there, but it’s easy to get lost trying to find the perfect theme for your store. With so many themes and styles, you may be tempted to pick something that feels right and goes with your brand, but often this isn’t the best choice. We’ve noticed that people often go to great lengths to try and ensure they’re getting exactly what they want when it comes to themes, but you must keep some things in mind before creating your custom Shopify theme from scratch:

• Find a theme that works for your brand.
• Use colors to make your store pop. You don’t want people walking into an empty store with three minimalist shades on their homepage; instead, look at using bright and lively hues to give visitors an immediate sense of being welcomed by you.

Working with theme settings.

As you may have noticed, Shopify store owners can customize their theme settings. This is a great way to allow the user to control things in your theme. For example, let’s say that you’d like for users to be able to change the font on your site. For you to give them this option, there are a few things that need to happen:

• You must create a theme setting. This is done by adding an entry into the settings_schema.json file (Settings -> Edit code -> Config)
• The user must be able to select the font they want from some interface (your custom theme editor). To get this functionality, use JavaScript and AJAX.
• You must load these theme settings into your Liquid templates to be used on the actual front-end of your website.

You did it! Now what?

Once you’ve built your Shopify theme, there are some important steps to get it ready for the public.

First and foremost, make sure to test your new theme thoroughly before uploading it anywhere. Your theme will be used by actual people (hopefully as many of them as possible), so you must test out every last corner of its functionality. This includes thoroughly testing how it performs on different devices and browsers, especially ones you aren’t using yourself.

Next, ask a friend or two who aren’t involved in the process to review your work and provide feedback about what they see. A second opinion can be invaluable when final tweaks to your theme before release.

Final words

Every business is unique. What’s right for a great number of your fellow entrepreneurs might not work for you, so you need to understand what it takes to build Shopify stores tailored to your specific goals and needs. At the same time, there are some tried-and-true methods for attracting traffic and increasing sales that every entrepreneur should also take advantage of. When you have a concept in mind, then it’s time to contact seedcart!