File Reference Field (Including Images & Videos)

Overview

File Reference Field collects references to files using a GraphQL ID. Files are selected from the Files section in Shopify and managed using a file browser for ease-of-use. 

Heads Up!

This field type cannot yet be used in Field Collections or Widgets due to Shopify limitations at the time of launch.
See also: Image Field

Content Entry Form

Basic content entry is performed using a file browser including a search option. Existing files in the Files section in Shopify can be selected, or new files can be uploaded. New files are limited to 20 megabytes or 20 megapixels. Larger files can be uploaded through the Shopify Files section and referenced in the app.

Note, if a previously selected file has been deleted or could not be loaded, the form element will turn red. Since the item no longer exists, the title of the item cannot be displayed. 

Content Entry Settings & Validation Options

This field has no additional options.

Compatibility

  • Shopify Metafield Types
    • Compatible with File Reference Type in Shopify. 
    • Data can be edited in the app or in Shopify.
    • Compatible with Metafield Definitions in Shopify. If a Metafield Definition is created, Custom Fields will use the defined version. 
  • Preset Choices or Lists
    • Not compatible.
  • Theme Support
    • Compatible Online Store 2.0.
    • Raw data is compatible with Dynamic Sources in themes. 
    • Field Template from app not required for theme display.  
  • In-App Bulk Edit
    • Compatible with Bulk Editing in Custom Fields.
  • Field Type Status
    • Field type is current and recommended.
  • Field Type Conversion
    • Not required

Image Manipulation (Scale, Crop, Etc.)

This field type can use Shopify's built-in image manipulation features in Shopify's Liquid templating language. Custom Fields generates template files that works within Shopify themes and the Theme Editor. Visit the Code tab for any field to see the code the app generated for your field. 

Check out Shopify's image documentation to learn how to adjust the image code.

Shopify image options include: 

width The width of the image in pixels, up to a maximum of 5760 px.
height The height of the image in pixels, up to a maximum of 5760 px.
crop If the entire image won't fit in your requested dimensions, the  crop parameter specifies what part of the image to show (top, bottom, center, left, right).
format The file format to use for the displayed image ( jpg or pjpg).
pad_color The color to pad the image with if the provided image is smaller than the requested dimensions. Accepts only hex codes.

See below for example code from the app's template generator on the Code tab for any field.

Video Manipulation

This field type can use Shopify's built-in video features in Shopify's Liquid templating language. Custom Fields generates template files that works within Shopify themes and the Theme Editor. Visit the Code tab for any field to see the code the app generated for your field (an example is shown above).

Check out Shopify's video documentation to learn how to adjust the video's cover image.