Using custom CSS in the Affinity customer portal

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.