Slider for GemPages

Before following this guide make sure the App Embed is activated

App Embed activation

Step 1: Open the Product Page in GemPages editor

Or create a new one from the template:

Create new Product Page in GemPages

Step 2: Remove default gallery section

Now we need to remove the old gallery that was added to the Product Page by default. You can skip this if you are building a new page from scratch.

Find the “(P) Image” element and right-click to delete it

Remove old GemPages gallery

Find the "(P) Image List" element and right-click to delete it

Remove old GemPages gallery

Step 3: Add new Liquid element

Add a new “Liquid” element. Put it at any place on the page but usually you will want to put it just where the old gallery was positioned.

This is where the Slider will appear:

Add Liquid element to GemPages page

Step 4: Open code editor for the Liquid element

Right-click to edit the code:

Right click to edit GemPages Liquid code

Add the Slider container code:

Copy-paste the code and click “Save”

<div class="pmslider-manual-install">
</div>

This includes an empty container where the Slider will be injected to.

Step 5: Publish the changes

Save and publish the changes in GemPages editor.

Step 6: Enable the App

Make sure the App is enabled on the Configuration page.

Step 7: Check the result

Now you should see the Slider live on your store:

Product Page Slider integrated in GemPages template