You can change how your gift blocks look in the Gifting editor, with a live preview of each change before your customers see it. A preset sets the whole look in one press, and the rows under it fine tune colors, fonts, buttons, images and spacing.

Where to find it

In Wrapped, open Gifting for Products or Gifting for Orders.
On the Gifting editor card, press Open editor.

The editor opens on the look your gift blocks show today. For a tour of the editor, see Introducing the Gifting editor.

Start with a preset

Press Presets, and then press a preset to try it. A preset is a complete look: colors, fonts, field and button styles that work together. It applies to your gift blocks on the product page, in the cart and at checkout.

Fine tune the style

The rows under Presets change one part of the look. Each row starts from your preset.

Appearance: background, border, corners, spacing and hover effect.
Typography: text colors, text size and fonts.
Form fields: field colors and the color of the selected choice.
Buttons: the launcher button, the Save and Remove buttons, and button text.
Images: image style, thumbnail size and image position.

Set spacing for one gift block

Under Gift blocks, press a gift block, such as Product page. The settings under Settings for this gift block apply to that gift block only.

Space around (margin) and Space inside (padding) set the space outside and inside the gift block, for all sides or one side at a time. See Set the space around and inside a gift block.

A gift block that opens as a Dialog also has Launcher max width, which sets how wide the launcher button can grow. Leave it on Default to use the value from your preset.

The Product page block panel in the Gifting editor with Space around (margin), Space inside (padding), and Launcher max width outlined in red

Settings for the product page gift block

Press Save to show your changes in your online store.

Custom CSS

Change colors, fonts, buttons, form fields and images in the Gifting editor. The parts inside a gift block can't be styled with CSS from your theme, so a class name or element selector inside the gift block has no effect.

/* Not possible: the parts inside a gift block can't be targeted */
[uuid="UUID_HERE"] .gift-button {
  background: #000;
}

Theme CSS reaches the gift block as a whole. To style one gift block, target it by its UUID: press the Developer tools icon on the gift block row in the Gift blocks card of your gift option page, and then press Gift Block UUID. See Developer tools. Space on the left and right of a gift block is a setting in the Gifting editor, so it needs no CSS.

[uuid="UUID_HERE"] {
  /* your rule for the whole gift block */
}

Recap

The Gifting editor sets the look of your gift blocks, with a live preview.
A preset gives you a complete look in one press. Appearance, Typography, Form fields, Buttons and Images fine tune it.
Each storefront gift block has its own Space around (margin) and Space inside (padding). A dialog gift block also has its own Launcher max width.
Theme CSS can target a whole gift block by its Gift Block UUID. The parts inside a gift block can't be styled with theme CSS.

Change the look of your gift blocks