Skip to main content

Related products on product pages

Display relevant product recommendations while customers browse a product. You can choose which products to recommend and customize the widget to match your store.

To display the widget, add the Crossup app block to your product template, verify the installation in Crossup, and activate the feature.

Open the widget settings​

  1. In your Shopify admin, open Apps > Crossup.
  2. Select Related products.
  3. Under Related products on product pages, click Set up.

image.png

Add and verify the app block​

If App block status shows Disabled:

  1. Click Add app block to open the Shopify theme editor.
  2. Check that you are editing the theme and product template where you want the widget to appear.
  3. Locate the CrossUp app block. If it has not been added, use Add block > Apps in a section that supports app blocks and select the Crossup widget.
  4. Move the block to your preferred position on the product page.
  5. Click Save in the theme editor.
  6. Return to the widget settings in Crossup and click Verify now.

Verification checks the app block installation. You also need to configure the recommendations and turn on the widget to display it to customers.

note

The app block belongs to the product template where you add it. If your products use different templates, add the block to each template where you want recommendations to appear.

In Widget settings, use the dropdown under Recommended products to choose a recommendation strategy.

StrategyRecommendation source
Bought together in the same orderProducts purchased together in the same order.
Products are in the same collectionProducts that share a collection with the product being viewed.
Products are in the same categoryProducts that share its category.
Products have the same tagProducts that share its tags.
Products have the same typeProducts that share its product type.
Specific collectionProducts from a collection you select.
Specific productsIndividual products you select.

For Specific products, use Search products or Browse to select the items to recommend. Drag the selected products to change their order, or click the remove icon to remove an item.

For Specific collection, select the collection you want to use.

To exclude older products, check Hide products created more than … days ago and enter the number of days. This filter uses the product creation date.

For an initial display check, Specific products lets you choose the exact recommendations to test. Select products that are available on your Online Store.

Customize the widget​

Open Widget display to adjust the content and appearance.

SettingWhat you can change
Widget titleThe heading shown above the recommendations.
Widget descriptionSupporting text below the title. Leave it blank to hide the description.
StyleButton, discount, progress bar, and countdown timer colors, plus the border radius.
Buy Now buttonTurn the Buy Now button on or off.
Progress barTurn the bar on or off, edit the progress message, and adjust the demand indicator percentage.
Countdown timerTurn the countdown timer next to the widget title on or off.

Use Horizontal and Vertical in the preview to inspect both layouts. The actual widget layout can vary with the size of the section where you place the app block.

Use Reset to default if you want to restore the default display settings.

Activate and check the widget​

  1. After verifying the app block, turn on the switch at the top of the settings page.
  2. Confirm that the status reads This setting is activated.
  3. If a save prompt appears after your changes, save them before leaving the page.
  4. Open a product page on your storefront that uses the template containing the Crossup app block.
  5. Check that the widget appears in the expected position and displays your recommendations.

Review the widget on both desktop and mobile to check its layout and spacing.

If the widget does not appear​

Check that:

  • The Crossup app block is present and visible in the product template used by the product you are viewing.
  • You saved the theme editor changes and are viewing the same theme you edited.
  • You returned to Crossup and clicked Verify now after adding the block.
  • The feature status reads This setting is activated.
  • Your selected strategy has matching products available on the Online Store.
  • The product age filter is not excluding the products you expect to recommend.

If you change your theme, add the Crossup app block to the new theme and verify it again.

Need help?​

Contact [email protected] with your store URL, the affected product page URL, and a screenshot of your widget settings. Our team will help you check the setup.