Displaying Custom Fields on the Home Page

Overview

Similar to displaying Product fields on collections pages, you may want to display Custom Fields on the home page as well. This can be useful if you were to have a sale on certain items and you wanted it to display this fact within your store's homepage to attract attention.

There are a couple of different ways you can display Custom Fields on the home page. The first one is through a featured collection. Collection Fields can be attached to any product grid, for more information on this, visit the tutorial on Displaying Product Fields on Collections.

The other ways to do this are a little strange. You can place globals underneath the header, above the header, and also below and above the footer.

Getting Started

Create your new field to be displayed on the home page! In this example, we are creating a new Link field that will take users to the Help Center!

Edit Custom Fields Code

After clicking Create New Link Field, the user will be brought to the Edit Custom Fields screen where they can Edit the Code of their Custom Field. We will add text that reads, "For more helpful information, visit our Help Center here." With Help Center being our link.

Edit Global Fields Value

Now we can Edit our Global by clicking the Magnifying Glass with Edit Globals next to it. Here we can edit the values of each one of our Globals, we need to add a link and a title to our new Global Field.

Next, copy the print statement for our Custom Field (found in the Edit Code screen) and we can head over to our Shopify Code Editor.

Open Index.liquid

Index.liquid should be looking pretty sparse with only one line of code in it,

{{ content_for_index }}

This means that the only places where we can place our home page fields are above the header and below the footer. This is because of the way Shopify deals with customizing pages. If you just paste the code above or below however, you wont be able to see your field anywhere. This is because your field is hiding underneath Shopify's content still. Just put break tag in before your code and you'll see your field appear where you pasted it!