Advanced CSS Customization for Wrapped

Overview

Wrapped now supports advanced CSS customization for design agencies and developers who need deeper control over the gift block appearance. This feature allows you to override specific design elements using CSS custom properties (CSS variables).

These CSS customizations only apply to storefront gift blocks using the new gifting experience setting.

Important: Use Theme Editor First

Most customizations can be accomplished directly through the Shopify theme editor side panel and do not require CSS knowledge. The theme editor provides controls for:

• Colors (backgrounds, text, buttons, borders)
• Button styles and hover effects
• Spacing and sizing options
• Border radius and visual effects
• Typography scaling

Only use CSS customization when you need design elements that aren't available in the theme editor.

CSS variables

The following CSS variables can be customized by adding them to your theme's CSS. This list of variables is evolving over time. We are starting with a simple set for the most commonly requested customizations.

If you find the need for other variables, contact our support team with your use case for consideration.

Typography customization

/* Button sizing, spacing, and alignment overrides */
--wrapped-launcher-button-content-justify-content: center;
--wrapped-launcher-button-max-width: 440px;

/* Button typography overrides */
--wrapped-button-text-transform: uppercase; /* none, capitalize, uppercase, lowercase */
--wrapped-button-letter-spacing: 0.1em;     /* normal, or any length value */
--wrapped-button-font-style: italic;        /* normal, italic, oblique */

/* Global typography */
--wrapped-font-weight-base: 500;            /* 100-900 or keyword values */
--wrapped-letter-spacing: 0.05em;           /* affects all text elements */

Implementation

Add these variables to your theme's main CSS file (usually assets/base.css  or assets/theme.css  or similar). If you cannot find the right file, do not continue with this guide.

/* Wrapped gift block customizations */
:root {
  --wrapped-button-text-transform: uppercase;
  --wrapped-button-letter-spacing: 0.1em;
  --wrapped-letter-spacing: 0.02em;
}

Targeting specific Gift Blocks

If you have multiple gift blocks and want to customize only specific ones, you can target them using their unique UUID:

/* Customize only a specific gift block */
wrapped-gift-block[uuid="<ADD_YOUR_UUID_HERE>"] {
  --wrapped-button-text-transform: uppercase;
  --wrapped-button-letter-spacing: 0.15em;
  --wrapped-button-font-style: normal;
}

/* Different styling for another gift block */
wrapped-gift-block[uuid="<ADD_YOUR_UUID_HERE>"] {
  --wrapped-button-text-transform: none;
  --wrapped-letter-spacing: 0.05em;
  --wrapped-font-weight-base: 600;
}

/* Center align the text in the gift block button, and add spacing */
wrapped-gift-block[uuid="<ADD_YOUR_UUID_HERE>"] {
  --wrapped-launcher-button-content-justify-content: center;
  margin-block-end: 1em;
}

Finding your Gift Block identifier

1. Navigate to your product page or cart page with the gift block
2. Open your browser's developer tools
3. Inspect the gift block element
4. Look for the uuid attribute on the element
5. Copy the UUID value

This approach allows you to maintain different styles for different gift blocks across your store, useful for:

• A/B testing different designs
• Product-specific gift experiences
• Seasonal or promotional variations

CSS variable priority

The customization system uses a three-tier priority system:

1. Highest Priority: Theme editor settings (always override CSS)
2. Medium Priority: Your CSS customizations using --wrapped-  variables
3. Lowest Priority: Wrapped's internal defaults

This ensures that merchants can always use the theme editor to customize the appearance with settings provided directly by Wrapped. Custom CSS properties are not intended to override the theme settings.

Use cases

This CSS customization system is designed for:

• Design agencies building custom themes
• Developers who need brand-specific typography
• Advanced users requiring design elements not available in the theme editor

Support

For questions about CSS customization, please contact support with your specific use case and we'll help determine the best approach. Our support team is unable to make coding changes to your theme files or CSS for gift blocks. This type of work requires a skilled professional.