> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.ordergroove.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ordergroove.com/_mcp/server. # Intro to v25 for Developers Transitioning from v0 The new v25 base template is full of new features and organized to make advanced customizations easier. If you have extensively customized our previous v0 template, this article will help you understand the differences and get started with v25. *** ## Requirements These instructions are for developers who want to make advanced customizations in v25 and are already familiar with our previous template. If you are not familiar with coding, check the basic editor section for out-of-the-box customizations. #### SM Tracking Code If you use the Advanced Editor to customize your Subscription Manager, be careful not to remove or modify elements that Ordergroove's tracking library depends on. These changes can disrupt analytics and customer behavior tracking. For guidance, see [Customize your Subscription Manager](https://developer.ordergroove.com/docs/sm-template-customization-tracking). ### How to Tell What Version You're On Before the September 2024 release of v25, all Subscription Manager installations were on version 0, displayed in the Theme Designer as version 0.X.X. You can check your version by going to [Ordergroove](https://rc3.ordergroove.com/) > Subscription > Subscription Manager. *** ## Identifying Your Customizations If you have been developing on v0, you likely have customizations in your v0 template that you want to transfer. For every file in the Subscription Manager Theme Designer, there is a small button in the header bar of the editor that shows the diff between that file and the base template you developed from. If the file hasn't been modified, the button will be disabled. If you have made changes, you can click the button to see exactly what you changed. The base template code between v0 and v25 differs, but you can copy your customizations and transfer them into their new locations in v25. The rest of this article covers the basic differences between the two templates and suggestions for mapping your customizations. *** ## Differences Between the Templates ### Template and Folder Organization A key feature for developers on v25 is improved organization and folder structure in the views folder. Template files are split into folders based on their functionality. The diagram below shows how different areas of the SM reflect the folder structure: Some files, like `order-processing.liquid` and `upcoming-orders.liquid`, have similar purposes as in v0 — serving as entrypoints to their sections — but we made an effort to reduce file size and split liquid files into smaller pieces to make it easier to find the exact place you want to edit. For more information about the views folder, see [Tour of Subscription Manager v25](/docs/lifecycle/sm/tour-v25). ### Script.js and Components `script.js` is still where you add custom JavaScript functionality. The beginning of the file, under the "Subscription Manager loading" header, contains key functions for the SM to load. *Do not edit these.* The "Custom Elements" section introduces key components used throughout the SM to encapsulate interaction-heavy functionality. The end of the section defines them as [custom HTML elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). You are unlikely to need to modify this section. The final section, "Utilities," contains utility functions used elsewhere in the scripts file and in the SM. This is where you should add any custom JavaScript functions. ### CSS Organization In the v0 template, `globals.less` contained many of the variables used in other Less files. In v25, this role is taken by `design-tokens.less`, which contains all variables used across other files and components. Style changes from the basic editor are still reflected in `variables.less` and override anything set in `design-tokens.less`. `default-theme.less` now holds more extensive styles expected to be used across multiple components in the Subscription Manager. The `components` folder contains styles for components used across the SM — both HTML elements and custom components defined in the scripts file. Other folders contain custom styles for SM sections, corresponding to the views files in the same folder structure. To transfer your custom styles to the new Subscription Manager, consider the following: 1. **Is it a color, radius, font, or size change?** Check `design-tokens.less` to see if we already have a corresponding variable. 2. **Is it for a specific section or element?** Find that section in the `views` folder, then look in the corresponding `.less` file. 3. **Is it for a component used across the SM** (like buttons or dialogs)? Check the `components` and `ui-elements` folders. 4. **Is it meant to be globally applied?** Check `default-theme.less`. Another tip: in v25, classes are used only for styling — not for functionality. With the exception of `variables.less` (controlled by the basic editor), you can add and remove classes freely when developing your custom Subscription Manager. ### Locale Customizations The new base template has new locale strings in the `locales` folder, as well as many of the same keys from v0. If you made customizations to the text on your Subscription Manager, search these files for the key — if it isn't present, search by text content or check which key is being used in the relevant template file. The locales files are organized alphabetically by key. As with the v0 template, you are always free to add your own locale keys. ### Controls Controls in `theme-settings.json` surface functionality options to the basic editor. You typically don't need to edit these for customizations, but you may encounter them in the template (e.g. `{% if 'show_upgrade_to_subscription' | setting %}`). When possible, we encourage using these variables to customize your Subscription Manager — it can make it easier to maintain customizations when upgrading to newer versions. Removing these variables removes the basic editor's ability to easily toggle those features, but the Subscription Manager will still function without them. *** ## Additional Reading For more information on the new template and development tips, see [Tour of Subscription Manager v25](/docs/lifecycle/sm/tour-v25).