1. Help Center
  2. Tracking page
  3. Shopify Open Store Components

🤑 Cross-Sell Products App Block

Overview

This app block allows you to display products that you can upsell. This includes product recommendations, collections, best-selling items, and related products.

Visualization

This is how your cross-sell block visualizes on different screens:

Slider layout on desktop

Grid layout on desktop

Slider layout on mobile

Grid layout on mobile

Customization

Let’s see what can you customize in this app block:

General

In the General section, you can configure the following settings:

Title

You can set the title of the cross-sell products to display.

View all title

You can set a link in the components. It is useful when you want to lead customers to a full collection. For example, View all, See collection, etc.

View all link

This is the link where customers will be redirected to click on the link.

Source

This section allows you to pick a source for the products you will display.

List source

You can set up the source of products to recommend.

The options are:

  • Rush Upsells & Cross-Sells: You can see products based on Rush upsell & cross-cell app configurations
  • Pick products: You can manually pick any products you want to display
  • Collection: You can pick a collection, that will be displayed in the app block.
  • JSON source: It links to an external JSON file. You can find the format here: [link to JSON]

Note

Shopify does not allow hiding the inactive sections of your List source. So, you can see all the following sections. However, the product displayed will be based on the option you pick.

18.1

Pick products

This element allows you to select a list of products to be recommended inside the widget.

  • Click on Select products to see the list of products.

Pick a collection

You can select or delete a collection of products by using this element. We suggest you pick dynamic collections that do not include items that are out of inventory.

  • Click on Select collection to see the list of collections.

JSON source

You can also pull the desired products from a JSON source.

  • Click on the JSON source box to see the list of sources.

Layout

Use this section to organize the products.

Layout

You can choose the layout of products to recommend. The options available are:

  • Slider
  • Grid

Maximum products to show

You can set the maximum number of products that will be shown.

Click on the image

This element allows you to choose the action to perform when a customer clicks on the product image. The options to choose from are:

  • Go to the item product page (PDP)
  • Add to cart- automatically add the item variation in your cart (if available).
  • Buy directly - add the item to the cart and redirect customers to the checkout page.

Style

This section allows you to style the text with customized colors.

Title text color

You can set the color of the products’ title text.

View all color

You can view all text color.

View all hover color

You can see all text colors on hover.

CSS style

The CSS style box allows you to insert custom CSS.

Styling case:

Case #1. More images to display at a glance

#rush-product-list {
   max-width: 1000px !important;
   margin: auto;
margin-bottom: 35px;
margin-top: 35px;
}
.R-upsell-container {
min-width: 14rem;
}
.R-product-img {
min-height: auto;
}
.productlist-header {
font-size: 26px;
   font-weight: bold;
}


Case #2:
Remove/Hide vendor name

.R-upsell-container {
  min-width: auto;
}
.productlist-header {
 font-size: 20px;
 font-weight: 600;
 margin-bottom: 4px !important;
}

@media only screen and (max-width: 480px) {
  .scroll-container .R-grid-cols-1 {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

.R-product-img {
min-height: auto !important;
}
}

.R-upsell-container p.R-mt-1.R-text-sm{
display: none;
}


Case#3 - Adjust size on header/title

.productlist-header {
font-size: 22px;
font-weight: 600;

}

 

 

Contact us

For more information, feel free to reach out to us.