Customers manage their subscriptions from the Subscription Manager (SM). The Basic and Advanced editors in Ordergroove enable you to modify functionality and styling. In this article we'll go through both modes, when to use each, and offer tips on how to make the most of each option.
Accessing Both Editors
You can customize the Subscription Manager by logging into Ordergroove > Subscriptions > Subscription Manager. Upon selecting a theme to edit, you can choose between two customization modes: Basic Mode or Advanced Mode.
You can switch between Basic and Advanced Mode using the toggle at the top of the Theme Designer page. Both modes allow you to preview your changes in real time, though you must switch to Basic Mode to view the preview. Rest assured, switching modes won’t cause you to lose any changes made in Advanced Mode.
Basic Editor: Everything You Need Out Of The Box
Basic Mode is the default, user-friendly option designed for merchants without technical expertise or developer resources. It features intuitive controls, such as knobs, inputs, color pickers, and text fields, allowing for quick and easy customizations without needing to know code.
What You Can Customize in Basic Mode
In Basic Mode, you can modify a variety of visual and textual elements:
- Visual Appearance: Customize the font color and size, button colors, header gradient, and box shadows.
- Text & Copy Customization: Update the Page Header, Page Subheader, button labels (such as “Skip Order”), and section headers like "Orders Processing."
- Functionality: Control some the functionality of SM features like whether to display quantity and frequency labels, and where/whether to display swap products
When to Use Basic Mode
Basic Mode is ideal when you need simple design adjustments, such as changing colors, fonts, or updating copy. It’s also perfect for merchants who don’t have access to a developer or want to make quick changes with minimal effort.
Why Choose Basic Mode?
Basic Mode is easy to use because no coding skills are required. Changes are made quickly, with instant visual updates. It also offers safeguards to prevent accidental breakage of more complex code or template structure, making it a safe, flexible option for non-technical users.
Advanced Editor: Full Flexibility with Code
Advanced Mode offers full customization options and is best suited for merchants who have in-house developers or access to technical resources. This mode allows you to edit the code directly, providing full control over the Subscription Manager’s structure, styles, localization, and functionality.
What You Can Customize in Advanced Mode
In Advanced Mode, you can dive into the code and customize:
- Template Structure: Using Liquid (.liquid) files, you can edit each part of the SM, such as "upcoming-orders.liquid," allowing you to rewrite or add HTML as needed.
- Styling: You can edit .less files for advanced or dynamic styling.
- Localization: Modify locale files to adjust text for different languages or regions.
- Functionality: Add custom JavaScript functions or modify existing ones by editing the script.js file.
When to Use Advanced Mode
Advanced Mode is recommended when you require complex design changes or need functionality beyond what Basic Mode can offer. It’s also the right choice if you have a team that can handle code changes and debug issues as they arise. However, once you have made advanced mode customizations, new SM updates/features can no longer be automatically applied. Rather, manually adding/editing code would be required.
Why Choose Advanced Mode?
Advanced Mode offers full control over the Subscription Manager, allowing you to create highly customized experiences. It provides the flexibility to modify Liquid templates and scripts, enabling you to introduce complex solutions that Basic Mode can’t accommodate.
Best Practices for Choosing Between Basic and Advanced Mode
Guidelines for Non-Technical Users
For users without technical skills, it’s best to stick to Basic Mode for making quick, simple adjustments. If you find that you need customizations beyond what Basic Mode allows, it’s recommended to consult with a developer before switching to Advanced Mode.
Guidelines for Technical Users
Technical users should utilize Advanced Mode when full customization flexibility is needed. Always use the preview feature to verify changes before publishing them to the live Subscription Manager to ensure everything functions as expected.
Troubleshooting and FAQs
I made changes in Advanced Mode, and now Basic Mode looks different. What happened?
Changes made in Advanced Mode can override settings in Basic Mode. If you edit the code directly, some visual adjustments made previously in Basic Mode may no longer apply.
Can I break my Subscription Manager by using Advanced Mode?
Yes, there is a possibility that code changes in Advanced Mode can cause issues with your SM. To prevent breaking the live version, consider duplicating your live theme and making changes to a draft copy. This way, you can test your updates without affecting the live site.