Customizing the Affinity customer portal theme
The Affinity customer portal theme can be customized and updated to match your brand. Stores set to Embedded in platform storefront make customizations directly in the Shopify Theme Editor and can use CSS while stores using Hosted by Recharge must make customizations using CSS. This guide explains how to get started making customizations with the Affinity customer portal theme.
Before you start
- The Affinity customer portal theme is currently in Early Adopter status. If you're interested in using Affinity, fill out the opt-in form. For more information, see Early Adopter Program.
- Do not target other classes in the Affinity customer portal theme other than the classes provided in this guide. Recharge provides no guarantee that these selectors will work in the future and its subject to change.
- Stores using Hosted by Recharge and Embedded in platform storefront can add CSS customizations through your Recharge customer portal settings.
- If your color changes do not reflect when saved, ensure the theme.liquid file contains a proper open <body> and close </body> tag.
- Updating styling through CSS requires custom code and is not supported by Recharge as per the design and integration policy. If you require further assistance from a developer, visit the Recharge Agency Partner Directory.
Watch a video
Affinity CSS classes
Note: The .recharge-theme class is reused across different components and should only contain CSS variables. Do not additional styles such as margin or paddings.
You can target the .recharge-theme class and customize the following default variables:
/* Color: Brand */ --recharge-color-brand: #467c99; --recharge-color-brand-120: #38637a; --recharge-color-brand-20: #6b96ad; --recharge-color-brand-40: #90b0c2; --recharge-color-brand-60: #bed1db; --recharge-color-brand-75: #e3ebf0; --recharge-color-brand-85: #f6f8fa; /* Color: Neutral */ --recharge-color-neutral: #0b1317; --recharge-color-neutral-80: #3c4245; --recharge-color-neutral-70: #545a5d; --recharge-color-neutral-40: #9da1a2; --recharge-color-neutral-10: #e7e7e8; /* Color: Positive */ --recharge-color-positive120: hsl(148, 100%, 27%); --recharge-color-positive: hsl(148, 100%, 33%); --recharge-color-positive80: hsl(148, 57%, 46%); --recharge-color-positive60: hsl(148, 49%, 60%); --recharge-color-positive40: hsl(148, 49%, 73%); --recharge-color-positive20: hsl(148, 50%, 87%); --recharge-color-positive10: hsl(148, 49%, 93%); /* Color: Caution */ --recharge-color-caution120: hsl(43, 100%, 40%); --recharge-color-caution: hsl(43, 100%, 50%); --recharge-color-caution80: hsl(43, 100%, 60%); --recharge-color-caution60: hsl(43, 100%, 70%); --recharge-color-caution40: hsl(43, 100%, 80%); --recharge-color-caution20: hsl(43, 100%, 90%); --recharge-color-caution10: hsl(43, 100%, 95%); /* Color: Critical */ --recharge-color-critical120: hsl(12, 87%, 40%); --recharge-color-critical: hsl(12, 87%, 50%); --recharge-color-critical80: hsl(12, 86%, 70%); --recharge-color-critical60: hsl(12, 85%, 80%); --recharge-color-critical40: hsl(12, 85%, 80%); --recharge-color-critical20: hsl(12, 85%, 90%); --recharge-color-critical10: hsl(12, 85%, 95%); /* App */ --recharge-app-background: transparent; --recharge-app-container: 1144px; --recharge-app-vertical-padding: 0px; --recharge-app-zIndex: 9999999; --recharge-views-background: #FFFFFF; --recharge-view-container: 752px; /* Images */ --recharge-images-ratio: 1; /* Corners */ --recharge-corners-radius: 8px; /* Cards */ --recharge-cards-background: #FFFFFF; --recharge-cards-border-color: var(--recharge-cards-background); /* Typography */ --recharge-typography-light: #FFFFFF; --recharge-typography-primary: var(--recharge-color-neutral); --recharge-typography-secondary: var(--recharge-color-neutral-70); --recharge-typography-scale: 16px; --recharge-typography-size-1: calc(3 * var(--recharge-typography-scale)); --recharge-typography-size-2: calc(2.25 * var(--recharge-typography-scale)); --recharge-typography-size-3: calc(1.625 * var(--recharge-typography-scale)); --recharge-typography-size-4: calc(1.25 * var(--recharge-typography-scale)); --recharge-typography-size-5: calc(1 * var(--recharge-typography-scale)); --recharge-typography-size-6: calc(0.875 * var(--recharge-typography-scale)); --recharge-typography-size-7: calc(0.75 * var(--recharge-typography-scale)); /* Buttons */ --recharge-button-brand: var(--recharge-color-brand); --recharge-button-color: #FFFFFF; --recharge-button-border-radius: calc(var(--recharge-corners-radius) / 2); --recharge-button-font-family: inherit;
Affinity components
Target specific Recharge CSS classes to customize the look and feel of the following components.
Text
recharge-text
recharge-text-p1
recharge-text-p2
recharge-text-p3
recharge-text-p3-compact
recharge-text-p4
recharge-text-p5
Heading
recharge-heading
recharge-heading-h1
recharge-heading-h2
recharge-heading-h3
recharge-heading-h4
Button
recharge-button
recharge-button-primary
recharge-button-secondary
recharge-button-tertiary
Other elements
recharge-action-link
recharge-alert
recharge-badge
recharge-card
recharge-container
rechrge-icon
recharge-image
recharge-pull
recharge-textarea
recharge-textfield
Example code for updating heading
.recharge-heading {
font-family: sans-serif;
letter-spacing: 1px;
}
Was this article helpful?
0 out of 0 found this helpful
