Add Brilliant's 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 Brilliant's similar products carousel on your Shopify store's product pages.

Before you begin

Before adding the carousel, make sure that:

• Brilliant Control Center is enabled in your Shopify theme.
• The Similar products feature is enabled under Features.
• 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 your Shopify admin, go to "Online store > Themes".

2. Locate 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 Brilliant's 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's 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's 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 space 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, from the right sidebar, configure the overall 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 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 notice say that Similar products is disabled?

This notice indicates that the Similar products feature is disabled in Brilliant.

Go to Features and enable 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

Make sure that:

• You've saved the changes in the theme editor.
• You've added the carousel to the published theme in Shopify.
• Brilliant is enabled from Home. 
• The Similar products feature is enabled under Features. 
• The catalog has finished processing. 
• If the carousel only fails to 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 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 products that go well together carousel?

Yes. You can add both the Similar products carousel and the Products that go well together 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:

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

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

• Add Brilliant's products that go well together carousel, to display complementary products on product pages.

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