Manual Installation

By following this guide you accept the risk of damaging your theme code. We advise to contact our support team instead.

If you are building a custom Product Page liquid from scratch - see this guide.

If you are using a Page Builder app - see this guide.

In this guide we will show how to install the app on any custom theme. As an example we will take the popular Dawn theme.

1. Back-up your theme

By following this guide you accept the risk of damaging your theme code. Make sure to have a copy of your theme before changing the code.

2. Activate the App Embed

Just make sure it's activated: App Embed activation

3. Find the gallery container

Lets find the container of your original gallery. It usually includes all images and videos of the product:

What we need is the class or id attribute of the parent container.

Right click on the original gallery and "Inspect" it

Find the container

In the code inspection tab try to find the div container that highlights the whole gallery (including all images)

Remember the class or id attribute

In the example above the container has a class="grid__item product__media-wrapper" attribute. Remember it for the next step. It might also be an id or any other sign that will help you to find the section in the code editor.

4. Update the theme code

Lets edit the theme code to "explain" our script where the gallery should appear.

You need to open the theme code and find the liquid file that contains the section you identified in the previous step.

Some of the popular files are:

• templates/product.liquid

• snippets/product.liquid

• sections/main-product.liquid

But some themes might have a different file name for this.

Once you found the code section - add a class="pmslider-manual-install" to it (see screenshot below).

Our script will replace the content of this block so make sure it only includes the section that needs to be replaced. If by accident you select the wrong block - some of your page elements might get hidden.

Add a class to the code block

After you save the changes - try to reload the product page. If the app is enabled - you should see the effect: