Product upsells

Placement and available controls for the Product upsells block.

Scale Theme · v1.9.3 · 4 min read

Where to find it

Open the parent section and use Add block where this block is offered.

Usage notes

Tag the upsell product with 'cart-hidden' if you do NOT want it counted in the cart icon's item bubble. Toggle/check/plus styles require unique upsell products (a product used as a gift, bundle, or main product elsewhere will not toggle correctly). Classic add does not have this limitation.

Overrides applied to the 1st product picked above.

Overrides applied to the 2nd product picked above.

Overrides applied to the 3rd product picked above.

Used when 'Toggle button style' is set to 'Classic add button'.

Optional ribbon shown in the top-right corner of any card whose 'Show best seller badge' toggle is enabled.

Renders a small variant selector pill below the product description (e.g. 'Soft' or a 'Black ▾' dropdown for multi-variant products). Single-variant products with a 'Default Title' variant skip it automatically.

Visible when 'Multiple products stacking' is set to 'Slider'.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Hide repeated product names: Show one card per product name and hide names already in the cart. Useful when a collection contains several copies of the same product.
Color source: Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.Options: Theme colors · Color scheme · Custom
TitleConditional: Choose a local color when the relevant custom source is enabled.
Description and priceConditional: Choose a local color when the relevant custom source is enabled.
Selection and actionConditional: Choose a local color when the relevant custom source is enabled.
Action textConditional: Choose a local color when the relevant custom source is enabled.
Card borderConditional: Choose a local color when the relevant custom source is enabled.
Card backgroundConditional: Choose a local color when the relevant custom source is enabled.
Position: Moves this single block into the scrolling drawer body or the pinned footer. Page-cart blocks keep their editor location when drawer groups are unavailable.Options: Cart body · Cart footer
Card appearance: Choose the presentation or source that fits this component.Options: Standard · Product offer
Product image fitConditional: Choose the presentation or source that fits this component.Options: Fill · Fit entire product
Offer priceConditional: Choose a local color when the relevant custom source is enabled.
Display: 'Globally' shows the block on every page. 'Specific products' restricts it to the handles configured below.Options: Globally · Specific products
Products to display the block onConditional: Handles split by comma. Example: first-handle,second-handle
Toggle button style: Global button styling is managed in Theme settings > Buttons.Options: Toggle switch · Checkbox style 1 · Checkbox style 2 · Plus button · Plus + price pill · Classic add button
Show currency symbol on price pillConditional: When off, the pill shows just the number (e.g. '+ 39.99' instead of '+ 39.99 TL').
Toggle product selection by clicking onConditional: Choose the presentation or source that fits this component.Options: Toggle button · Whole container
Classic add button labelConditional: Edit the text shown by this component.
Already-in-cart labelConditional: Edit the text shown by this component.
Hide the upsell if the product is already in cartConditional: Applies only to the Classic add button style.
Multiple products stacking: If 'Next to each other' is selected, featured images with transparent backgrounds are recommended.Options: Under each other · Next to each other · Slider
Selector active color: Choose a local color when the relevant custom source is enabled.
Selector active icon/text color: Choose a local color when the relevant custom source is enabled.
Selector selected color: Choose a local color when the relevant custom source is enabled.
Selector inactive background: Choose a local color when the relevant custom source is enabled.
Selector inactive border: Choose a local color when the relevant custom source is enabled.
Color scheme: Choose an available Shopify color scheme.
Products: Up to 3 products per block are supported.
Collection of products to display: Optional. Used as an alternative source ONLY when no products are picked above. Manual products always take priority — clear them to display the collection feed instead. The first 3 products of the collection are displayed.
Enable product #1: Enable or disable this option and preview the result.
Preselected: Enable or disable this option and preview the result.
Show best seller badge: Enable or disable this option and preview the result.
Featured image override: Overrides the product's default featured image for this card only.
Description: Edit the formatted text for this component.
Percentage discount: Without the % symbol. Visual only — Shopify charges full price unless a matching automatic discount is configured.
Fixed amount discount: Without the currency symbol. Visual only — same caveat as percentage discount.
Enable product #2: Enable or disable this option and preview the result.
Preselected: Enable or disable this option and preview the result.
Show best seller badge: Enable or disable this option and preview the result.
Featured image override: Choose an image from your shop. Preview its crop on desktop and mobile.
Description: Edit the formatted text for this component.
Percentage discount: Use the matching control in the theme editor and preview the component before publishing.
Fixed amount discount: Use the matching control in the theme editor and preview the component before publishing.
Enable product #3: Enable or disable this option and preview the result.
Preselected: Enable or disable this option and preview the result.
Show best seller badge: Enable or disable this option and preview the result.
Featured image override: Choose an image from your shop. Preview its crop on desktop and mobile.
Description: Edit the formatted text for this component.
Percentage discount: Use the matching control in the theme editor and preview the component before publishing.
Fixed amount discount: Use the matching control in the theme editor and preview the component before publishing.
Show product images: When enabled, the product's featured image is shown automatically. Per-product image upload (in each Product slot) overrides the featured image when set.
Images sizeConditional: Choose the presentation or source that fits this component.Options: Small · Medium · Large · Extra large
Images corner radiusConditional: Adjust within the range offered by the theme editor.
Product title font size: Choose the presentation or source that fits this component.Options: Small · Medium · Large · Extra large
Display titles as product page links: Enable or disable this option and preview the result.
Title color: Choose a local color when the relevant custom source is enabled.
Description font size: Choose the presentation or source that fits this component.Options: Small · Medium · Large
Description color: Choose a local color when the relevant custom source is enabled.
Show price: Enable or disable this option and preview the result.
Price positionConditional: Choose the presentation or source that fits this component.Options: Next to title · Below title
Price font sizeConditional: Choose the presentation or source that fits this component.Options: Small · Medium · Large · Extra large
Price colorConditional: Choose a local color when the relevant custom source is enabled.
Hide compare priceConditional: Enable or disable this option and preview the result.
Compare price colorConditional: Choose a local color when the relevant custom source is enabled.
Enable variant price updatesConditional: Dynamically updates the displayed price when the customer picks a variant via the variant pill. May not play well with currency converters.
Hide & automatically skip sold out variantsConditional: Enable or disable this option and preview the result.
Title: Edit the text shown by this component.
Position: Difference is visible if drop shadow, border, or background is active.Options: Outside the container · Inside the container
Uppercase title: Enable or disable this option and preview the result.
Title color: Choose a local color when the relevant custom source is enabled.
Mobile title text size: Adjust within the range offered by the theme editor.
Desktop title text size: Adjust within the range offered by the theme editor.
Corner radius: Adjust within the range offered by the theme editor.
Card inner padding: Adjust within the range offered by the theme editor.
Gap between cards: Adjust within the range offered by the theme editor.
Show drop shadow: Enable or disable this option and preview the result.
Show border: Enable or disable this option and preview the result.
Border colorConditional: Choose a local color when the relevant custom source is enabled.
Selected border colorConditional: Choose a local color when the relevant custom source is enabled.
Border thicknessConditional: Choose the presentation or source that fits this component.Options: Thin · Normal
Show custom background: Enable or disable this option and preview the result.
Background colorConditional: Choose a local color when the relevant custom source is enabled.
Selected background colorConditional: Choose a local color when the relevant custom source is enabled.
Button styleConditional: Global button styling is managed in Theme settings > Buttons.Options: Primary · Secondary · Tertiary · Custom (per-block)
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Gradient (optional)Conditional: Use the matching control in the theme editor and preview the component before publishing.
Add button text colorConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
Hover backgroundConditional: Choose a local color when the relevant custom source is enabled.
Hover textConditional: Choose a local color when the relevant custom source is enabled.
Hover borderConditional: Choose a local color when the relevant custom source is enabled.
ShadowConditional: Choose a local color when the relevant custom source is enabled.
Border widthConditional: Adjust within the range offered by the theme editor.
Add button corner radiusConditional: Adjust within the range offered by the theme editor.
Badge text: Edit the text shown by this component.
Badge icon: Choose the presentation or source that fits this component.Options: None · Trophy · Star · Fire · Crown
Badge background: Choose a local color when the relevant custom source is enabled.
Badge text & icon color: Choose a local color when the relevant custom source is enabled.
Show variant pill: Enable or disable this option and preview the result.
Pill text color: Choose a local color when the relevant custom source is enabled.
Pill background color: Choose a local color when the relevant custom source is enabled.
Pill border color: Choose a local color when the relevant custom source is enabled.
Display dotsConditional: Enable or disable this option and preview the result.
Display arrowsConditional: Enable or disable this option and preview the result.
Arrows colorConditional: Choose a local color when the relevant custom source is enabled.
Top margin: Adjust within the range offered by the theme editor.
Bottom margin: Adjust within the range offered by the theme editor.