Have you ever wanted to show more graphical content on your collection page? Sure, you can have a big banner on top or use the collection image anywhere else on the page, but what if you wanted to show multiple images on the same collection page.
This is a perfect example of where Metafield Editor app is the perfect tool.
The first step for doing this will be uploading images to Shopify`s files section (Settings>Files). Then, copy each file url and store them somewhere, or just open a new tab and go to Apps > Metafield Editor. This is assuming you already have installed the app, if not please install it before moving further.
In case you did install Metafield Editor, go to the app`s dashboard and select collections. Next select your desired collection, the one you would like to show the second image in.
Now you have 3 form fields in which you will put the necessary info. First is Namespace. Think of it as a category for your metafields. So if you have multiple images you want to add, each of them will have the same namespace. For example i chose "banner".
The second field is called Key. Think of it as the unique identifier for a specific metafield. For this one I chose "second_image"
The last field is called Value. It represents the actual value that will show on your storefront. Here you will place the actual url of the image. The "https://cdn.shopify.com/s/files....." one.
The last step is to hit Submit and then "view results" and voila...your new metafield is ready to be used.
Now we have to show the image somewhere. To do this you will have to edit the collection`s template .liquid file. To do this, from the dashboard, select Online Store > Themes and Edit Code for your theme. There look for the templates folder and inside templates find collection.liquid. This name may also look like collection.custom.liquid or collection.whatever.liquid.
To use metafields on the storefront you will have to use liquid (Shopify`s templating language) Read more here.
To access a specific metafield your code will look like this:
{{ collection.metafields.banner.second_image }}
Let`s break it down:
- Collection - the object that we are accessing
- Metafields - the key inside the object we are looking for
- banner - this is the namespace of the metafield
- second_image - the key attribute of the metafield
This code will return the metafield`s value. So if you place the above code anywhere in the collection template .liquid file and save, you will see "https://cdn.shopify.com/s/files....." on your collection page. So in order to show the actual image your code will lok something like this:
<div style="display:flex;"><img src="{{ collection.metafields.banner.second_image }}" height="200" width="450"><p><== Second collection image</p></div>
and this is the result:
It may not look like the most usefull thing, but I am sure there are a lot of use cases when you will need to use this. For example a collection page with a banner on top and 2 side banners, or show banners in between the products based on categories, tags, or why not sorted by metafields. Or maybe you want to show a different featured image on your homepage. Yo can even use a video as a fetured banner on your collection page.
Te possibilities are truly unlimited. Please leave a comment if you have any questions or suggestions