Design Customizations

This guide will help you create custom designs for your customer interface using SoftSlate Cloud Platform's powerful customization features. Please note that design customization capabilities are currently available exclusively for clients using the SCP staging environment. To request access to our staging environment, please contact our support team.

Once you're set up in the staging environment, you'll receive AWS S3 bucket credentials that provide access to a cloud storage location where you can maintain your custom templates. These same credentials also allow you to view and download all default templates, which serve as excellent references or starting points for your customizations.

Custom JSP Templates

The development workflow for customizing JSP files for your customer interface follows a structured approach that ensures safe and efficient customization. Here's the complete process:

Step 1: Set Up Your Development Environment

Install a file transfer application on your local computer that supports Amazon S3 transfers:

• For Mac users: We recommend Transmit for its excellent S3 integration

• For Windows users: WinSCP or any similar file transfer application that supports Amazon S3 will work effectively

Step 2: Access Your Template Repository

Use the credentials provided by our team to log into your JSP template repository. Once successfully connected, you'll see two important folders:

• default-templates - Contains all current default JSP templates

• [your-site-name] - Your custom template workspace

Step 3: Understand the Repository Structure

• default-templates folder: This contains all current default JSP templates used throughout the application. Templates are organized into logical subdirectories for easy navigation. This folder is updated periodically as we deploy application changes to the staging environment. Important: You cannot modify or delete files in this directory (you'll receive permission errors), but you can view and download them for reference.

• Your custom folder: Initially empty, this is where you'll develop all your customizations. It mirrors the same subdirectory structure as the default templates for consistency.

Step 4: Create Custom Templates

To customize any template:

1. Copy the desired template from the appropriate default-templates subdirectory

2. Paste it into the corresponding subdirectory in your custom folder

3. Open the file and make your required modifications

Step 5: Test Your Changes

After adding or modifying files in your S3 template repository:

1. Log into your staging site's administrator interface

2. Navigate to Operations -> Sync JSP Files ( /administrator/SyncJspFilesFromS3Form)

3. Click the blue sync button to download your templates from S3 into the running application

4. The system will display a list of synchronized files for confirmation:

5. Your JSP changes take effect immediately after synchronization. Use the customer interface on your staging site to view and test all modifications thoroughly.

Deployment to Production

Currently, JSP customizations can only be developed and tested in the staging environment. When you're satisfied with your changes and ready to deploy them to your live production environment, simply contact our support team. We'll review your custom templates for security considerations and deploy them to production for you.

Custom CSS and Javascript

Beyond modifying HTML markup in JSP templates, SCP provides several flexible methods for adding custom CSS and JavaScript to your site. Each approach offers different advantages depending on your customization needs.

Method 1: customer.css and customer.js Files

This approach is often the most straightforward and effective way to customize your site's styling and behavior, especially for moderate customization needs. You can use the same S3-based process described above for JSP templates.

For Custom CSS: Create a custom version of the following file in your custom subdirectory:

xxxxxxxxxx
/css/customer.css

This file is loaded after all built-in CSS files, allowing you to add new styles or override existing default styles with confidence that your changes will take precedence.

For Custom JavaScript: Similarly, create a custom version of this file to add new functionality or override default JavaScript behavior:

xxxxxxxxxx
/javascript/customer.js

This file is also loaded after all default JavaScript files, ensuring your custom scripts can interact with or modify existing functionality.

Method 2: Custom CSS Setting

For quick CSS adjustments or when you prefer working directly in the admin interface, you can use the Custom Styles and JavaScript Settings screen. This method is perfect for smaller tweaks or when you need to make changes without accessing the S3 repository.

Access this feature through the administrator interface, where you'll find input forms for pasting CSS code directly:

Important loading order: Changes made through this setting are loaded after all default CSS and even after the customer.css file, giving this method the highest precedence over any other styling.

Security Note: For security reasons, there is no admin interface setting available for customizing customer-facing JavaScript. This restriction prevents potentially malicious code from being injected that could intercept or manipulate critical security functions.

Method 3: customercss.jsp and customerjs.jsp

For advanced users who need more dynamic control over their CSS and JavaScript, SCP provides JSP template files that are dynamically evaluated on the server. This approach offers the most flexibility but requires deeper technical knowledge.

For Dynamic CSS: The admin CSS setting described in Method 2 is actually included by this JSP template:

xxxxxxxxxx
/css/customercss.jsp

For Dynamic JavaScript: Similarly, there's a JSP template for JavaScript:

xxxxxxxxxx
/javascript/customerjs.jsp

Advanced Capability: You can create custom versions of these files in your site's custom JSP directory. The key advantage of these JSP templates over static .css and .js files is that they're dynamically evaluated on the server. This means you can use JSP tags and dynamic logic to generate CSS or JavaScript based on runtime conditions, user data, or other dynamic factors.

Method 4: Custom Public Files

For extensive custom CSS or JavaScript that you prefer to maintain in separate files, SCP provides a public file system that's perfect for larger customizations.

Step 1: Create Your Custom Files Develop your CSS or JavaScript files locally with all your custom styling and functionality.

Step 2: Upload as Public Files Upload your files through the Administrator interface as "Public Files":

When uploading each Public File:

• Assign it a unique, descriptive code for easy reference

• Note the URL provided after upload—you'll need this for the next step

Step 3: Reference Your Files in JSP Templates Create custom versions of the appropriate JSP templates to include your files:

• For CSS files: Customize /core/htmlHead.jsp (this template generates the <head> section for every page)

• For JavaScript files: Customize /core/bottom.jsp (this template is rendered at the bottom of the <body> tag, which is the recommended location for JavaScript files)

Step 4: Deploy Your Changes Add references to your new public files in your custom JSP templates, then use the synchronization process described earlier to deploy your custom JSP templates to the staging environment.

Promoting File Changes From Staging To Live

Once you've developed and thoroughly tested your customizations in the staging environment, you're ready to deploy them to your live site. To ensure security and system integrity, contact our support team to have your changes promoted to the production environment. Because these customizations involve server-side files, our team must review all changes for security considerations before deployment.

Content Security Policy (CSP) Considerations

SCP implements robust security measures by requiring all responses from the platform to include a Content-Security-Policy (CSP) header. This security feature means that browsers will only allow content to be loaded from specifically approved URLs and domain names, including images, JavaScript files, stylesheets, and other assets.

Default Permissions: The AWS S3 bucket for your Public Files is included in the default CSP policy, so you can upload assets as Public Files and reference them in your customizations without additional configuration.

Requesting Policy Changes: If your custom design requires including content from external sources or specific domains not currently in the CSP policy, you can request modifications by contacting our support team. We'll work with you to securely accommodate your requirements.

Migrating from SoftSlate Commerce

If you're upgrading from SoftSlate Commerce and have existing custom JSP templates, here are the key changes you'll need to make for compatibility with SCP:

1. URL Generation: Replace a href with a href <spring:url> for proper URL generation

2. Request Scope: Replace requestScope. with "" (empty string)

3. Configuration: Add config.jsp at the top of each JSP file

4. Message Tags: Replace bean:message with spring:message

5. Template System: Use ecc:insertTemplate and insertTemplateParam for template inclusion

6. JSP Performance: Remove flush="false" attributes

7. Asset URLs: Add S3 base URL to all image URLs for proper asset loading

8. CSS Framework: Update from Bootstrap 3 to Bootstrap 5 for modern styling and components

Migration Support: Our team can provide additional guidance for complex migrations. Don't hesitate to contact us if you need assistance with your template migration.

Other Tools for Customizing and Extending SCP

Custom Fields are just one tool available for customizing SCP for your business.

• Extend the functions of SCP to meet your specific business needs, synchronize data with your existing systems, or create entirely new user interface applications with our API: API Documentation

• Create custom fields to store special information, including collecting custom fields from customers during the ecommerce checkout process: Custom Fields

• Engage with us to develop your project! Find out more about SoftSlate's Services