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 above and Space below set the space between the gift block and the rest of the page.
Launcher max width sets how wide the launcher button can grow. It shows when the gift block opens as a Dialog.
Leave a field on Default to use the value from your preset.
Settings for the product page gift block
Press Save to show your changes in your online store.
Custom CSS
For a change the editor does not cover, add CSS to your theme that targets one gift block by its UUID. To copy the 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 Gift blocks: Developer tools.
[uuid="YOUR-GIFT-BLOCK-UUID"] {
margin-inline: 24px;
}This example adds space on the left and right of the gift block. An Inline gift block on Gifting for Orders keeps its own side margins.
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 above and Space below. A dialog gift block also has its own Launcher max width.
For anything else, target one gift block with CSS by its Gift Block UUID.