Theming
We understand the need to customize the appearance of your blockchain components. Because of this, we've included the ability to customize nearly every aspect of every component.
Background colors
Anchor link to section titled "Background colors"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-bg-address-chip |
The background color of the copy address button located within the connected wallet button popover component. | #FAFBFB |
-- |
--sbc-bg-address-chip-hover |
The background color of the copy address button located within the connected wallet button popover component when hovered. | #F6F6F7 |
-- |
--sbc-bg-button-disabled |
The background color of a disabled button. | #F1F1F1 |
The "Available Soon" and "Sold Out" buttons from @shopify/tokengate. |
--sbc-bg-button-disabled-hover |
The background color of a disabled button when hovered. | #F1F1F1 |
The "Available Soon" and "Sold Out" buttons from @shopify/tokengate. |
--sbc-bg-button-primary |
The background color of a primary button. | #202223 |
ConnectButton |
--sbc-bg-button-primary-hover |
The background color of a primary button when hovered. | #44474A |
ConnectButton |
--sbc-bg-button-secondary |
The background color of a secondary button. | #FFFFFF |
All buttons (excluding icon buttons) located within the @shopify/connect-wallet modal. |
--sbc-bg-button-secondary-hover |
The background color of a secondary button when hovered. | #F6F6F7 |
All buttons (excluding icon buttons) located within the @shopify/connect-wallet modal. |
--sbc-bg-divider |
The background color of a divider element. | #E1E3E5 |
The logic (AND, OR) separator in the @shopify/tokengate component.The dividers between the wallets displayed in the "Get A Wallet" screen located within @shopify/connect-wallet modal. |
--sbc-bg-overlay |
The background color of body overlay elements. | rgba(18, 18, 18, 0.2) |
The background that covers the entire page when the Modal from @shopify/connect-wallet is openThe background that covers the entire page when the connected wallet popover is open on mobile devices. |
--sbc-bg-popover |
The background color of popover components. | #FFFFFF |
Connect wallet modal Connected wallet button popover |
--sbc-bg-skeleton |
The background color of skeleton components. | #E4E5E7 |
SkeletonDisplayText SkeletonThumbnail |
--sbc-bg-tokengate |
The background color of the tokengate component. | #FFFFFF |
Tokengate |
Border colors
Anchor link to section titled "Border colors"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-border-color-button-disabled |
The background color of a disabled button. | #202223 |
The "Available Soon" and "Sold Out" buttons from @shopify/tokengate. |
--sbc-border-color-button-primary |
The background color of a primary button. | unset |
ConnectButton |
--sbc-border-color-button-secondary |
The background color of a secondary button. | #C9CCCF |
All buttons (excluding icon buttons) located within the @shopify/connect-wallet modal. |
--sbc-border-color-divider |
The background color of a divider element. | #E1E3E5 |
The dividers between the wallets displayed in the "Get A Wallet" screen located within @shopify/connect-wallet modal.Note: This does not affect the logic separator in the @shopify/tokengate package. |
--sbc-border-color-popover |
The background color of popover components. | unset |
Connect wallet modal Connected wallet button popover |
--sbc-border-color-tokengate |
The background color of the tokengate component. | rgba(0, 0, 0, 0.12) |
Tokengate |
SVG fill colors
Anchor link to section titled "SVG fill colors"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-fill-qrcode-foreground |
The foreground color of a QR code. | #202223 |
The QR code displayed when connecting with a connector that supports QR codes. |
--sbc-fill-qrcode-background |
The background color of a QR code. | #FFFFFF |
The QR code displayed when connecting with a connector that supports QR codes. |
Text colors
Anchor link to section titled "Text colors"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-text-color-address-chip |
The text color of the address and icon in the copy address button located within the connected wallet button popover component. | #202223 |
-- |
--sbc-text-color-button-disabled |
The text color of a disabled button. | #8C9196 |
The "Available Soon" and "Sold Out" buttons from @shopify/tokengate. |
--sbc-text-color-button-primary |
The text color of a primary button. | #FFFFFF |
ConnectButton |
--sbc-text-color-button-secondary |
The text color of a secondary button. | #202223 |
All buttons (excluding icon buttons) located within the @shopify/connect-wallet modal. |
--sbc-text-color-critical |
The text color for error states. | #D72C0D |
The text displayed when an error occurs after signing a message request. |
--sbc-text-color-primary |
The text color of primary text elements. | #202223 |
All headings. |
--sbc-text-color-secondary |
The text color of secondary text elements. | #6D7175 |
Back, close, and help icons in @shopify/connect-wallet modalDescriptions in "What is a wallet?" modal screen Body text in Connecting and Sign message modal screens. Subheadings in @shopify/tokengate. |
Border radius
Anchor link to section titled "Border radius"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-border-radius-button-large |
The border radius for large buttons. | 6px |
ConnectButtonAll buttons (except for those mentioned in --sbc-border-radius-button-small) in @shopify/connect-wallet modal."Available Soon" and "Sold out" buttons from @shopify/tokengate |
--sbc-border-radius-button-medium |
The border radius for medium buttons. | 6px |
The disconnect button in the connected wallet button popover component. Any "Retry" buttons in the @shopify/connect-wallet modal. |
--sbc-border-radius-button-small |
The border radius for small buttons. | 6px |
The "Get" buttons in the "Get A Wallet" screen located within @shopify/connect-wallet modal. |
--sbc-border-radius-popover-desktop |
The border radius for popover components on desktop-sized devices (>= 640px). | 16px |
Connect wallet modal Connected wallet button popover |
--sbc-border-radius-popover-mobile |
The border radius for popover components on mobile-sized devices (< 640px). | 32px 32px 0px 0px |
Connect wallet modal Connected wallet button popover |
--sbc-border-radius-qrcode |
The border radius for QR codes displayed in @shopify/connect-wallet |
16px |
The QR code displayed when connecting with a connector that supports QR codes. |
--sbc-border-radius-tokengate |
The border radius of the tokengate component. | 8px |
Tokengate |
Border style
Anchor link to section titled "Border style"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-border-style-button-disabled |
The border style of a disabled button. | unset |
The "Available Soon" and "Sold Out" buttons from @shopify/tokengate. |
--sbc-border-style-button-primary |
The border style of a primary button. | unset |
ConnectButton |
--sbc-border-style-button-secondary |
The border style of a secondary button. | solid |
All buttons (excluding icon buttons) located within the @shopify/connect-wallet modal. |
--sbc-border-style-divider |
The border style of a divider element. | solid |
The dividers between the wallets displayed in the "Get A Wallet" screen located within @shopify/connect-wallet modal.Note: This does not affect the logic separator in the @shopify/tokengate package. |
--sbc-border-style-popover |
The border style of popover components. | unset |
Connect wallet modal Connected wallet button popover |
--sbc-border-style-tokengate |
The border style of the tokengate component. | solid |
Tokengate |
Border width
Anchor link to section titled "Border width"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-border-width-button-disabled |
The border width of a disabled button. | 0px |
The "Available Soon" and "Sold Out" buttons from @shopify/tokengate. |
--sbc-border-width-button-primary |
The border width of a primary button. | 0px |
ConnectButton |
--sbc-border-width-button-secondary |
The border width of a secondary button. | 1px |
All buttons (excluding icon buttons) located within the @shopify/connect-wallet modal. |
--sbc-border-width-divider |
The border width of a divider element. | 1px |
The dividers between the wallets displayed in the "Get A Wallet" screen located within @shopify/connect-wallet modal.Note: This does not affect the logic separator in the @shopify/tokengate package. |
--sbc-border-width-popover |
The border width of popover components. | 0px |
Connect wallet modal Connected wallet button popover |
--sbc-border-width-tokengate |
The border width of the tokengate component. | 1px |
Tokengate |
Font family
Anchor link to section titled "Font family"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-font-family-body-lg |
The font family of all body-lg text elements. |
Reference default value noted above | ConnectButtonConnected wallet address chip text Connector buttons TokenList titles |
--sbc-font-family-body-md |
The font family of all body-md text elements. |
Reference default value noted above | Tokengate subheaderTokengate error state (no unlocking tokens)Tokengate sold out state (below sold out button)TokenList subtitle |
--sbc-font-family-body-sm |
The font family of all body-sm text elements. |
Reference default value noted above | Tokengate logic (AND, OR) separatorTokenList order limit |
--sbc-font-family-heading-lg |
The font family of all heading-lg text elements. |
Reference default value noted above | Connecting modal screen title ("Connect with...") Signature request modal screen title ("Sign with...") |
--sbc-font-family-heading-md |
The font family of all heading-md text elements. |
Reference default value noted above | Modal headerTokengate title |
--sbc-font-family-heading-sm |
The font family of all heading-sm text elements. |
Reference default value noted above | "What are wallets?" modal screen ListItem titles |
| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-font-size-body-lg |
The font size of all body-lg text elements. |
1rem |
ConnectButtonConnected wallet address chip text Connector buttons TokenList titles |
--sbc-font-size-body-md |
The font size of all body-md text elements. |
0.875rem |
Tokengate subheaderTokengate error state (no unlocking tokens)Tokengate sold out state (below sold out button)TokenList subtitle |
--sbc-font-size-body-sm |
The font size of all body-sm text elements. |
0.75rem |
Tokengate logic (AND, OR) separatorTokenList order limit |
--sbc-font-size-heading-lg |
The font size of all heading-lg text elements. |
1.5rem |
Connecting modal screen title ("Connect with...") Signature request modal screen title ("Sign with...") |
--sbc-font-size-heading-md |
The font size of all heading-md text elements. |
1.25rem |
Modal headerTokengate title |
--sbc-font-size-heading-sm |
The font size of all heading-sm text elements. |
1rem |
"What are wallets?" modal screen ListItem titles |
Font weight
Anchor link to section titled "Font weight"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-font-weight-body-lg |
The font weight of all body-lg text elements. |
500 |
ConnectButtonConnected wallet address chip text Connector buttons TokenList titles |
--sbc-font-weight-body-md |
The font weight of all body-md text elements. |
400 |
Tokengate subheaderTokengate error state (no unlocking tokens)Tokengate sold out state (below sold out button)TokenList subtitle |
--sbc-font-weight-body-sm |
The font weight of all body-sm text elements. |
400 |
Tokengate logic (AND, OR) separatorTokenList order limit |
--sbc-font-weight-heading-lg |
The font weight of all heading-lg text elements. |
600 |
Connecting modal screen title ("Connect with...") Signature request modal screen title ("Sign with...") |
--sbc-font-weight-heading-md |
The font weight of all heading-md text elements. |
600 |
Modal headerTokengate title |
--sbc-font-weight-heading-sm |
The font weight of all heading-sm text elements. |
500 |
"What are wallets?" modal screen ListItem titles |
Line height
Anchor link to section titled "Line height"| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-line-height-body-lg |
The font size of all body-lg text elements. |
1.25rem |
ConnectButtonConnected wallet address chip text Connector buttons TokenList titles |
--sbc-line-height-body-md |
The font size of all body-md text elements. |
1.25rem |
Tokengate subheaderTokengate error state (no unlocking tokens)Tokengate sold out state (below sold out button)TokenList subtitle |
--sbc-line-height-body-sm |
The font size of all body-sm text elements. |
1rem |
Tokengate logic (AND, OR) separatorTokenList order limit |
--sbc-line-height-heading-lg |
The font size of all heading-lg text elements. |
1.75rem |
Connecting modal screen title ("Connect with...") Signature request modal screen title ("Sign with...") |
--sbc-line-height-heading-md |
The font size of all heading-md text elements. |
1.5rem |
Modal headerTokengate title |
--sbc-line-height-heading-sm |
The font size of all heading-sm text elements. |
1.25rem |
"What are wallets?" modal screen ListItem titles |
| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-padding-button-large |
The padding of large buttons. | 14px 20px |
ConnectButtonAll buttons (except for those mentioned in --sbc-border-radius-button-small) in @shopify/connect-wallet modal."Available Soon" and "Sold out" buttons from @shopify/tokengate |
--sbc-padding-button-medium |
The padding of medium buttons. | 10px 16px |
The disconnect button in the connected wallet button popover component. Any "Retry" buttons in the @shopify/connect-wallet modal. |
--sbc-padding-button-small |
The padding of small buttons. | 6px 12px |
The "Get" buttons in the "Get A Wallet" screen located within @shopify/connect-wallet modal. |
--sbc-padding-popover |
The padding of popover components. | 24px |
Connect wallet modal Connected wallet button popover |
--sbc-padding-tokengate |
The padding of the tokengate component. | 20px |
Tokengate |
| Variable name | Description | Default value | Affects |
|---|---|---|---|
--sbc-box-shadow-popover-desktop |
The box shadow of popover components on desktop-sized devices (>= 640px). | 0px 3px 6px -3px rgba(23, 24, 24, 0.08), 0px 8px 20px -4px rgba(23, 24, 24, 0.12) |
Connect wallet modal Connected wallet button popover |
--sbc-box-shadow-popover-mobile |
The box shadow of popover components on mobile-sized devices (< 640px). | 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 26px 80px rgba(0, 0, 0, 0.2) |
Connect wallet modal Connected wallet button popover |
--sbc-box-shadow-tokengate |
The box shadow of the tokengate component. | unset |
Tokengate |
All variables
Anchor link to section titled "All variables"A quick way to copy all variables (with their default values), into your style sheet.