How to install our Collection Tile Widget

To create a new widget, head over to Videowise > Widgets > New widget, locate the "Collection Tile" widget, and click on "Use this widget".

Once created, you will be asked to choose a custom video for each of your collections. You can also decide to set up the same video for multiple collections.

You can create as many collection/video associations as you want, by clicking on Add collection below your already existing one.

To display text and a button on your widget, you will need to add:

On Dawn and default Shopify themes

To publish the widget, click on the "Publish on site" button, and copy the Videowise code.

Keep the code in your clipboard, and head over to your Shopify theme's code.

Here, we are going to target your collection's product grid that appears in your collection pages. On Dawn theme, you should find a ".liquid" file called "main-collection-product-grid".

To find it faster, you can search for "product-grid" or "collection" in the left sidebar of the Shopify file lookup.

Once on the right file, we are going to look for the <div> that calls the collection and its products. To do that, you can preview your store, go to any collection and check what <div> and what class interact with these elements.

In the Dawn example, we see that the collection is built within a <ul> list, and the products are all nested within <li> items.

One thing we're going to check is the class or ID of the existing <li> items. In the Dawn example, we see that the <li> has a class of class="grid__item".

In that case, we are going to nest the Videowise copied code within a <li> element, like below:

<li class="grid__item"> <div class="reeview-app-widget videowise-collection-tile" id="reeview-app-widget_686ce21e0cef440058179f9e" data-widget-id="686ce21e0cef440058179f9e" data-collection-id="{{ section.settings.collection.id | default: collection.id }}"></div></li>

In this example, we will add this Collection Tile widget at the first position of the product grid of your collection page. In order to do that, we will target and paste the code above, right after the <ul> closing tag.

If the code was added properly, you should now see an extra grid added, with the Collection Tile widget on your store.

On Shopify's Horizon theme

Homepage's product list grid

To be the first in the list, you must add the code to the file section/product-list.liquid as below:

<div class="resource-list__item"> <div class="reeview-app-widget videowise-collection-tile" id="reeview-app-widget_68769172b5ebab0057996dd5" data-widget-id="68769172b5ebab0057996dd5" data-collection-id="{{ [section.settings.collection.id](<http://section.settings.collection.id/>) | default: [collection.id](<http://collection.id/>) }}"></div> </div>

To put it in other positions (for example, position 2), the following code must be used:

{%- if forloop.index == 2 -%} <div class="resource-list__item"> <div class="reeview-app-widget videowise-collection-tile" id="reeview-app-widget_68769172b5ebab0057996dd5" data-widget-id="68769172b5ebab0057996dd5" data-collection-id="{{ section.settings.collection.id | default: collection.id }}"></div> </div> {%- endif -%}

Collection page

To be the first in the list you must add the code to the file section/main-collection.liquid.

<li class="product-grid__item"> <div class="reeview-app-widget videowise-collection-tile" id="reeview-app-widget_68769172b5ebab0057996dd5" data-widget-id="68769172b5ebab0057996dd5" data-collection-id="{{ section.settings.collection.id | default: collection.id }}"></div> </li>

To put it on other positions (for example position 2) the following code must be used:

{%- if forloop.index == 2 -%} <li class="product-grid__item"> <div class="reeview-app-widget videowise-collection-tile" id="reeview-app-widget_68769172b5ebab0057996dd5" data-widget-id="68769172b5ebab0057996dd5" data-collection-id="{{ section.settings.collection.id | default: collection.id }}"></div> </li> {%- endif -%}