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 Searchanise Upsell & Marketing 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 Searchanise Upsell & Marketing admin settings.

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 the App embeds tab.
4. Beside the Upsell & Cross-Sell app embed, click the toggle to activate it.
5. Save the changes.

Setting up the widget

There are two ways to install the Upsell & Cross-Sell widgets on your storefront (the setting is located above the tabs and in the widgets’ settings in the top right corner)

1. In the app

This is a quicker way. The widgets will be placed in the footer of your store. You can select the pages to display the recommendations while editing each widget: use Install on at the bottom.

2. In the Theme editor

This is a more customizable way to add an app block or section on the storefront.

Take these steps to set up the widgets in the Theme editor:

1. From the app admin, open the Upsell & Cross-Sell app.
2. Click the Install icon next to the widget you want to place in your store.

   

3. Select the page where you want the recommendation to be displayed.
4. Copy the Unique Key that appears.
5. Carefully read the instructions and click Install. Note: You should only implement Step 2 of the instructions if you haven’t activated the app embed before.
   
6. The Theme Editor will open on the selected page, and the app block will be automatically added.
7. In the block settings, paste the Unique Key into the key field, which you’ve copied previously.
8. Click Save at the upper right.

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

Hiding and removing blocks and sections

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

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.