Amorphic Product Customization Guide

Amorphic provides a simple and flexible way for organizations to tailor the user interface and brand elements of the platform to better align with their internal branding, support channels, and terminology. This customization is handled via two optional files that can be updated in the deployed web application’s S3 directory.

note

The customization files are non-destructive; if fields are omitted, default values will be used.

---

Overview

Amorphic supports two types of UI customizations:

1. Functional & Branding Customizations via customizations.json
2. Styling & Theming via customizations.css

These files allow administrators and DevOps teams to personalize the application experience without modifying the core source code.

---

customizations.json

This JSON file allows advanced users and administrators (with the help of DevOps) to customize key product metadata and behavior.

Deployment Path

The customizations.json file should be placed in the deployed Amorphic web application's S3 directory, under /customizations directory.

Supported Fields

Field	Description
logoPath	URL of a custom logo to replace the default Amorphic logo.
projectName	Custom project or product name to replace "Amorphic" in the UI.
showDocumentation	Show or hide documentation links with the application (boolean value)
documentationUrl	URL to redirect users to custom documentation.
feedbackAddress	Email address to collect user feedback.
supportEmailAddress	Email address for user support inquiries.
customLinks	Array of additional links (name + URL) to be shown in the UI.
unauthenticatedPageObject	Map of image URLs to replace default illustrations on login or error pages.
aliases	Object map to rename core Amorphic services.

Sample customizations.json

{
    "logoPath": "/customizations/media/Logo.svg",
    "condensedLogoPath": "/customizations/media/LogoMark.svg",
    "projectName": "Custom Project Name",
    "copyRightStatement": "Custom Copyright Statement",
    "feedbackAddress": "custom@support.com",
    "supportEmailAddress": "custom@support.com",
    "showDocumentation": true,
    "documentationUrl": "https://v3docs.amorphicdata.io/",
    "customLinks": [
        {
            "displayText": "Jira Link",
            "redirectionUrl": "https://cloudwick.atlassian.net/jira/"
        },
        {
            "displayText": "Zendesk",
            "redirectionUrl": "https://cloudwick.zendesk.com/hc/en-us"
        }
    ],
    "loginPage": {
        "illustrationImgProps": {
            "className": "w-full h-full object-cover",
            "src": "/customizations/media/BG1.jpeg",
            "alt": "Login Page Illustration"
        },
        "heading": {
            "en-US": ""
        },
        "subHeading": {
            "en-US": ""
        }
    },
    "registerPage": {
    },
    "forgotPwdPage": {
    },
    "forcePwdResetPage": {
    },
    "setupMfaPage": {
    },
    "verifyOtpPage": {
    },
    "aliases": {
        "dataset": "datastore"
    }
}

---

customizations.css

This optional stylesheet allows you to override or extend the default Amorphic theme, including fonts, colors, layout tweaks, and more.

Deployment Path

Place the customizations.css file under /customizations S3 directory as the deployed frontend. It will be automatically picked up by the application if present.

Use Cases

• Apply corporate brand colors
• Customize button styles
• Update typography
• Modify layout margins or paddings
• Add animations or transitions

Sample customizations.css

:root {
  --primary-color: #0033cc;
  --accent-color: #00cc99;
  --font-family: 'Open Sans', sans-serif;
}

.header-logo {
  max-height: 40px;
}

.button-primary {
  border-radius: 8px;
  background-color: var(--primary-color);
}

---

Deployment Steps

tip

Co-locate media: As all Amorphic deployments have strict content-security-policies, co-locating your media would be helpful to access your media files. Place media files under /customizations/media directory and provide relative links for customizations.json file

example:

"logoPath": "/customizations/media/Logo.svg"

1. Prepare Files Create or update customizations.json and/or customizations.css.

2. Upload to S3 Navigate to your deployed Amorphic web application's S3 bucket and upload the files to the /customizations directory.

3. Invalidate CloudFront Cache (if applicable) If your deployment uses CloudFront or another CDN, ensure you invalidate the cache so changes are reflected immediately.

4. Refresh Browser Clear browser cache or do a hard refresh (Ctrl + Shift + R) to see updates.

5. Reset Application If changes are not immediately reflected in your application try resetting the app by following the link (https://>deployment-url</reset)

---

Notes

• The customization files are non-destructive; if fields are omitted, default values will be used.
• Any invalid or unrecognized keys in customizations.json will be ignored gracefully.
• CSS overrides are additive; ensure specificity if overriding deeply nested styles.

---

Need Help?

If you need assistance configuring your customization or would like to request additional support options, please contact: 📧 Amorphic Support – amorphic-support@cloudwick.com