Manual Installation
By following this guide you accept the risk of damaging your theme code. We advise to contact our support team instead.
Last updated
By following this guide you accept the risk of damaging your theme code. We advise to contact our support team instead.
Last updated
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.
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.
Just make sure it's activated: App Embed activation
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.
In the code inspection tab try to find the div container that highlights the whole gallery (including all images)
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.
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.
After you save the changes - try to reload the product page. If the app is enabled - you should see the effect:
