How To: Add Image Slider To Pages

  • In this tutorial we're going to add three images (slides) to the about page. Feel free to add more or less slides accordingly. This tutorial also enables you to add slides to all pages on your store as well.

    To start, we need to set up our configuration. Go to Metafield Configuration and click "Add Metafield" under page. Add the metafields listed below.

    • image-1 : Image
    • image-2 : Image
    • image-3 : Image

    Once complete your metafield configuration should look like the image below

  • Next, navigate to the about page within the app. To do this click on Add Metafields select page then click Search and select About Page.

  • Next, upload the images that you want to show up on your About Page and click Save Changes.

    Once the images have been uploaded, you can see that three code snippets were generated to make it easy if you want to embed the images into inta a .liquid file.

  • Now that you have the data set up. You can create the .liquid snippet that will display the images. You can download the .liquid code snippet here. Be sure to include the snippet on your product.liquid template by adding this line:

    {% include "mm-image-slider" %}

    Or view the snippet below: