Styling & Customization
There are two primary means of customizing the components in the Thirstie SDK.
- Application Configuration for your brand theme.
- Overridding CSS Variables
Application Configuration and Brand Theme
The appConfig used to initialize the SDK contains variables to specify your branding assets and theme colors. See Getting Started.
| Configuration Variable | Description |
|---|---|
| brandLogo | Logo to display on age gate and during checkout |
| brandLogoAltText | Alt text for logo |
| primaryColor | Your primary brand color, used for CTAs and other components that need to match your brand theme. |
| primaryContrastingColor | Used as the text color when the primaryColor is the background color, or as the background for primaryColor text. |
| secondaryColor | A secondary brand color for highlights |
| secondaryContrastingColor | Used as the text color when the secondaryColor is the background color, or as the background for secondaryColor text. |
| supportEmail | Used 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 |
| routing | You can provide custom routing for checkout and "continue shopping" |
| plpAddressInput | A 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 /> |
| pdpAddressDisclaimer | A 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. |
| pdpFAQName | Custom title for FAQ section on the <th-pdp> and <th-pdp-commerce> PDP components. |
| faqContent | Custom content for the FAQ section on the <th-pdp> and <th-pdp-commerce> PDP components. |
| pdpDiscoverMoreTitle | Custom title for "Show Recommendations" section, <th-pdp> only. |
| cartTitle | Custom title for shopping cart summary and checkout |
| emptyCartMsg | Custom message to show if cart is empty on cart summary and checkout components. |
| emailOptInText | Custom 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. |
| footerMsg | Custom language to show in compliance disclaimer components. Note, Thirstie reserves the right to review and reject compliance language. |
| changeAddressMsg | Custom language to show in the <th-address-check> component if the user tries to change address after adding items to the cart. |
| hideDOB | Option to hide the date of birth input in the User Information section of checkout. Defaults to false, meaning the date of birth that was provided in any age gate will be displayed for the user and the user will be able to update. If the user has not passed an age gate prior to checkout, they will always be prompted for a date of birth and subject to legal drinking age (LDA) checks at checkout. |
| plpBtnName | Custom label for the add-to-cart button on PLP (product listing) components. |
| pdpBtnName | Custom label for the add-to-cart button on PDP (product detail) components. |
| pdpUnavailableMsg | Custom message to display when a product is unavailable on PDP components. |
| pdpDescHeader | Custom title for the product description section on PDP components. |
| legalLanguage | Custom legal language displayed in compliance contexts. Note, Thirstie reserves the right to review and reject compliance language. |
| cartCheckoutBtnName | Custom label for the proceed-to-checkout button in the cart. |
| cartContinueShoppingBtnName | Custom label for the continue-shopping button in the cart. |
| cartIconSize | Size (in pixels) of the cart icon. |
| cartHeaderIconSize | Size (in pixels) of the cart icon displayed in the header. |
| openCartOnAdd | When true, automatically opens the cart drawer when an item is added. Defaults to false. |
| enableCartCheckoutButtonHover | When true, enables a hover effect on the cart checkout button. Defaults to false. |
| disclaimerAlertMsg | Custom message for the compliance disclaimer alert shown at checkout. |
| addToCartError | Custom error message displayed when adding an item to the cart fails. |
| checkoutUserInfoError | Custom error message for validation failures on the User Information step of checkout. |
| checkoutShippingError | Custom error message for validation failures on the Shipping step of checkout. |
| checkoutPaymentError | Custom error message for validation failures on the Payment step of checkout. |
| continueCheckoutError | Custom error message displayed when proceeding to the next checkout step fails. |
| zipcodeError | Custom error message displayed when zip code validation fails. |
| viewProductError | Custom error message displayed when a product cannot be loaded. |
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-paymentall relate to styling the Stripe payment element that we use to securely capture payment information.Note that the colors provided for
--th-checkout-paymentMUST be specified as hex values, because Stripe does not recognizergborrgbavalues. For example, rgba(67, 255, 100, 0.85) should be specified as #43ff64d9.
css
:root {
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Colors */
--th-c-white: #fff;
--th-c-smokywhite: #fafafa;
--th-c-light: #e4e4e4;
--th-c-gray: #e0e0e0;
--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-charcoal: #464646;
--th-c-nearBlack: #020202;
--th-c-nearWhite: #fafafa;
--th-c-mediumGrey: #666;
--th-c-shadowGrey: #d3d2d2;
--th-c-svgIconGrey: #73777a;
--th-c-starRatingGold: gold;
--th-c-blackDisabledText: #262b3073;
--th-c-vibrantBlue: #007bff;
--th-c-lavendarIndigoLight: #646cff;
--th-c-fuchsia: #e600b4;
--th-c-paleYellow: #fff8e1;
--th-c-greysDisabledGrey: var(--th-c-greysMediumLightGrey, #bdbdbd);
--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, 0.25);
--th-c-greysDarkGrey-Blur: rgba(79, 79, 79, 0.6);
--th-c-blackModal-Blur: rgba(0, 0, 0, 0.33);
--th-c-blackDropdown-Blur: rgba(0, 0, 0, 0.1);
--th-c-blackBorder-Blur: rgba(0, 0, 0, 0.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;
/* font-size scale */
--th-font-size-xs: 10px;
--th-font-size-xs-alt: 0.8rem;
--th-font-size-sm: 12px;
--th-font-size-sm-alt: 0.875rem;
--th-font-size-md: 15px;
--th-font-size-base: 16px;
--th-font-size-xl: 24px;
/* z-index scale */
--th-z-index-dropdown: 1000;
--th-z-index-overlay: 9999;
--th-z-index-user-container: 200010;
--th-z-index-modal: 2000000;
--th-z-index-modal-overlay: 2000001;
--th-z-index-tooltip: 2000000000;
/* style variables */
--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, #bdbdbd);
--th-border-form: 1px solid var(--th-border-color, #bdbdbd);
--th-input-focus-outline: 2px solid var(--th-c-greysDarkGrey, #4f4f4f);
--th-border-radius: 4px;
--th-header-dividers: 1px solid var(--th-c-greysLightestGrey, #f2f2f2);
--th-account-dividers: 1px solid var(--th-c-gray, #e0e0e0);
--th-checkout-breadcrumb-completed: var(
--th-c-brandPrimaryColor,
var(--th-c-dark, #242424)
);
--th-checkout-breadcrumb-inactive: var(--th-c-greysDisabledGrey, #bdbdbd);
--th-c-cart-message-bg: var(--th-c-greysLightestGrey, #f2f2f2);
--th-c-cart-message-text-color: var(--th-c-alertWarningPrimary, #ba8808);
--th-checkout-bg: var(--th-c-smokywhite, #fafafa);
--th-checkout-container-bg: var(--th-checkout-bg, #fafafa);
--th-checkout-container-text-color: var(--th-c-dark, #242424);
--th-checkout-container-box-shadow:
0 0 #00000000, 0 0 #00000000, 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
--th-checkout-form-bg: var(--th-c-white, #fff);
--th-checkout-input-bg: var(--th-c-white, #fff);
--th-checkout-input-disabled-bg: var(--th-c-greysLightestGrey, #f2f2f2);
--th-checkout-button-disabled-bg: var(--th-c-greysLightestGrey, #f2f2f2);
--th-checkout-card-bg: var(--th-checkout-form-bg, #fff);
--th-checkout-border: var(--th-border-form, 1px solid #bdbdbd);
--th-checkout-border-radius: var(--th-border-radius, 4px);
--th-checkout-text-color: var(--th-c-dark, #242424);
--th-checkout-payment-border: var(--th-checkout-border, 1px solid #bdbdbd);
--th-checkout-payment-border-radius: var(--th-checkout-border-radius, 4px);
--th-checkout-payment-background-color: var(--th-checkout-form-bg, #fff);
--th-checkout-payment-text-color: var(--th-checkout-text-color, #242424);
--th-checkout-payment-header-color: var(
--th-checkout-payment-text-color,
#242424
);
--th-checkout-payment-input-border: var(--th-border-form, 1px solid #bdbdbd);
--th-checkout-payment-input-bg: var(--th-checkout-input-bg, #fff);
--th-checkout-payment-input-text-color: var(--th-c-black, #000);
--th-checkout-payment-placeholder-text-color: var(
--th-c-greysMediumDarkGrey,
#828282
);
--th-checkout-payment-input-focus-outline: var(
--th-input-focus-outline,
2px solid #4f4f4f
);
/*
variables that are undefined by default, but can be used to override other settings
--th-c-header-icon: sets iconColor in CartNav & UserNav
--th-c-header-icon-count: sets countColor in CartNav & UserNav
*/
}