How To: Add Slider To Articles

  • In this tutorial we are going to make a slider that has a maximum of 3 slides. Each slide in the slider will be a link to a Custom object. The "slide" Custom Object will contain the following metafields:

    • Title : HTML
    • Subtitle : HTML
    • Call to action (CTA) title : String
    • Call to action (CTA) link : String
    • Image : Image

    Once we finish setting up the slider we're going to associate the slider with a particular article. For this example we will be using the First Post blog article.

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

    • slide-1 : Custom-object
    • slide-2 : Custom-object
    • slide-3 : Custom-object

    As you can see, we're going to associate 3 "Slide" Custom objects to the article.

    When finished, your configuration should look like the image below.

  • Now we need to create the "Slide" custom object. Do this by returning to the homepage and clicking on Edit your Custom Object Configurations then clicking on Create a new Object Type.

    Now its time to add the metafields for each "Slide" Custom Object. Enter "slide" for the custom object handle and then add the following metafields:

    • title : HTML
    • subtitle : HTML
    • cta-title : String
    • cta-link : String
    • image : Image

    Once you added them. Click Save Changes. Once you hit save, your custom object configuration page should look like the image below:

  • Now you need to create your slide Custom Object instances. You do this by going back to the homepage and clicking Create/Modify Custom Object then clicking on Create new slide under "slide".

    Your data should look something like this

    Simply fill out the data you want for your slide and click Save Changes. For this example. I am going to create three slides. When complete, your Custom Object listing page should look like the following image.

  • Now that you have created your slides. All you have to do it associate them with the "First Post" Article. You can do this by navigating to the homepage, click on Add Metafields select articles then click Search and select First Post.

    Now all you have to do is copy and paste the id of each slide you created and paste it into the slide-1, slide-2, slide-3 metafields slots and click Save Metafields.

    When complete, your metafields detail page should look like the following image.

  • If you scroll down, you'll see that several extra metafields have been added. These metafields are grouped for each slide.

    Now all you have to do is embed them in the .liquid template using the snippets listed. We created an example for you to download here. Be sure to include the snippet on your .liquid template by adding this line:

    {% include "mm-slider" %}

    You can also view the snippet below: