Add a Brilliant similar products carousel

The Brilliant similar products carousel lets you display alternatives similar to the product a customer is viewing directly on its product page. This way, they can discover other options without having to return to the catalog.

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

Before you start

Before adding the carousel, make sure that:

• Brilliant Control Center is activated in your Shopify theme.
• The Similar products capability is activated 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 similar products carousel.)

1. From the 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 similar products carousel

2.1. Adding the carousel

(This section explains how to add the Brilliant similar products 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 Similar products 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 Similar products carousel to open the settings.

9. From the right sidebar, you can configure the following options:

• “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.
• “See more text color”: defines the color of See more.
• “See more font size”: defines the font size of See 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. Go back to your Shopify store’s admin and go to “Apps > Brilliant”. 

12. In Brilliant, go to “Design > Product card” and, from the right sidebar, configure the general appearance of the product cards, 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 similar products.

2. Why does a message say that Similar products is disabled?

This message indicates that the Similar products capability is disabled in Brilliant.

Go to Capabilities and activate Similar products so that the carousel can be displayed in your store.

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

Check that:

• You saved the changes in the theme editor.
• You added the carousel to the published theme in Shopify.
• Brilliant is activated from Home. 
• The Similar products capability is activated under Capabilities. 
• The catalog has finished processing. 
• If the carousel only fails to appear on mobile, check that “Products visible on mobile” isn’t set to “0”. 

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

Brilliant automatically selects similar products.

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 frequently bought together products carousel?

Yes. You can add both the Similar products carousel and the Frequently bought together products carousel to the same product page.

6. How can I remove the carousel?

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

Keep learning!

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

• Guide to installing Brilliant, to configure Brilliant in your Shopify store. 

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

• Add a Brilliant frequently bought together products carousel, to display complementary products on product pages.

• Frequently asked questions about Brilliant, to resolve the most common questions about how it works and how to configure it.