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:
Once we finish setting up the slider we're going to associate the slider with a particular page. For this example we will be using the Home Page Collection.
To start, we need to set up our configuration. Go to Metafield Configuration and click "Add Metafield" under collection. Add the metafields listed below.
As you can see, we're going to associate 3 "Slide" Custom objects to the collection.
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:
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".
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 "Home Page Collection". You can do this by navigating to the homepage, click on Add Metafields select custom_collection then click Search and select Home Page.
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: