Upsell & Cross-Sell: setting up 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 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.

Important info

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

Activating app embed on Shopify

Setting up the widget

setting up Upsell widgets for Shopify

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.

Install on pages

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.

    intalling in the theme editor

  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.
    instructions
  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.

Add block in the Theme editor

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

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.

Removing Upsell Block on Shopify Online Store 2.0

 

Updated on October 16, 2024

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you

Let us improve this post!

Please tell us how we can improve this post

Related Articles

Back to top