Styling & Customization
There are two primary means of customizing the components in the Thirstie SDK.
- Application Configuration for your brand theme.
- 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 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. |
discoverMoreLabel | 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. |
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 recognizergb
orrgba
values. For example, rgba(67, 255, 100, 0.85) should be specified as #43ff64d9.
: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);
}