Assortion

Once created and active, widgets automatically find a good position on the page and display themselves. To open a widget in the store, click the 3-dotted button next to widget and click 'View in store'. This will open the widget in a store page where it is displayed.

If the widget is not showing in the store or you want the change its position, you can use following guides.

If your theme supports Online Store 2.0, you can use our app blocks in the Shopify theme editor to embed widgets in the page. Please follow 

If you are using a vintage theme, you can use CSS selectors to position elements in the page

If you are using a page builder such as PageFly or GemPages, you can follow 

Installing widgets to your store

Enabling app embed

To activate a checkout upsell after creating a widget, you'll need to add our our "Checkout Upsell" app block in the Checkout page of the Shopify theme editor as shown below:

Set up checkout upsells

Assortion has 3 types of app blocks you can use in the theme editor:

FBT Bundle: app block for embedding frequently bought together widget

Product Add-ons: app block for embedding product add-ons widget

Volume Discount: app block for embedding volume discount widget widget

These app blocks are currently only supported on the product pages.

To add app blocks to your Shopify theme, compatible with Online Store 2.0 themes, follow these steps:

First, log in to your Shopify store and go to the "Online Store" section of your dashboard.

In the "Online Store" section, click on the "Customize" button to open the theme editor for your store.

Click the dropdown button in the middle of the top bar of the page, and choose "Products" and then "Default product" options.

In the theme editor, you will see a list of sections on the left side of the screen. Scroll down and find the section where you want to add the app block.

Click "Add block" button at the end of the section, or "Add section" if you would like to create a separate section for the widget.

In the opening popup's "APPS" section, select the app block for the widget type you want to create. The app block will be added to the section.

To change the position of the widget in the section, you can press and hold the dotted button at the right side of the app block and drag and drop to the desired location.

To delete an block, click on the app block and a sidebar will open at the right side of the screen. Make sure the sidebar title matches the name of the app block and click "Remove block" button at the bottom of the sidebar.

Save your changes and refresh your store's pages to see the app block in action.

If you can't see the app blocks in your theme editor, it means your theme does not support Online Store 2.0 yet. 

App blocks does not modify your theme code and are automatically deleted when you delete the app from your store.

If you have any questions about setting up the app blocks, please email us at 

Setup app blocks for Online Store 2.0 themes

You can embed widgets into page builders like PageFly or GemPages by inserting specific HTML code for each widget type.

The HTML code for each widget type as follows:

To embed HTML code into PageFly, you can use HTML/Liquid block in the page editor. Please refer to the following PageFly help document for detailed instructions: 

https://help.pagefly.io/manual/html-liquid-element/

To embed HTML code into GemPages, you can use Liquid block in the page editor. Please refer to the following help document for detailed instructions: 

https://help.gempages.net/articles/custom-code-liquid-element

Getting started

Installing widgets to your store

Enabling app embed

Set up checkout upsells

Setup app blocks for Online Store 2.0 themes

Integration with page builders