Setting up the Upsell & Cross-Sell app in Online Store 2.0

Shopify themes have two architecture types: Online Store 2.0 and vintage themes. Your theme architecture version determines the file types that make up your theme, how you can customize your theme, and how apps can integrate with your theme. Learn more about theme architecture versions.

A new theme architecture called Online Store 2.0 allows you to add app functionality anywhere in your theme by using app blocks and app embeds. You can add, remove, preview, reposition, and customize app blocks through the theme editor.

Therefore, the Bolide team has built the application to integrate seamlessly with Online Store 2.0 through app blocks and app embeds. You can add app sections and blocks to your store pages and configure their appearance in the BolideAI admin settings.

On this page

• Creating a widget
• Activating app embed
• Setting up the app block
• Removing blocks and sections
• Hiding blocks and sections

Creating a widget

Before adding an app block to your Shopify theme, you should create the widget in the BolideAI admin. Follow these steps:

1. From your Shopify admin, go to the BolideAI admin.
2. Open the Upsell & Cross-Sell app.
3. Click Create recommendations and select the Widget type.
4. On the Create a new Recommendation Widget page, customize the app settings.
5. Set the widget status as visible.
6. Save changes.
7. From the General tab, click Activate app.

Tip: You can find the description and specifications of the Recommendation Widgets types in our help article on Setting up Upsell & Cross-Sell product blocks. 

Activating app embed

After you hit Activate app in the app admin, it redirects you to the theme editor's App embeds tab. You will need to activate it directly from the theme editor:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Click Theme settings.
4. Click the App embeds tab.
5. Beside the Upsell & Cross-Sell app embed, click the toggle to activate it.
6. Save the changes.

Setting up the app block

Steps:

1. From the BolideAI admin, open the Upsell & Cross-Sell app.
2. Copy the key that appears in the Unique Key column of the list. You will need it later.
3. Go to Online Store > Themes and open the theme editor.
4. Navigate to the page where you want to add the app section.
5. Click Add section.
6. From the drop-down menu, in the Apps section, select the widget that you want to add to the page.
7. In the block settings, paste the Unique Key into the key field, which you’ve copied previously in the BolideAI admin.
8. Click Save at the upper right.

The app block is added to the store page and loads within 20 seconds.

Note: App blocks can only be used with Online Store 2.0 themes. With the Online Store 2.0 theme, you can add app blocks to any page of your store through the theme editor. If you use a vintage theme, you should select the store pages in the Recommendation Widget settings. Learn more

Removing blocks and sections

For each item, you can delete a section or block from a template by going to the settings screen. The Remove section or Remove block button appears at the bottom of the section settings.

Steps:

1. In the theme editor sidebar, click the section or block that you want to remove.
2. Click Remove section or Remove block.
3. Click Save. 

Hiding blocks and sections

You can hide any section or block using the eye icon.