Setup Guide: Collections

Overview

There are 3 basic steps to set up Custom Fields for Collections.

  1. Create a Field or Widget
  2. Enter some content for your new Field or Widget
  3. (Optionally) Display it.

Let's walk through the process.

Create a Field or Widget

From the left sidebar, click on Collections then choose + Add Field or + Add Widget

file-pvM6mWNtps.png

Choose your Field or Widget type

file-S5BYf9eAVj.png

Label the Feld or Widget 

Advanced users may customize the key and namespace during this step. Note, widgets to not support custom namespaces. 

file-F9fUKS21N0.png

Choose basic options

Some fields have basic field settings included during this step. For example, a multiple select list would allow you to enter the selection options here. You can always change these settings or access additional settings from the Configure Fields page.

file-6UXabEpMiu.png

Locate some content to edit

In the left sidebar, click on Search under Pages.

file-soYoGDB41U.png

Next, locate a product you want to work with on the list. Click on Edit Custom Fields for that page.

file-ySoC0nxRMJ.png

Enter some content & save

Your chosen Field or Widget will have its own content entry requirements depending on what you're working with.

file-Fwlk97S5Tt.png

Decide which display method fits your needs

Custom Fields has 3 options for displaying your content.

  1. Display via Shopify's Theme Editor in a "Section" (we call this the "Full Width Area").
  2. Automatically display in the content area (we call this the "Inner Area").
  3. Manual Installation. Refer to our Developer Guide for more details.

Let's explore all these options. If you want to keep the content hidden for back-office purposes, you can simply stop here.

Display Options

Our first two options start from the Display Fields menu.

file-xfcT1iFBta.pngDisplay Option 1: Full Width Area

This area is ideal for displaying Widgets.

From within the Display section of the app, change the dropdown here to read "Full Width Area". You may also wish to change the theme you're testing on.

file-yS5mtMTVuk.png

Enable Fields or Widgets for use in the Theme Editor

Only enabled fields will be available for use in the Theme Editor. 

Note: Enabling generates theme files in the theme you've set above. This can include Section files, Snippets, CSS and javascript if appropriate. More on this in our Developer Guide.

file-kIw5tNLYdF.png

Save the settings

file-tbj5zr8oY8.png

Open the theme editor

Finally, we need to place the Field or Widget in the Theme Editor. Use our recent products tool to quickly open the editor to the product you added content to.

file-sbTXn87Atj.png

Place your new Widget or Field

Locate the Custom Fields option in the sidebar.

file-YJVTvj2EEs.png

Place the Field or Widget

By default, the app will position its output below the product description, spanning the entire page from left to right. Your developer may move the output of the section if you'd like it output in a different area. 

file-LuUUSXurI1.png

Publish

Be sure to Publish your changes to save your changes.

file-cUi2VgD8Ma.png

Display Option 2: Inner Area

This area is ideal for Fields and may work for smaller Widgets as well.

To begin, click on Display Fields in the left sidebar.

file-xfcT1iFBta.png

Enable the Inner Area

The Inner Area does not utilize Shopify's Theme Editor. Instead, the placement of Fields or Widgets is entirely controlled on the Display screen in the app. Settings are on a per-theme basis.

Note that during this step, the app will update your product template and generate any Snippets, CSS or Javascript that your Fields or Widgets may need. Templates are generated only as needed. More on this in our Developer Guide.

file-25Bx82Ya2Y.png

Enable Fields for Display

Note, using this method will display your fields in your chosen theme immediately after saving the settings.

file-JfCobc1mwC.png

Arrange Fields for Display

Using the Inner Area, you can change the order of Fields or Widgets up or down on a per theme basis.

file-ilWyesWlsY.png

Inspect your Work

Navigate to the product you added content to for this Field or Widget in your store.

file-GchN13Nuue.png