Gift with Purchase block
Reference for the deprecated Gift with Purchase theme app block, its placement, and every schema setting.
The Gift with Purchase block renders a gift-with-purchase campaign directly inside your Online Store theme. It loads a layout-specific script (list, collapsable, slider, or modal), optionally pulls in the quick view modal, and exposes a full set of {% schema %} settings for appearance, behavior, and placement.
This block is deprecated. Its schema name is GiftPurchase (Deprecated) and it is only available when the legacy customizer metafield is present. For new campaigns, use the Upsell Widget block instead.
Purpose
The block is a Shopify theme app extension that surfaces gift-with-purchase products tied to a campaign. At render time it picks a script based on the chosen layout:
| Layout setting | Script loaded |
|---|---|
collapsable | lcuGiftPurchaseCollapsable.js |
modal | lcuGiftPurchaseModal.js |
slider | lcuGiftPurchaseSlider.js |
anything else (list) | lcuGiftPurchaseList.js |
The resolved library is loaded through the lib-loader snippet and injected once via inject-unique-lib. When Enable quick view is on, or when the product click action is set to quick view, the lcuQuickViewModal.js library is injected as well.
Placement
The block targets the section area of a theme, so you add it through the theme editor on a section that supports app blocks. The campaign it displays is bound by the Campaign ID setting.
You can also detach the block from its default position and render it inside any element on the page using the Embed control settings. When Embed block is enabled, the block is inserted relative to the element matched by Embed selector, at the position chosen in Placement (the values map directly to the DOM insertAdjacentElement positions).
Availability is gated by available_if: "{{ app.metafields.deprecation.customizer_2024_02 }}". If that metafield is not set, the block does not appear in the theme editor.
Schema settings
All settings live under the block's {% schema %}. They are grouped by the headers defined in the schema.
General
Setting (id) | Type | Label | Default | Notes |
|---|---|---|---|---|
widgetId | text | Campaign ID | — | Campaign ID is available in the Admin Panel. |
themeColor | color | Brand color | #000 | |
backgroundColor | color | Block background color | #f4f4f4 | |
addButtonTitle | text | Product button titles | Add|Adding...|Added | Use | to define the three button states. |
Appearance
Setting (id) | Type | Label | Default | Notes |
|---|---|---|---|---|
layout | select | Layout | slider | Options: list (recommended for smaller screens), collapsable, slider. |
listLayout | select | List layouts type | slider|horizontal | Options: slider|horizontal, slider|vertical, list|vertical, list|horizontal. |
slidesPerViewDesktop | range | Products per view from 1024px | 6 | min 1, max 10, step 0.5. |
slidesPerViewTablet | range | Products per view from 480px to 1024px | 4 | min 1, max 8, step 0.5. |
slidesPerViewMobile | range | Products per view up to 480px | 2 | min 1, max 4, step 0.5. |
spaceBetween | range | Space between products | 10 | min 0, max 100, step 5, unit px. |
conditionAutoPlay | range | Conditions autoplay | 0 | min 0, max 30, step 0.5, unit sec. Set to 0 to disable. Available only when Layout is List. |
autoPlay | range | Products autoplay | 0 | min 0, max 30, step 0.5, unit sec. Set to 0 to disable. Available only when List layouts type is a Slider list. |
Additional Settings
Setting (id) | Type | Label | Default | Notes |
|---|---|---|---|---|
initialCollapseOpen | checkbox | Initial Collapse open | true | Applies to Collapsible and Slider layouts. |
hideOutOfStock | checkbox | Hide out of stock products | true | |
enableQuickView | checkbox | Enable quick view | false | Uses a modal to quickly preview a product. |
disableLinkRedirection | checkbox | Disable product link redirection | false | When checked, product links open the quick view modal instead of the product page. |
borderRadius | range | Border radius | 0 | min 0, max 50, step 1, unit px. |
Content
Setting (id) | Type | Label | Default | Notes |
|---|---|---|---|---|
primaryTitle | text | Primary title (Deprecated) | — | Use {difference} for the price difference from your campaign rules. |
primarySubtitle | text | Primary subtitle (Deprecated) | — | Use {difference} for the price difference from your campaign rules. |
titleOnValid | text | Title on valid campaign (Deprecated) | — | |
subtitleOnValid | text | Subtitle on valid campaign (Deprecated) | — |
The Content fields are individually marked Deprecated in the schema. The {difference} token in the title and subtitle is replaced with the price difference defined by your campaign rules.
Embed control
Setting (id) | Type | Label | Default | Notes |
|---|---|---|---|---|
isEmbed | checkbox | Embed block | false | Render the block inside a given target. |
embedSelector | text | Embed selector | body | CSS selector of the target where the block is rendered. |
where | radio | Placement | afterbegin | Where to place the block relative to the target. See values below. |
customCss | textarea | Custom CSS | — | Placeholder example: .app__product__image { border: 1px solid red; }. |
The Placement (where) values:
| Value | Meaning |
|---|---|
beforebegin | Before the target. |
afterend | After the target. |
afterbegin | Before the first child of the target. |
beforeend | After the last child of the target. |
Example
A minimal embedded configuration that renders the slider layout inside a custom container:
{% comment %} Block settings (configured in the theme editor) {% endcomment %}
widgetId = "your-campaign-id"
layout = "slider"
isEmbed = true
embedSelector = ".product-form__buttons"
where = "afterend"
addButtonTitle = "Add|Adding...|Added"