Slider block

Developer reference for the deprecated Slider theme app block, its placement options, and every schema setting.

The Slider block is a theme app extension block that renders an upsell campaign as a horizontal carousel of product cards on your storefront. It is configured through the theme editor and powered by your campaign's Campaign ID.

The Slider block is deprecated. For new installations, use the Upsell Widget instead. This page documents the block for stores that still rely on it.

Purpose

The Slider block loads a campaign and displays its recommended products in a slider, letting shoppers add items to the cart directly from the carousel. It supports an optional quick view modal so shoppers can preview a product without leaving the page, and it can automatically refresh when the cart changes.

The block targets section, so you add it as a block inside an existing theme section from the theme editor.

Placement

By default the block renders inline, wherever you place it in the section. You can also render it inside a different element on the page by enabling Embed block.

When Embed block is on, the block is injected into the element matched by Embed selector (a CSS selector). The Placement setting controls where, relative to that target, the block is inserted. The four placement values map directly to the positions used by the DOM insertAdjacentElement API:

Value	Label	Inserts the block…
`beforebegin`	Before the target	Immediately before the target element
`afterend`	After the target	Immediately after the target element
`afterbegin`	Before the first child of the target	As the first child inside the target
`beforeend`	After the last child of the target	As the last child inside the target

The default placement is afterbegin.

Screenshot: The Slider block settings panel open in the Shopify theme editorAdd a real image by setting the `src` prop.

Schema settings

All settings below come from the block's {% schema %}. The id is the setting key; the type is the Shopify setting type.

Campaign and embedding

ID	Type	Label	Default	Notes
`widgetId`	text	Campaign ID	—	The campaign to display. The Campaign ID is available in the Admin Panel.
`isEmbed`	checkbox	Embed block	`false`	Render the block inside a given target instead of inline.
`embedSelector`	text	Embed selector	`body`	CSS selector of the target where the block will be rendered.
`where`	radio	Placement	`afterbegin`	Where to place the block relative to the target. See Placement.

Layout and behavior

ID	Type	Label	Default	Notes
`cardLayout`	select	Product Card Layout	—	`vertical` or `horizontal`.
`enableQuickView`	checkbox	Enable quick view	`false`	Use a modal to quickly preview a product.
`enableRefreshOnCartChange`	checkbox	App refresh on cart change	`true`	Reload the block when the cart changes.
`groupVariants`	checkbox	Group variants	`true`	Group a product's variants together.
`hideOutOfStock`	checkbox	Hide out of stock variants	`true`	Hide variants that are out of stock.

Content

ID	Type	Label	Default
`title`	text	Heading text	`You may also like`
`addToCartText`	text	Add to cart button text	`Add`
`addedToCartText`	text	Add to cart button text on item added	`Added`

Sizes and spaces

The block exposes responsive sliders-per-view controls for desktop, tablet, and mobile, plus container padding for desktop and mobile.

ID	Type	Label	Default	Notes
`slidesPerViewDesktop`	range	Slides per view (desktop)	`4`	Range `1`–`10`, step `1`.
`paddingDesktop`	text	Container padding (desktop)	`0`	Accepts a CSS padding value, e.g. `16px 18px 12px 16px` or `16px 14px`.
`slidesPerViewTablet`	range	Slides per view (tablet)	`3`	Range `1`–`10`, step `1`.
`slidesPerViewMobile`	range	Slides per view (mobile)	`2`	Range `1`–`10`, step `1`.
`paddingMobile`	text	Container padding (mobile)	`0`	Accepts a CSS padding value, e.g. `16px 18px 12px 16px` or `16px 14px`.

Colors

ID	Type	Label	Default
`backgroundColor`	color	Background Color	`rgba(0,0,0,0)`
`fontColor`	color	Primary font color	`#121212`
`addToCartBgColor`	color	Add to cart button bg color	`#121212`
`addToCartTextColor`	color	Add to cart button font color	`#fff`

Custom CSS

ID	Type	Label	Notes
`customCss`	textarea	Custom CSS	Free-form CSS applied to the block, e.g. `.app__product__image { border: 1px solid red; }`

Example schema

The block declares its schema as a Shopify theme block. An excerpt looks like this:

{% schema %}
{
  "name": "Slider (Deprecated)",
  "target": "section",
  "javascript": "lcuSlider.js",
  "settings": [
    {
      "type": "text",
      "id": "widgetId",
      "label": "Campaign ID",
      "info": "Campaign ID is available in Admin Panel"
    }
  ]
}
{% endschema %}

The block targets section, runs the lcuSlider.js script, and (when Enable quick view is on) loads an additional quick view modal library.

App blocks overview

See all theme app extension blocks.

App blocks overview

On this page