In this article, you will learn how to install Brilliant in your store, activate the initial connection, and verify that all elements work correctly before you start selling with AI.
1. Prerequisites
Before starting, make sure you meet the following to avoid errors during the process:
- Have an active store on the Shopify platform.
- Have administrator permissions or sufficient permissions to install apps within your control panel.
2. Installation from the Marketplace
To add Brilliant to your ecommerce, follow these steps:
-
App location:
Access your Shopify panel, go to the Apps section, and select Shopify App Store.
-
Search:
Type "Brilliant AI assistant" in the app store search bar.
-
Installation:
Click the Install button. Shopify will redirect you to a screen detailing the required permissions. Click Install again to accept and complete the connection.
3. Initial Setup After Installation
Once the installation is confirmed, access Brilliant from your list of apps in Shopify to enter the backoffice.
Recommended First Steps
-
Agent creation:
Start creating the agent so the AI can analyze your catalog. This process is automatic but may take several hours depending on the number of products. You can continue using your store normally in the meantime.
-
Agent activation:
Once the catalog is processed, make sure to mark the agent as Active in the control panel.
-
Enable the widget in the theme:
To make the assistant visible, go to Online Store / Themes / Customize. In the App Embeds section, activate the Brilliant toggle and save the changes.
-
Show Brilliant contextual action buttons on product cards:
Once you have activated the Brilliant widget in the theme, besides displaying the main Brilliant button in the bottom corner of the screen, contextual action buttons should also start appearing on the product cards of your website.
If this does not happen, it is because one of the following cases applies:-
You are using a public Shopify theme without code modifications. If you do not see the contextual action buttons on your product cards and you are using a public Shopify theme, it is because Brilliant has not yet added support for that theme. If this is the case, please contact us at support@getbrilliant.ai indicating your ecommerce domain and the name of the public theme you are using. Our developers will update Brilliant's support for your theme with top priority.
-
You are using a public Shopify theme with code modifications, or a custom private theme. If this is the case, you will need to add a small HTML code snippet in your theme so Brilliant can display the contextual action buttons on the product cards. The code you need to add in each product card is
data-bri-product-id="product id". In Shopify Liquid code, you usually need to put something like:data-bri-product-id="{{ product.id }}". You have to add this to all product cards where you want the Brilliant contextual button to appear. Typically, you have a file named product-card.liquid or similar, and this component is reused in several page types like the index, collection products, search results, etc., so you only have to add this code in that file, and it will apply to your entire theme. The above code is an HTML attribute that you must add to the parent DOM element that wraps each product card. Except in very exceptional cases, you should be able to add this code to an existing HTML element in your theme; that is, it should not be necessary to create a new element with this attribute that wraps the entire product card.The goal is to generate code similar to the following:
<body> ... <div class="my-theme-product-card" data-bri-product-id="86461581684"> ... inner html of this product card </div> ... <div class="my-theme-product-card" data-bri-product-id="95168765168"> ... inner html of this product card </div> ... <div class="my-theme-product-card" data-bri-product-id="21564846848"> ... inner html of this product card </div> </body>
-
-
Style customization:
On the Brilliant management page, go to Settings / General Styles and adjust the colors and typography so the assistant resembles your store as closely as possible:
4. Functionality Checks
To verify that the installation was successful, browse your store and check the following elements:
-
Floating button: The Brilliant activation button should appear in the corner of your website.
-
Product Cards: You should see the smart chips or tags integrated into the product cards.
-
Interaction: Ask the assistant a question and verify that the answers are correctly generated based on your catalog.
Want to know more?