Site Management Tools Customization for Commerce Websites

Enabling site administrators to customize a Commerce website's appearance and functionality is essential for tailored user experiences. This article explores how theme developers can leverage Site Management Tools (SMT) for enhancing looks and layouts efficiently.

How Can Developers Customize Commerce Websites?

As a theme developer, you have the ability to expose variables that site administrators can use to modify various aspects of design and UX. Here’s how:

• Expose Variables: Use protocols to enable settings modifications, as detailed in the section about exposing Sass variables.
• Organize Variables: Structure exposed variables for clarity. This makes it easier for site administrators to find and use them effectively.
• Create Preset JSON Files: Offer a robust set of predefined settings to streamline customization workflows.

What is the Theme Skin Manager?

The Theme Skin Manager included in SMT Version 3 allows administrators to modify the styles and layouts of an active theme based on predefined settings. The flexibility provided by this manager enables:

• Changes to individual settings.
• Application of skins that change multiple settings simultaneously.

Exposing Sass Variables for Customization

To configure your theme for customization:

1. Open the Sass File: Identify the file containing the variable you wish to expose.
2. Use Comments: Follow any variable declaration with an inline or block comment.
3. Editable Function: Utilize the editable() function within the comment to declare your variable as editable.
4. Save and Publish: Save the file, ensuring your new settings are included in the theme’s manifest so they’re available for SMT.
5. Testing: Use theme developer tools to verify your theme post-modification.

$sc-primary-color: red; //
$sc-primary-color: red; /*  */

Organizing Exposed Variables

To enhance user experience, organize the exposed variables using groups:

1. Open the Relevant Sass File: Access the Sass file containing the variable.
2. Define Groups: Use the group() function within the comment tags to catalog variables logically.
3. Save Changes: Ensure all new organizational structures are saved, activating them within the SMT as needed.

Example of Grouping Variables

The group() function can be implemented anywhere within your Sass files, though it's best to associate it with the relevant variable for clarity.

// Group variables for colors
//   { "id": "color-group", "label": "Color Settings" }

By following these structured approaches, developers can ensure that site administrators find the theme customization process not just efficient but also intuitive.

Who This Affects

• Site Administrators: Who will utilize the SMT for customizing the site.
• Theme Developers: Responsible for structuring themes to be easily editable.

Key Takeaways

• SMT empowers site administrators with significant customization capabilities.
• Properly exposing and organizing Sass variables enhances usability.
• The Theme Skin Manager allows for simultaneous changes across multiple settings, streamlining the customization process.

Source: This article is based on Oracle's official NetSuite documentation.