Product - Upsell Addon
The Upsell Addon snippet allows you to display a complementary product directly on the product page, encouraging customers to add it alongside the main item. It's a strategic way to increase average order value through intelligent product pairing.
Custom Placement Required
To insert the upsell product at a specific location:
Go to your product page editor.
Add a new block → Custom Liquid.
Paste the following code:
liquidCopyEdit<div id="upsell-product"></div>You can rename the
idin the JS if needed. Drag the block where you want the upsell card to appear and click Save.
Product Setup
Select Upsell Product Choose a specific product to display as the upsell item (e.g., “Beige Baseball Cap”).
Label Settings
Text Before Product Title Add custom text like “Works well with” above the product title. Supports HTML for styling.
Label Text Color Customize the label color to fit your branding.
Title Settings
Font Size (Desktop / Mobile) Control how large the upsell product title appears on different devices.
Title Color Set the product title color.
Font Weight Choose between Light, Normal, or Bold for the product title.
Price Settings
Main Price Font Size (Desktop / Mobile) Adjust the size of the upsell product price.
Price Color Set the color for the main price.
Font Weight (Price) Select the font weight for the price text.
Compare Price Settings Includes font size, color, and font weight options for the crossed-out price if a discount is shown.
Card Appearance
Card Text & Border Customize the text color, border thickness, and border color.
Card Background & Hover Set the default and hover background color for the upsell card.
Section Spacing
Control spacing around the upsell section:
Padding & Margin Set top/bottom padding and margins for both desktop and mobile.
Max Width & Side Padding Limit section width in
remand control side padding separately for desktop and mobile views.
Gradient Background (Optional)
Enable a multi-color gradient for the card background:
Gradient Colors (1–4) Choose up to 4 colors to create the effect.
Gradient Angle Adjust the angle (e.g., 225°) to control direction of the blend.
Card Layout
Border Radius Round the corners of the upsell card with a custom pixel value.
Fixed Height Set a fixed card height or leave as
0to auto-adjust based on content.Checkbox Size Define the size of the checkbox (used for optional add-to-cart behavior), both for desktop and mobile.
Element Positioning
Layout on Desktop Choose whether the product image appears to the left of the title or elsewhere in the card layout.
Summary
This upsell snippet is fully customizable and responsive. With control over layout, styling, and positioning, you can create a clean and engaging upsell experience that integrates naturally into your product pages—boosting conversions without being intrusive.
Last updated