Storefront widget

The GiftPrint storefront widget lets customers add a personalized gift note directly on your product page. Depending on the mode you choose, they either pick a design and watch a live preview, or simply type their message. Merchants see the template and message in the GiftPrint dashboard when it's time to print.

What it does

When enabled, the widget adds a "Gift Note" section to your product page:

• Customer toggles "Add a gift note" checkbox
• Message input field — customer types their message
• Optional "To" and "From" fields, if you left them on
• On "Add to Cart", GiftPrint stores the template choice and message as line item properties
• Message appears in your GiftPrint dashboard under "New" tab, ready to print

Picker mode vs Fixed mode

Template selection (in the app settings) decides how much of the widget the customer sees:

In Fixed mode the widget is a plain message form: there is nothing to choose, so GiftPrint does not render a card preview that could imply the customer picked it. This is the only mode available on FREE.

When to use it

Use the GiftPrint storefront widget if:

• Your store doesn't already use Giftship, Wrapin, or Wrapped
• You want full control over the gift note experience from template selection through printing

Don't use the GiftPrint widget if:

• You already have Giftship, Wrapin, or Wrapped installed for gift message collection
• Adding two widgets to the same product page creates conflicts and unpredictable behavior

If you use another gift app, GiftPrint still detects messages from that app automatically. See Integrations for "GiftPrint as Print Engine" setup instead.

Quick setup

1. Online Store → Themes → Click Customize on your active theme
2. Open a Product or Cart template (the block targets both)
3. Click Add block → search for "Gift Note Widget"
4. Place the block where customers expect it (typically below the product description or near the Add to Cart button)
5. Save and Publish
6. Configure the widget in GiftPrint → Settings → General → Storefront Widget (see Widget settings)

The block itself has no theme editor settings — everything is configured in the GiftPrint app.

Required permissions

The GiftPrint app requests the following scopes during installation:

• read_orders / write_orders — to read gift messages from existing orders and to add the "Gift Note Printed" tag once a card is printed
• read_products / write_products — to look up products and to create / update the hidden "Gift Note Service" product when paid gift notes are enabled
• read_publications / write_publications — to publish the service product to the Online Store sales channel (required for the cart API to add it)
• write_files — to upload your shop logo through the Shopify Files API

All scopes are granted at install time regardless of whether you eventually enable paid gift notes. If your store has custom permission restrictions, contact your Shopify Partner manager.

Customization options

GiftPrint widget customization works on three levels, from simplest to most advanced:

1. App settings (no code)

Open GiftPrint → Settings → General → Storefront Widget:

• Enable widget — turn it on or off for the storefront
• Price — charge for gift notes, or leave at 0 to keep them free
• Show "To" / Show "From" — which fields customers can fill in
• Template selection — let customers pick a design (Starter/Pro) or lock to your default

The default template and page format are set in the same tab, and the widget follows them automatically.

See Widget settings for the full reference.

2. CSS variables (theme developers)

Fine-grained control over typography, spacing, and sizing. If you know CSS, you can override variables like --giftprint-font-family, --giftprint-border-radius, --giftprint-preview-width, etc. to match your brand.

See CSS variables for all available properties and examples.

3. JavaScript API (custom UIs)

Replace the entire widget UI with your own. Use window.GiftPrintWidget methods to control template selection, message input, and validation while building a completely custom interface.

See JavaScript API for patterns and recipes.

Paid gift notes

Gift notes can be a paid add-on. Set a price in Settings → General → Storefront Widget:

• Price is optional — leave blank for free gift notes
• When enabled, a "Gift Note Service" hidden product is created in your Shopify store
• When customer enables the widget, this service product is automatically added to their cart at checkout
• The service product is excluded from your store catalog (hidden from search and collections) using the _giftprint_hidden tag
• Price appears next to the widget heading on the product page

If you change the price later, existing customers' cart items are not updated — only new carts use the new price.

Limitations

• One service item per add-to-cart event — when paid gift notes are enabled, GiftPrint adds the "Gift Note Service" item once per add-to-cart action (quantity: 1), regardless of how many units of the product the customer added in the same submission. If the customer adds the same product twice in two separate add-to-cart actions, the service item is added twice — GiftPrint does not deduplicate against the existing cart contents.
• "Buy it now" / Shop Pay — these accelerated checkout buttons skip the cart entirely and go straight to checkout, so a paid gift note cannot be attached to that order. This is a platform limitation rather than a GiftPrint one: other gift apps behave the same way. A free gift note is unaffected — the message travels as a line item property on the product itself. If you charge for gift notes, turn off the dynamic checkout button on products that offer them: Online Store → Themes → Customize → Product template → Buy buttons → uncheck "Show dynamic checkout buttons".
• Cart state sync (one-way) — GiftPrint injects properties into the cart on add. If a customer manually removes the "Gift Note Service" item from the cart, the widget UI on the product page is not notified and still displays its current state. Re-submitting the form re-adds the service item.
• Multi-variant products — gift note properties are attached to whichever variant is added to the cart. If a customer adds two different variants of the same product, each one gets the gift-note properties from the widget at the moment of submission (so the second submission overrides what the customer had typed for the first only inside the widget UI, not in the cart line they already added).

Next steps

• Widget settings — configure fields, price, and template mode
• CSS variables — fine-tune styling for your theme
• JavaScript API — build custom gift note UI