Creating Linked Images

Overview

Custom Fields does not have linked images built-in as a field type, but you can easily create this functionality with some simple changes to your template.  

In this example, we'll show you how to create images with links on a product, but you can use this technique for other types as well. 

1.) Create three new Product Custom Fields

Create one field for the URL, one for the Image, and one Liquid Template for our code.

Note: For the URL and the Image Fields, check the box that says, Exclude from display.

Tip: In order for the Image field to display correctly, make sure to click Display As Image before clicking Save.

Tip: You may also want to group both of these fields with a "Field Group" or use a "Field Collection" to help your admins understand how to use these fields.

3.) Note the Machine Names for your Fields

First, you'll want the namespaces for the fields you just created. Then you'll use those namespaces in your theme customization.

Machine Names are created using the label name you gave the field, capital letters will be lowercased and spaces will be converted to underscores automatically. When creating a new field, It will show you to the right, what the machine name will be.

Tip: See also, Theme Snippets, Namespaces and Developer Information About Each Field.

4.) Edit the Code

Open the Snippet Editor for the Liquid Template field you created earlier. This is where we will edit the code for our new fields.

 The format is as follows, using your specific "namespaces" you copied down earlier:

<a href="{{ product.metafields.custom_fields["<strong>YOUR_URL_MACHINENAME</strong>"] }}">{{ product.metafields.custom_fields["<strong>YOUR_IMAGE_MACHINENAME</strong>"] }}</a>

Applying our example fields, it would look as follows:   

<a href="{{ product.metafields.custom_fields["url"] }}>{{ product.metafields.custom_fields["image"] }}</a><br><br>To finish it off, add a conditional test around your image and link code so that it only prints if there is a value for the image and a value for the link. The final result would look like this:

{% if product.metafields.custom_fields["url"] !=null and product.metafields.custom_fields["image"] !=null %}<br><a href="product.metafields.custom_fields["url"]”>{{ product.metafields.custom_fields["image"] }}</a><br>{% endif %}

5.) Save and Test!

Don't forget to save your template changes. And finally, test your changes on a product in your store. Make sure you add a test image and link to a product in the app and test against that product. If there are no values for a product for this field, nothing will show up when you test. 

Additional Information & Resources

Custom Fields: Field Collection - This Custom Fields article goes in depth about the Field Collections field type. This can be useful for this tutorial as you can have multiple linked images on one page!

Custom Fields: Field Group - This Custom Fields article explains how to use the Field Grouping feature for organization.