Installing Hypervisual on alternate themes

Breaking Down the Hypervisual Installation

(Have you changed to a new theme and don't need to install on alternate themes? Scroll to the bottom for activation instructions.)

When you install Hypervisual, it will install four key components in your Main/Current theme:

1. Templates/page.hypervisual.liquid
2. Templates/product.hypervisual.liquid
3. Sections/hypervisual-page.liquid
4. Snippets/hypervisual.liquid

The first two Templates provide page and product layouts that will only show the corresponding Hypervisual Page. They tell Shopify where to place the Hypervisual designs on a page or product when that template is in use. page.hypervisual is the template used by default for all new pages created within the Hypervisual app.

The Section and Snippet are required for Hypervisual pages to be properly displayed in all locations called by your templates.

After the automatic installation, the Hypervisual team will come in and place our embed code:

{% render 'hypervisual' %}

to properly show in your existing templates. For products, we typically place this following your product description. For existing pages using page template we place it below the title and above any typed content. Depending on whether or not you use a sectioned theme, this will usually be in Templates/product.liquid or Sections/product-template.liquid. Some themes and apps create a number of specific templates. You can always open up your Shopify page, product, collection, etc to see the template in use for any item. And you can change it to any other template. It will be located in the lower right hand corner of the screen (your options will look different than this example):

Installing on Themes That are Under Development

If you have installed additional themes and would like to preview your Hypervisual pages on them, you have two options:

1. Reach out to us, via app chat or hello@gethypervisual.com, and we will install for you
2. Install it yourself following the instructions below

Self Installation on Another Theme

1. Enter your Current theme (Online Store->Themes) and click on Actions->Edit Code
2. Copy the content from the 4 key files listed in the first section of this document. You can paste the contents for each file in one document or keep them separate.
3. Find your development theme under More Themes and selection Actions->Edit Code next to the theme name.
4. Create all 4 files, one at a time, paying special attention to the exact naming structure. To create a new Template, use "Add a new template" in the left column. You will not need to add "liquid" if you create from Shopify. For example, to create Templates/page.hypervisual.liquid you will select "page" in the first dropdown and type "page.hypervisual" in the new name field. It will place it under Templates and add .liquid. Example image below.

Depending on the templates in use on your current theme, you may need to manually place the embed code on those templates or sections (or sometimes snippets). Check your Current theme to help identify locations.

Again, we are happy to take care of this process for you. But some shop owners and development teams would prefer to do this on their own.

What if I Change to a New Current Theme

If you don't need to preview in development, you can make any theme Current. When you edit and then save any Hypervisual page from the Hypervisual app, it will automatically install all of the missing files. You will then need to add the {% render 'hypervisual' %} embed code into your product template in the right place -- or ask us to.