Metafields

The metafields object is a powerful tool that allows users to expand the standard Shopify functionality, modify themes and integrate custom apps by adding additional data to the main resources such as products, collections and blogs. There are many apps in Shopify that allow you to edit metafields, there is one that is Free of charge and we usually use and is Metafield Guru.

Note: a metafield can be defined by two features: Namespace and Key.

Namespace is used to group different metafields and by default is global.

Key is used to reference a specific metafield and the value is up to you. Please remind that it can't contain spaces neither uppercase characters.

Namespace

By default the adapter will use global as value for the namespace. On ALL the elements defined below you can add the optional attribute:

to change the namespace to use.

Article Metafields

Below you will find all the attributes that can be used to use Metafield for articles.

Text

On any text you can add the attribute

To output the value of the metafield as text content of the element where the attribute is applied to.

For example: if you add

on a heading element, you will get the following liquid output:

<h2>{{article.metafields.global.my_custom_subheading}}</h2>

Image

You can add this attribute to any image or background image:

Shopify automatically compress the photo, and optimizes the photo, you can add the following optional attributes to change shopify parameters

Dimension

you can change the size of the featured image, you can add the following optional attribute:

As for valid dimension you can use these prefixed values below, ordered by largest to smallest:

master,grande, large, medium, compact, small, thumb, icon, pico

or you can set a fixed width x height (or just one of the parameters):

{width}x{height}, {width}x, x{height}

For example to set a fixed size image of 300x500 add the attribute

Crop

You can specify a crop parameter to make sure that the resulting image's dimensions match the requested dimensions. If the entire image won't fit in your requested dimensions, the crop parameter specifies what part of the image to show.

You can specify crop using the attribute:

Valid options are:

top, center, bottom, left and right

Scale

The scale parameter lets you specify the pixel density of the image. You can add it using the attribute:

Valid options are:

2 and 3

Format

The format parameter lets you specify what file format to use for the displayed image.

You can specify it adding the attribute:

Valid options are:

jpg and pjpg

pjpg is progressive JPEG. A browser loads a full-sized progressive JPEG with gradually increasing quality, instead of loading the full-quality image from top to bottom like a traditional JPEG.

Note that Shopify can do the only the following format conversions for you:

• PNG to JPG
• PNG to PJPG
• JPG to PJPG

Color

You can add this attribute to any text element to modify the color:

Border Color

You can add this attribute to any element to modify the border color:

Background Color

You can add this attribute to any element to modify the background color:

Link

You can add this attribute to any link element to modify the src attribute:

Product Metafields

Below you will find all the attributes that can be used to use Metafield for products.

Text

On any text you can add the attribute

To output the value of the metafield as text content of the element where the attribute is applied to.

For example: if you add

on a heading element, you will get the following liquid output:

<h2>{{product.metafields.global.my_custom_subheading}}</h2>

Image

You can add this attribute to any image or background image:

Shopify automatically compress the photo, and optimizes the photo, you can add the following optional attributes to change shopify parameters

Dimension

you can change the size of the featured image, you can add the following optional attribute:

As for valid dimension you can use these prefixed values below, ordered by largest to smallest:

master,grande, large, medium, compact, small, thumb, icon, pico

or you can set a fixed width x height (or just one of the parameters):

{width}x{height}, {width}x, x{height}

For example to set a fixed size image of 300x500 add the attribute

Crop

You can specify a crop parameter to make sure that the resulting image's dimensions match the requested dimensions. If the entire image won't fit in your requested dimensions, the crop parameter specifies what part of the image to show.

You can specify crop using the attribute:

Valid options are:

top, center, bottom, left and right

Scale

The scale parameter lets you specify the pixel density of the image. You can add it using the attribute:

Valid options are:

2 and 3

Format

The format parameter lets you specify what file format to use for the displayed image.

You can specify it adding the attribute:

Valid options are:

jpg and pjpg

pjpg is progressive JPEG. A browser loads a full-sized progressive JPEG with gradually increasing quality, instead of loading the full-quality image from top to bottom like a traditional JPEG.

Note that Shopify can do the only the following format conversions for you:

• PNG to JPG
• PNG to PJPG
• JPG to PJPG

Color

You can add this attribute to any text element to modify the color:

Border Color

You can add this attribute to any element to modify the border color:

Background Color

You can add this attribute to any element to modify the background color:

Link

You can add this attribute to any link element to modify the src attribute:

Collection Metafields

Below you will find all the attributes that can be used to use Metafield for products.

Text

On any text you can add the attribute

To output the value of the metafield as text content of the element where the attribute is applied to.

For example: if you add

on a heading element, you will get the following liquid output:

<h2>{{collection.metafields.global.my_custom_subheading}}</h2>

Image

You can add this attribute to any image or background image:

Shopify automatically compress the photo, and optimizes the photo, you can add the following optional attributes to change shopify parameters

Dimension

you can change the size of the featured image, you can add the following optional attribute:

As for valid dimension you can use these prefixed values below, ordered by largest to smallest:

master,grande, large, medium, compact, small, thumb, icon, pico

or you can set a fixed width x height (or just one of the parameters):

{width}x{height}, {width}x, x{height}

For example to set a fixed size image of 300x500 add the attribute

Crop

You can specify a crop parameter to make sure that the resulting image's dimensions match the requested dimensions. If the entire image won't fit in your requested dimensions, the crop parameter specifies what part of the image to show.

You can specify crop using the attribute:

Valid options are:

top, center, bottom, left and right

Scale

The scale parameter lets you specify the pixel density of the image. You can add it using the attribute:

Valid options are:

2 and 3

Format

The format parameter lets you specify what file format to use for the displayed image.

You can specify it adding the attribute:

Valid options are:

jpg and pjpg

pjpg is progressive JPEG. A browser loads a full-sized progressive JPEG with gradually increasing quality, instead of loading the full-quality image from top to bottom like a traditional JPEG.

Note that Shopify can do the only the following format conversions for you:

• PNG to JPG
• PNG to PJPG
• JPG to PJPG

Color

You can add this attribute to any text element to modify the color:

Border Color

You can add this attribute to any element to modify the border color:

Background Color

You can add this attribute to any element to modify the background color:

Link

You can add this attribute to any link element to modify the src attribute: