The Change theme style button won’t appear if the theme doesn’t have any presets built in.Ĭreating presets is quite simple. However, if a merchant changes any of these values there is no way for them to “go back” to the original default settings, unless we create a “preset”.Ī merchant can find presets by going to Customize theme, clicking on the General settings tab, and clicking on the Change theme style button. The light version might be the default values set in the settings_schema.json file. The following theme options should be added inside the settings square brackets:Įach theme option is found within an open object in our CSS and SCSS files, how can we specify certain presets or color schemes for our clients?įor example, you might want to create both a light and dark version of your theme. Once we’ve added our section for Theme Colors, we can now create a subsection using the option of type header, with the content set to the title of that subsection, followed by theme options for various colors. Adding a theme options headings and settings for colors You should see the following added to the Theme Editor once you save and refresh:ģ. Settings sets up where we’ll place the rest of our theme options for this section. Here, name refers to the readable title for the section we’re creating. Make sure to separate the two sections using a, and place the following code before the parent closing ] bracket: This goes directly after our theme_info section. To get started, we’ll need to define a section for our color settings. Make sure to escape / characters using a \ in urls. Theme_support is the url to contact a support team for your theme, and displays as the Support link. Theme_documentation_url references the help URL or documentation for your theme, and displays as the Documentation link for your theme. Theme_version refers to the version of the theme this is necessary if you plan on distributing your theme, and will most likely make updates in the future. ![]() Theme_author should be the author of the theme, often the freelancer or agency creating the theme. Theme_name refers to the readable name that appears in the popup. Name must be set to theme_info for this section to create the appropriate mappings for your theme options. This sets up some theme information and links for custom themes through the Theme Editor panel, behind the. Add the following code to your settings_scheme.json file: Setting up the settings_schema.json file for your themeįirst we want to define a few properties about our theme itself. settings_schema.json is located in the config/ directory of your theme. To customize and control the theme options found in the Shopify Theme Editor, you’ll need to dig into the settings_schema.json file. You can view a theme’s options by going to the Online Store tab, selecting Customize theme, and going to the General settings tab.Ĭreating dynamic color schemes might be less important when building a custom theme for a single client (where the theme matches designs already discussed), but what if you plan on creating a theme that might be used by many different merchants? A custom color scheme is something that a merchant will want and expect to customize with their new store. Then, using theme options, Liquid objects in your CSS or Sass, and rules in your Liquid templates, you can build dynamic themes that allow merchants to customize the look and feel of their online store, while still maintaining some control. It’s important to note that the theme options that are available to a merchant, are predetermined by the theme developer who builds the theme. ![]() Like I mentioned above, theme options allow a merchant to customize the look and feel of their website. You might also like: 3 Simple Steps for Setting Up a Local Shopify Theme Development Environment. Tip: If you haven’t used theme options before, you will want to read this introduction to theme options. More specifically, I’ll cover how to change color schemes based on theme settings, and how you can create preset options with the settings_data.json file and allow clients to choose a curated preset option that you define, so they can choose their ideal ecommerce color palette. In this article, I’ll explain how to create dynamic color schemes using the settings_schema.json file. They allow you to configure theme settings, which merchants can access using the Theme Editor. That’s when theme options are your best friend. So how do we make our themes dynamic for clients? ![]() You might be building a custom theme for a client, or building a theme to be distributed on the Shopify Theme Store in both cases there are a lot of things a merchant will want to customize and be able to change. Building for the unknown can be tricky, and clients or merchants always want some level of control when it comes to their websites.
0 Comments
Leave a Reply. |