Skip to content

Styling & Customization

There are two primary means of customizing the components in the Thirstie SDK.

  1. Application Configuration for your brand theme.
  2. Overridding CSS Variables

Brand Theme

The appConfig used to initialize the SDK contains variables to specify your branding assets and theme colors. See Getting Started.

Configuration VariableDescription
brandLogoLogo to display on age gate and during checkout
brandLogoAltTextAlt text for logo
primaryColorYour primary brand color, used for CTAs and other components that need to match your brand theme.
primaryContrastingColorUsed as the text color when the primaryColor is the background color, or as the background for primaryColor text.
secondaryColorA secondary brand color for highlights
secondaryContrastingColorUsed as the text color when the secondaryColor is the background color, or as the background for secondaryColor text.
supportEmailUsed on confirmation and other components to provide a support email. Thirstie will provide a custom email address for customer support prior to your production release
routingYou can provide custom routing for checkout and "continue shopping"
plpAddressInputA custom message to prompt the user to add an address or zip code to check price and availability. Used on <th-availability-wrapper /> and <th-availability-minify />
pdpAddressDisclaimerA custom message to prompt the user to add an address or zip code to check price and availability shown on PDP components if address has not been entered.
pdpFAQNameCustom title for FAQ section on the <th-pdp> and <th-pdp-commerce> PDP components.
faqContentCustom content for the FAQ section on the <th-pdp> and <th-pdp-commerce> PDP components.
discoverMoreLabelCustom title for "Show Recommendations" section, <th-pdp> only.
cartTitleCustom title for shopping cart summary and checkout
emptyCartMsgCustom message to show if cart is empty on cart summary and checkout components.
emailOptInTextCustom message to show for email opt-ins on the first page of checkout. The default message is "By checking this box you agree to receive marketing and promotional communications from us in the future."
This value is html-safe, so you can include links, using <a href="https://mylink.com">link</a> for example.
footerMsgCustom language to show in compliance disclaimer components. Note, Thirstie reserves the right to review and reject compliance language.
changeAddressMsgCustom language to show in the <th-address-check> component if the user tries to change address after adding items to the cart.

NOTE: except where noted, custom message text is not html-safe, so any included html tags will be displayed as plain text.

Theme colors

The primaryColor is used as background for buttons and text on the age gate.

The secondaryColor is used as the background for the banner on checkout pages and modals.

Overridding CSS Variables

The default theme CSS is customizable by overriding root level CSS variables. Default values for CSS Variables are set in thirstiebase.css which is packaged with @thirstie/ecomm-vue.

The CSS variables include design tokens for colors and common styling elements, such as borders and dividers. There is also a section for variables to allow styling for checkout and cart elements.

  • The variables which are prefixed with --th-checkout-payment all relate to styling the Stripe payment element that we use to securely capture payment information.

  • Note that the colors provided for --th-checkout-payment MUST be specified as hex values, because Stripe does not recognize rgb or rgba values. For example, rgba(67, 255, 100, 0.85) should be specified as #43ff64d9.

css
:root {
  /* Color design tokens */
  --th-c-white: #FFF;
  --th-c-smokywhite: #FAFAFA;
  --th-c-light: #e4e4e4;
  --th-c-greysLightestGrey: #F2F2F2;
  --th-c-greysLightGrey: #aaa;
  --th-c-greysMediumLightGrey: #BDBDBD;
  --th-c-greysMediumDarkGrey: #828282;
  --th-c-greysDarkGrey: #4F4F4F;
  --th-c-dark: #242424;
  --th-c-black: #000;

  --th-c-greysDisabledGrey: var(--th-c-greysMediumLightGrey);
  --th-c-black-Blur: rgba(0, 0, 0, 0.14);
  --th-c-blackLight-Blur: rgba(0, 0, 0, 0.2);
  --th-c-blackLightest-Blur: rgba(0, 0, 0, 0.12);
  --th-c-greysMediumDarkGrey-Blur: rgba(130,130,130, .25);

  --th-c-alertWrongPrimary: #B71C1C;
  --th-c-alertWrongTint: #FFE0E3;
  --th-c-alertSuccessPrimary: #1B5E20;
  --th-c-alertSuccessTint: #E3FAE4;
  --th-c-alertWarningPrimary: #BA8808;
  --th-c-alertWarningTint: #FFF1CC;

  --th-c-lavendarIndigoLight: #646cff;
  --th-c-fuchsia: #E600B4;
  --th-c-paleYellow: #FFF8E1;

  /* Style design tokens */
  --th-color-scheme: light dark;
  --th-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  --th-font-weight: 400;
  --th-line-height: 1.5;
  --th-border-color: var(--th-c-greysMediumLightGrey);
  --th-border-form: 1px solid var(--th-border-color);
  --th-input-focus-outline: 2px solid var(--th-c-greysDarkGrey);
  --th-border-radius: 4px;
  --th-header-dividers: 1px solid var(--th-c-greysLightestGrey);
  --th-account-dividers: 1px solid var(--th-c-gray);

  /* Checkout and cart styling variables */
  --th-checkout-breadcrumb-completed: var(--th-c-brandPrimaryColor, var(--th-c-dark));
  --th-checkout-breadcrumb-inactive: var(--th-c-greysDisabledGrey);

  --th-c-cart-message-bg: var(--th-c-greysLightestGrey);
  --th-c-cart-message-text-color: var(--th-c-alertWarningPrimary);

  --th-checkout-bg: var(--th-c-smokywhite, #fafafa);  /* .th-checkout */
  --th-checkout-container-bg: var(--th-checkout-bg); /* .th-checkout-section--container */
  --th-checkout-container-text-color: var(--th-c-dark, #242424); /* .th-checkout-form--container */

  --th-checkout-payment-border: var(--th-border-form);
  --th-checkout-payment-border-radius: var(--th-border-radius);
  --th-checkout-payment-background-color: var(--th-c-white);
  --th-checkout-payment-text-color: var(--th-c-dark);
  --th-checkout-payment-header-color: var(--th-checkout-payment-text-color);
  --th-checkout-payment-input-border: var(--th-border-form);
  --th-checkout-payment-input-bg: var(--th-c-white);
  --th-checkout-payment-input-text-color: var(--th-c-black);
  --th-checkout-payment-placeholder-text-color: var(--th-c-greysMediumDarkGrey);
  --th-checkout-payment-input-focus-outline: var(--th-input-focus-outline);
}