Using custom CSS in the Affinity customer portal
Take your Affinity customizations to the next level with custom CSS.
Affinity seamlessly integrates with your brand's aesthetic, inheriting typography and design elements from its context, and you can easily make high-level theming choices using Shopify's theme editor without writing code.
You can, however, use CSS for more advanced customization options, although it requires careful handling. You must be on the Recharge Pro plan, or a Custom plan, to make advanced customizations to the Affinity customer portal.
This guide explains the best practices for implementing custom CSS in Affinity.
Platform:
- Shopify Checkout Intergration
- Recharge Checkout on Shopify
CSS customization best practices
Recharge continuously evolves the Affinity portal to incorporate feedback and new features into its design. To minimize the risk of future changes breaking your customizations, Affinity is selective about the updates you can and can not make, and the elements you can target.
Use custom CSS to refine the appearance of the portal
Implement the following cosmetic changes to enhance the visual aspects of the portal without altering the layout:
- Color
- Background
- Border
- Font size
Leverage global variables for theming updates
Define the general look and feel of Affinity using global variables for consistency across the portal.
Only target safe classes
Most classes in the Affinity DOM appear random (ie. _15b7gxl0 _17o99wpk3
) and should not be targeted, as their names are dynamic and subject to change. However, classes starting with .recharge- are specifically provided for your use and should be safe to target following best practices.
Avoid directly targeting elements
Instead, focus on targeting classes prefixed with .recharge-
for additional style customizations, adhering to the best practices described above.
Avoid altering the layout structure
Modifying the arrangement of elements within the layout (e.g., changing the order or position) is not supported in Affinity. Doing so may lead to issues when Affinity introduces new features that potentially alter the DOM structure.
Theming
Global variables
Most styles in Affinity are stored using CSS variables. Overwrite default values by targeting the .recharge-
theme class and customizing default variables.
Note:
.recharge-theme
should only contain css variables. Avoid adding any additional styles such as margin or paddings.
.recharge-theme {
/_ Colors: 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;
/_ Colors: 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;
/_ Colors: 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%);
/_ Colors: 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%);
/_ Colors: 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-heading-font-family: inherit;
--recharge-typography-heading-font-weight: 600;
--recharge-typography-body-font-family: inherit;
--recharge-typography-body-font-weight: 400;
--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;
/_ Carousel _/
--recharge-carousel-thumbnail-size: 124px
}
Base components
Base components serve as fundamental building blocks utilized throughout Affinity. These components have specific classes that you can use for additional theming customization.
Text
/* Headings */
.recharge-heading
.recharge-heading-h1
.recharge-heading-h2
.recharge-heading-h3
.recharge-heading-h4
/* Body text */
.recharge-text
.recharge-text-p1
.recharge-text-p2
.recharge-text-p3
.recharge-text-p3-compact
.recharge-text-p4
.recharge-text-p5
Buttons
.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-textarea
.recharge-textfield
.recharge-tab
.recharge-tab-active
.recharge-tab-inactive
Element-specific updates
You can use classes starting with .recharge-section-
and .recharge-component-
for more targeted updates, such as targeting a specific section or component.
For example, .recharge-section-next-order-actions .recharge-button
selects all buttons in the next-order-actions section.
Updated 7 months ago