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 using your theme’s style.
Advanced Design
Offers a more modern layout and unlocks additional visual options (e.g. showing product descriptions or using strike-through pricing).
This layout is automatically used on mobile and optional on desktop
You can switch between the two in the Theme Editor under the “Recommendation Design” setting.
Customization Options by Layout
Available in Both Layouts (Default & Advanced)
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
Available Only in Advanced Layout
Product Description
Choose whether to show or hide a short product description under the title.
Options: true (show), false (hide)
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
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.