Best Practices for Customizing Themes in SuiteCommerce

The following list provides essential best practices to consider when customizing themes for Commerce websites:

• Theme Customization: Use themes to customize HTML templates and Sass for your site effectively.
• Creating Custom Themes: If you are using a published theme as a baseline, the developer tools will force you to create a new theme to consolidate your changes as a custom theme.
• Folder Structure: Stick with the existing folder structure created when you downloaded themes and extensions to your Workspace directory. Add any new subdirectories cautiously; ensure their paths are included in the theme manifest along with all required entry points.
• Testing Changes: Use a development domain to thoroughly test your changes before applying updates to your production domain.
• Workspace/Extras Directory: Avoid moving, deleting, or editing files located in your Workspace/Extras directory as they are for reference and overrides only.
• Customizing Active Extensions: When you fetch a theme, you will retrieve the HTML and Sass files for any active extensions. Customize these files to suit your theme using the override method.
• Asset Management: Place any new assets (images or fonts) in the appropriate location within the theme's assets directory. Utilize helpers when referencing assets within your HTML or Sass customizations to manage paths correctly.
• Template Context: Always follow the template context when editing HTML template files or creating overrides to ensure consistency.
• File Naming: To avoid file name collisions, do not create new files or folders with the same name, even if located in different areas, except when working on extension overrides.
• Limit Files and Folders: Limit the number of files and folders at the same directory level to 100. Consider distributing images across multiple folders and housing custom modules in a separate top-level directory.

Related Topics

• Best Practices for Creating Themes
• HTML Best Practices for Themes
• Sass Best Practices for Themes
• Managing Theme Assets

Key Takeaways:

• Use development domains for testing changes.
• Maintain proper folder structures.
• Ensure asset paths are dynamically managed using helpers.
• Follow best practices for naming to avoid conflicts.
• Limit the number of files at any one level.