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.