How to add a gallery of shoppable videos to your site.

This guide details how to add an in-page gallery of shoppable videos to your site. There is no coding experience required and can be accomplished easily in the Reactive app.

EXAMPLE

Reactive automatically creates a "Past Live Events" gallery where your most recent live events are automatically added as you go. Read more here to see where to find the snippet for the "Past Live Events" gallery.

1. Create a Gallery and get the embed snippet

1. On the app home page, click "Create New" and select the "Content gallery for your site" option.
2. Select which videos you want to add to your gallery and click "Create Gallery". NOTE: You can only add up to 9 video in a gallery
3. Click the "Embed Gallery" button and copy the gallery HTML snippet. Note: You can select "exclude title" if you don't want to display the title of the gallery on your site

2. Add the snippet to a custom page.

1. Click on "Pages" in the "Online Store" sales channel in the side menu.
2. Select the page you want to add the gallery to, or create a new page.
3. In the "Content" text editor, select the "Insert Video" tool.
4. Paste the snippet into the provided text box.
5. Click the Insert Video button to save.
6. Visit the page to ensure that the gallery is showing as expected on your site.

3. Add the snippet to your homepage or theme template.

1. Access the theme editor from your Shopify admin. Click the "Online Store" tab, then the "Customize" button.
2. Add a new section or block by clicking either "+ Add section" or "+ Add Block" in the side menu.
3. Select "Custom Liquid" from the pop-up menu.
4. Paste the embed snippet in the "Custom Liquid" text field.
5. Click the "Save" button to add the gallery video to the template.
6. Visit a the home page or a page using the modified template to ensure that the gallery is showing as expected on your site.

If you are looking to add your snippet in a more custom manner or to a non-shopify site, this is likely a task that you'd ask your developer to accomplish. If you had any issues while following this guide, please reach out to support@reactive.live for more information.