CSS variables

If you're a theme developer, the GiftPrint widget exposes CSS custom properties for granular control over styling. Use these variables to match your brand's typography, spacing, and visual rhythm without needing JavaScript or modifying the widget's internal styles.

Available variables

The widget root element .giftprint-widget exposes these variables:

.giftprint-widget {
  --giftprint-font-family: inherit;
  --giftprint-font-size: 14px;
  --giftprint-accent: #333;
  --giftprint-border-radius: 8px;
  --giftprint-border-color: #e5e5e5;
  --giftprint-bg: #fafafa;
  --giftprint-price-color: #666;
  --giftprint-price-free-color: #2e7d32;
  --giftprint-preview-width: 240px;
  --giftprint-thumb-size: 60px;
}

Defaults:

• Font inherited from theme
• Accent (buttons, focus) — dark gray #333
• Border radius — 8px (subtle rounding)
• Borders — light gray #e5e5e5
• Background — off-white #fafafa
• Preview width — 240px (responsive, shrinks on mobile)
• Thumbnail size — 60px per template

Where to add

Add overrides to your theme's main CSS file:

Option 1: Global override in theme.liquid

<style>
  .giftprint-widget {
    --giftprint-font-family: 'Cormorant Garamond', serif;
    --giftprint-border-radius: 0;
    --giftprint-accent: #c41e3a;
  }
</style>

Option 2: In a custom CSS file

If your theme uses separate CSS files, add a <link> to theme.liquid:

{{ 'giftprint-custom.css' | asset_url | stylesheet_tag }}

Then in giftprint-custom.css:

.giftprint-widget {
  --giftprint-font-family: 'Georgia', serif;
  --giftprint-preview-width: 300px;
}

Option 3: Scoped to product page only

body.template-product .giftprint-widget {
  --giftprint-accent: #8b5cf6;
  --giftprint-border-radius: 12px;
}

Component class names

For even finer control, target specific widget components with BEM-style class names:

.giftprint-widget__header { /* Heading and price */ }
.giftprint-widget__toggle { /* On/off checkbox row */ }
.giftprint-widget__content { /* Message input and preview, hidden by default */ }
.giftprint-widget__thumbs { /* Template grid */ }
.giftprint-widget__thumbs-label { /* "Choose a style" label */ }
.giftprint-widget__category-label { /* "Styles" / "Occasions" sub-headers */ }
.giftprint-widget__thumb { /* Individual template button */ }
.giftprint-widget__thumb--active { /* Selected template */ }
.giftprint-widget__preview { /* Preview pane */ }
.giftprint-widget__preview--minimal { /* Preview gets a per-template modifier */ }
.giftprint-widget__preview-text { /* Inner preview text wrapper */ }
.giftprint-widget__preview-placeholder { /* Empty-state placeholder text */ }
.giftprint-widget__names { /* Recipient/sender name row */ }
.giftprint-widget__name-field { /* Single recipient or sender input */ }
.giftprint-widget__message { /* Message textarea wrapper */ }
.giftprint-widget__counter--warning { /* Counter when near or over the optimal limit */ }
.giftprint-widget__price { /* Paid gift note price */ }
.giftprint-widget__price--free { /* Free-price label */ }

The character counter carries no base class of its own — only the --warning modifier is added dynamically. Target it through its data attribute instead:

[data-giftprint-counter] {
  display: none;
}

The same applies to the message textarea ([data-giftprint-textarea], also reachable as #giftprint-message) and the recipient / sender inputs ([data-giftprint-to], [data-giftprint-from]).

Examples

Match brand serif font

.giftprint-widget {
  --giftprint-font-family: 'Playfair Display', serif;
  --giftprint-font-size: 15px;
}

Square corners (minimal aesthetic)

.giftprint-widget {
  --giftprint-border-radius: 0;
  --giftprint-border-color: #333;
}

Branded accent color

.giftprint-widget {
  --giftprint-accent: #b8860b; /* Gold for luxury brand */
}

Larger preview for mobile-first store

.giftprint-widget {
  --giftprint-preview-width: 100%;
}

@media (min-width: 768px) {
  .giftprint-widget {
    --giftprint-preview-width: 280px;
  }
}

Transparent background

.giftprint-widget {
  --giftprint-bg: transparent;
  --giftprint-border-color: #ccc;
}

App settings vs CSS variables

The two layers cover different things and don't overlap:

App settings control behavior and data — whether the widget is on, what it costs, which fields customers can fill in, and whether they can pick a template. No code required.

CSS variables control appearance — colors, typography, spacing, and sizing. There are no color pickers in the theme editor; styling the widget always means CSS.

If you're a merchant without code access and the defaults don't match your theme, the fastest path is to paste a small .giftprint-widget { ... } block into your theme's stylesheet using the examples above, or ask your theme developer to do it.

Mobile responsiveness

The widget automatically adjusts for small screens. If you override sizing:

• Keep --giftprint-preview-width under 100% to avoid horizontal scrolling
• Test the preview pane on actual mobile devices
• Use media queries to stack the template grid vertically on small screens

@media (max-width: 640px) {
  .giftprint-widget__thumbs {
    gap: 8px; /* Smaller spacing on mobile */
  }
  
  .giftprint-widget {
    --giftprint-thumb-size: 50px; /* Smaller thumbnails */
  }
}

Browser support

CSS custom properties (variables) are supported in all modern browsers (Chrome, Safari, Firefox, Edge). Internet Explorer 11 is not supported — variables will be ignored, widget falls back to defaults.

If you must support IE11, write plain CSS rules against the BEM classes (.giftprint-widget__header, .giftprint-widget__preview) instead of relying on custom properties.