Skip to main content

Visual Customization

How to style your Recommendation Extensions

Kat Andres avatar
Written by Kat Andres
Updated today

The Nosto Recommendation Extensions on Shopify inherits your store’s styling but also includes appearance settings you can customize. These allow you to better control how product recommendations look during Checkout.

You’ll find all options directly in the Shopify Theme Editor, under the Checkout template in the Nosto Extension block.

Choosing a Layout Mode

There are two layout modes available for how product recommendations are displayed:

Default Design

Applied by default. Clean layout designed to:

  • Use minimal space

  • Change CTA button depending on Variants availability

    • Non-Variant products will show "Add", while Variant selection will expand when clicking "Options"

Advanced Design

Optional Design (default on mobile). Designed to:

  • Put your recommended Product(s) into focus.

  • The image will appear bigger, allowing a closer look for your customers

  • You can pull in your Product Description (optional).


Customization Options

Image Ratio

Control how square or rectangular the product images are shown:

Options: 1, 1.5, 0.75

Image Fit

Adjust how images are scaled in their containers:

Options: cover, contain, fill

Product Title Size

Set the font size of product titles:

Options: small, medium, large

Strike-Through Price

If a recommended product is discounted, you can display the original price with a line-through.

Options: true (show), false (hide)

Button Style

Adjust the styling of the “Add” or CTA button to better match your theme:

Options:

  • base-primary

  • monochrome-primary

  • base-secondary

  • critical-secondary

  • monochrome-secondary

Product Count

Set the number of products to show at the same time. By default, 2 products will show. Added products will refill automatically, if you set the "Maximum numbers of products" in your Nosto-Recommendation settings higher than this number.

Options: 1 or 2

Product Description (Advanced Design only)

Choose whether to show or hide a short product description under the title.

Options: true (show), false (hide)


How to Configure

The configuration of the Extensions happens completely in your Shopify Theme Editor. Simply navigate to your Checkout editor view, select the Nosto Extension and find the settings opened automatically.

Did this answer your question?