Add a Brilliant products that go together carousel

The Brilliant products that go together carousel lets you display complementary products that fit with the product a customer is viewing directly on its product page. This way, they can discover other products to complete their purchase without having to return to the catalog. For example, if a customer is viewing a pair of pants, the carousel can suggest a shirt, belt, or shoes that go with them.

In this article, you’ll learn how to add and configure the Brilliant products that go together carousel on your Shopify store’s product pages.

Before you start

Before adding the carousel, make sure that:

• Brilliant Control Center is enabled in your Shopify theme.
• The Products that go together capability is enabled under Capabilities.
• Your Shopify theme allows you to add app blocks to product pages.

STEP 1. Accessing the product template

(This section explains how to access the theme editor where you want to add the products that go together carousel.)

1. From your Shopify admin, go to "Online store > Themes".

2. Find the published theme where you want to add the carousel and click Edit theme.

3. In the theme editor, click Products.

4. Select Default product or the product template where you want to display the carousel.

STEP 2. Adding and configuring the products that go together carousel

2.1. Adding the carousel

(This section explains how to add the Brilliant products that go together carousel from the Shopify theme editor and how to define its position on the product page.)

5. In the Shopify theme editor, click Add section in the side menu.

6. Go to the Apps tab and select Products that combine carousel.

7. Drag the carousel from the left sidebar to the position where you want to display it on your website.

2.2. Customizing the carousel

(This section explains how to configure the carousel’s content and appearance.)

8. In the Shopify theme editor, click Products that combine carousel to open the settings.

9. You can configure the following options from the right sidebar:

• “Name”: defines the block name in the theme editor. This name isn’t shown to your customers.
• “Title text”: defines the title displayed above the carousel. The default value is “You may also like”.
• “Title text color”: defines the title color.
• “Title font size”: defines the title font size.
• “View more text color”: defines the color of View more.
• “View more font size”: defines the font size of View more.
• “Products visible on desktop”: defines how many products are displayed simultaneously on desktop, from 1 to 6.
• “Vertical padding”: defines the vertical space around the carousel.
• “Horizontal padding”: defines the horizontal space around the carousel.
• “Spacing between products”: defines the spacing between product cards.
• “Products visible on mobile”: defines how many products are displayed simultaneously on mobile devices, from 0 to 3. If you select “0”, the carousel won’t be displayed on mobile.

10. Click Save to apply the changes. Once saved, the carousel will be displayed on the pages that use the product template where it was added.

2.3. Customizing product cards

(This section explains how to configure the appearance of the product cards displayed in the similar products carousel from Brilliant.)

11. Return to your Shopify store’s admin and go to “Apps > Brilliant”. 

12. In Brilliant, go to “Design > Product card” and configure the general appearance of the product cards from the right sidebar, such as the image ratio or borders.

13. Click  Save to apply the changes.

Frequently asked questions

1. Why don’t I see the actual products in the Shopify editor?

The theme editor displays a preview with sample products so that you can check what the design will look like. In your store, each product page will display its own products that go together.

2. Why does a notice say that Products that go together is disabled?

This notice indicates that the Products that go together capability is disabled in Brilliant.

Go to Capabilities and enable Products that go together so that the carousel can be displayed in your store.

3. I added the carousel, but it doesn’t appear in my store

Make sure that:

• You saved the changes in the theme editor.
• You added the carousel to the published theme in Shopify.
• Brilliant is enabled from Home. 
• The Products that go together capability is enabled under Capabilities. 
• The catalog has finished processing. 
• If the carousel only doesn’t appear on mobile, make sure that “Products visible on mobile” isn’t set to “0”. 

4. Can I choose which products appear in the carousel? 

Brilliant automatically selects the products that go together.

To prevent certain products from appearing in recommendations, go to “Settings > Product management” and add their tags to the blacklist.

5. Can I also add the similar products carousel?

Yes. You can add the Products that go together carousel and the Similar products carousel to the same product page.

6. How can I remove the carousel?

1. Go to the Shopify theme editor.
2. Select Products that combine carousel.
3. Click Remove section or Remove block, depending on how you added it. You can also use Hide  without removing it.
4. Click Save.

Keep learning!

To make the most of your Brilliant account, we recommend continuing with the following articles:

• Brilliant installation guide, to configure Brilliant in your Shopify store. 

• Brilliant features, to learn about the capabilities available in Brilliant.

• Add a Brilliant similar products carousel, to display similar alternatives on product pages.

• Frequently asked questions about Brilliant, to resolve the most common questions about its operation and configuration.