Upsell Components

Boosting revenue with Shopify checkout is easy with Checkout Components. There are a variety of different upsell component variants available for you to use, and multiple options on how to configure these components.

Did you know Checkout Components is the only checkout app that integrates with Algolia, Nosto and Searchspring to power checkout recommendations?

Checkbox upsell

Checkbox upsells are typically used to offer an optional paid or free product, such as shipping production, gift wraping or a donation to a charity. Checkbox upsells also support capturing a custom message that is saved against a line item property.

Supported features

    Appearance

  • Name
    Message Overide
    Description
    Default renders a "1 unit" message next to the checkbox. This setting allows your to set your own value, such as "Add a gift message".
  • Name
    Optional customer message
    Description
    If enabled, the checkbox upsell will allow customers to associate a message with the upsell product when added to cart. Default: false.
  • Name
    Options title
    Description
    The title of the variant dropdown. Default: 'Options'.
  • Name
    Enable specific mobile layouts
    Description
  • Name
    Product image formatting
    Description
    Choose between object fit or object cover for product images. Default: object fit.

    • Conditional rendering

  • Name
    Markets publishing
    Description
    Display only to customers in selected markets.
  • Name
    Display rules
    Description
    Display only on specific conditions.

    • Content

  • Name
    Title (optional)
    Description
    The title of the upsell component.
  • Name
    Subtitle (optional)
    Description
    The subtitle of the upsell component.

    • Product Sourcing

  • Name
    Manual Products
    Description
    Manually select a product to render.

    • Other

  • Name
    Hidden products
    Description
    Hide specific products from appearing in the upsell.

Free shipping upsell

Free shipping upsells are typically displayed to customers who are close to achieving free shipping. The progress bar shows the customer how much more they need to spend to get free shipping.

This can be a great way to increase the average order value of your store, and encourage customers to spend more to get free shipping.

Supported features

    Appearance

  • Name
    Border
    Description
    Apply a border that wraps around the entire component.
  • Name
    Button text
    Description
    Customize the button text.
  • Name
    Button type
    Description
    Customize the button variant (primary or secondary).
  • Name
    Mobie variant dropdown style
    Description
    Enable specific mobile layouts that determines how the variant dropdown is displayed on mobile devices.
  • Name
    Options title
    Description
    Set a custom title for product variant options.
  • Name
    Product image formatting
    Description
    Choose between object fit or object cover for product images. Default: object fit.
  • Name
    Scroll indicator
    Description
    Show a scroll down indicator for mobile customers on large lists.
  • Name
    Products per page
    Description
    Choose how many products to display per page of recommendations. Default: 3.
  • Name
    Product count
    Description
    Choose how many products to display in the upsell component. If this value is greater than the products per page, pagination buttons will render. Default: 3.

    • Conditional rendering

  • Name
    Markets publishing
    Description
    Display only to customers in selected markets.
  • Name
    Display rules
    Description
    Display only on specific conditions.

    • Content

  • Name
    Title (optional)
    Description
    The title of the upsell component.
  • Name
    Subtitle (optional)
    Description
    The subtitle of the upsell component.

    • Product Sourcing

  • Name
    Collections
    Description
    Show products from specific collections.
  • Name
    Manual Products
    Description
    Manually select a product to render.
  • Name
    Automatic products
    Description
    Use Shopify product recommendations.
  • Name
    Integrations
    Description
    Show products sourced by a third party integration.

    • Other

  • Name
    Hidden products
    Description
    Hide specific products from appearing in the upsell.

Large upsell

Large upsells are great to give an important product the emphasis you think it deserves! Often used to promote a product that is on sale, shipping protection or a product that is related to the product in the cart that is part of a bundle.

Supported features

    Appearance

  • Name
    Border
    Description
    Apply a border that wraps around the entire component.
  • Name
    Button text
    Description
    Customize the button text.
  • Name
    Button type
    Description
    Customize the button variant (primary or secondary).
  • Name
    Mobie variant dropdown style
    Description
    Enable specific mobile layouts that determines how the variant dropdown is displayed on mobile devices.
  • Name
    Options title
    Description
    Set a custom title for product variant options.
  • Name
    Product image formatting
    Description
    Choose between object fit or object cover for product images. Default: object fit.

    • Conditional rendering

  • Name
    Markets publishing
    Description
    Display only to customers in selected markets
  • Name
    Display rules
    Description
    Display only on specific conditions.

    • Content

  • Name
    Title (optional)
    Description
    The title of the upsell component.
  • Name
    Subtitle (optional)
    Description
    The subtitle of the upsell component.

    • Product Sourcing

  • Name
    Manual Products
    Description
    Manually select a product to render.

    • Other

  • Name
    Hidden products
    Description
    Hide specific products from appearing in the upsell.

Radio upsell

Radio upsells are typically used to offer a choice of products to the customer. This could be a choice of shipping options, a choice of products to add to the cart or a choice of products to donate to a charity.

Radio upsells connnect to a single product in Shopify, and render each variant as an option for customers to select.

Supported features

    Appearance

  • Name
    Border
    Description
    Apply a border that wraps around the entire component.
  • Name
    Button text
    Description
    Customize the button text.
  • Name
    Button type
    Description
    Customize the button variant (primary or secondary).

    • Conditional rendering

  • Name
    Markets publishing
    Description
    Display only to customers in selected markets.
  • Name
    Display rules
    Description
    Display only on specific conditions.

    • Content

  • Name
    Title (optional)
    Description
    The title of the upsell component.
  • Name
    Subtitle (optional)
    Description
    The subtitle of the upsell component.

    • Product Sourcing

  • Name
    Manual Products
    Description
    Manually select a product to render.

    • Other

  • Name
    Hidden products
    Description
    Hide specific products from appearing in the upsell.

Upsell list

The most versatile upsell component is the upsell list. This component allows you to display a list of products to your customers, and they can add these products to their cart with a single click. You can configure the upsell list to display products from a specific collection, manually select products or let Shopify AI decide which products to display by analysing the customers cart.

Supported features

    Appearance

  • Name
    Border
    Description
    Apply a border that wraps around the entire component
  • Name
    Button text
    Description
    Customize the button text.
  • Name
    Button type
    Description
    Customize the button variant (primary or secondary).
  • Name
    Mobie variant dropdown style
    Description
    Enable specific mobile layouts that determines how the variant dropdown is displayed on mobile devices.
  • Name
    Options title
    Description
    Set a custom title for product variant options.
  • Name
    Product image formatting
    Description
    Choose between object fit or object cover for product images. Default: object fit.
  • Name
    Scroll indicator
    Description
    Show a scroll down indicator for mobile customers on large lists.
  • Name
    Products per page
    Description
    Choose how many products to display per page of recommendations. Default: 3.
  • Name
    Product count
    Description
    Choose how many products to display in the upsell component. If this value is greater than the products per page, pagination buttons will render. Default: 3.

    • Conditional rendering

  • Name
    Markets publishing
    Description
    Display only to customers in selected markets.
  • Name
    Display rules
    Description
    Display only on specific conditions.

    • Content

  • Name
    Title (optional)
    Description
    The title of the upsell component.
  • Name
    Subtitle (optional)
    Description
    The subtitle of the upsell component.

    • Product Sourcing

  • Name
    Collections
    Description
    Show products from specific collections.
  • Name
    Manual Products
    Description
    Manually select a product to render.
  • Name
    Automatic products
    Description
    Use Shopify product recommendations.
  • Name
    Integrations
    Description
    Show products sourced by a third party integration.

    • Other

  • Name
    Hidden products
    Description
    Hide specific products from appearing in the upsell.