Customizing Loyalty Web Kit with CSS

The Loyalty Web Kit provides built-in configuration options to adjust core visual elements (e.g., colors, button labels, and display options) via its interface. However, if you want the look and feel to be more closely aligned with your brand identity — including typography, layout, spacing, and component styling — you can extend the personalization using custom CSS.

Below are some examples of custom CSS:

1. Colors & Typography

Adjust the color palette and font styling to reflect your brand identity:

Change text color and font for subtitles on the home page

.splio-home--description.splio-subtitle {  
  color: #27426d;
  font-family: "Helvetica Neue", sans-serif;  
  font-size: 14px;  
}

Button text color

.splio-btn {  
  color: #2992fc;  
}

2. Layout & Spacing

Tweak spacing and alignment to fit your design system:

Add spacing inside reward cards

.splio-reward-card--details {  
  padding-top: 1rem;  
}

Add margin and padding below summary section

.splio-loyalty-summary {  
  margin-bottom: 2.5rem;  
  padding-bottom: 2.5rem !important;  
}

Align and space filters

.splio-rewards-attribution--filters,  
.splio-points-history--filters {  
  justify-content: normal;  
  gap: 1rem;  
}

3. Border Radius & Shapes

Create a rounded look across components:

Round cover images

.splio-home--cover-image > img {  
  border-radius: 1.5rem !important;  
}

Round main container

.splio-home--mw-container {  
  border-radius: 1rem !important;  
}

Round buttons

.splio-btn {  
  border-radius: 3rem !important;  
}

4. Element Visibility

Hide elements that aren't needed in your use case:

Hide point cost on reward cards

.splio-reward-card--points-cost,  
.splio-reward-details--points-cost {  
  display: none;  
}

Hide bottom CTA button

.splio-btn.splio-reward-details--bottom--button {  
  display: none;  
}

5. Button Styling

Customize button appearance across different contexts:

Standard button styling

.splio-home-button,  
.splio-home--about > .splio-btn,  
.splio-btn.splio-reward-details--bottom--button {  
  background-color: #3056a1;  
  color: #fff;  
}

Points link

.splio-loyalty-summary--points--link {
  text-align: center;  
  cursor: pointer;  
  padding: 0.5rem 1rem;  
  line-height: 1.5rem;  
  background-color: var(--splio-color-primary);  
  width: fit-content;  
  color: #ffffff !important;  
  border-radius: 3rem !important;  
  font-size: 1rem;  
}