UNPKG

@shopify/cli

Version:

A CLI tool to build for the Shopify platform

1,480 lines • 224 kB
[ { "category": "cart", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "number", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/cart", "raw_liquid": "{{ cart | item_count_for_variant: 39888235757633 }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Returns the total item count for a specified variant in the cart.", "syntax": "cart | item_count_for_variant: {variant_id}", "name": "item_count_for_variant" }, { "category": "cart", "deprecated": false, "deprecation_reason": "", "description": "Accepts the following object types:\n\n- `product`\n- `variant`", "parameters": [], "return_type": [ { "type": "array", "name": "", "description": "", "array_value": "line_item" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/products/bloodroot-whole", "raw_liquid": "{% assign product = all_products['bloodroot-whole'] %}\n{% assign line_items = cart | line_items_for: product %}\n\nTotal cart quantity for product: {{ line_items | sum: 'quantity' }}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "", "description": "", "syntax": "", "path": "/products/bloodroot-whole", "raw_liquid": "{% assign product = all_products['bloodroot-whole'] %}\n{% assign variant = product.variants.first %}\n{% assign line_items = cart | line_items_for: variant %}\n\nTotal cart quantity for variant: {{ line_items | sum: 'quantity' }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Returns the subset of cart line items that include a specified product or variant.", "syntax": "cart | line_items_for: object", "name": "line_items_for" }, { "category": "html", "deprecated": false, "deprecation_reason": "", "description": "<aside class=\"note beta\">\n <h4>Developer preview</h4>\n <p>Style settings are currently only available as part of the <a href=\"/storefronts/themes/architecture/blocks/theme-blocks/developer-preview\">Theme blocks developer preview</a>.</p>\n</aside>", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ settings.layout | class_list }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Generates the list of style classes for a [style setting](/storefronts/themes/architecture/settings/style-settings) or a collection of settings.", "syntax": "settings.layout | class_list", "name": "class_list" }, { "category": "collection", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [ { "description": "attribute [string] You can specify the value of supported [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes).", "name": "HTML", "positional": true, "required": false, "types": [] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ 'Health' | link_to_type }}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "HTML attributes", "description": "You can specify [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) by including a parameter that matches the attribute name, and the desired value.\n", "syntax": "string | link_to_type: attribute: string", "path": "/", "raw_liquid": "{{ 'Health' | link_to_type: class: 'link-class' }}", "parameter": true, "display_type": "text", "show_data_tab": true } ], "summary": "Generates an HTML `<a>` tag with an `href` attribute linking to a collection page that lists all products of the given\nproduct type.", "syntax": "string | link_to_type", "name": "link_to_type" }, { "category": "collection", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [ { "description": "attribute [string] [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) for the link, passed as `attribute: value`.", "name": "HTML", "positional": true, "required": false, "types": [] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ \"Polina's Potent Potions\" | link_to_vendor }}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "HTML attributes", "description": "You can specify [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) by including a parameter that matches the attribute name, and the desired value.\n", "syntax": "string | link_to_vendor: attribute: string", "path": "/", "raw_liquid": "{{ \"Polina's Potent Potions\" | link_to_vendor: class: 'link-class' }}", "parameter": true, "display_type": "text", "show_data_tab": true } ], "summary": "Generates an HTML `<a>` tag with an `href` attribute linking to a collection page that lists all products of a given\nproduct vendor.", "syntax": "string | link_to_vendor", "name": "link_to_vendor" }, { "category": "collection", "deprecated": false, "deprecation_reason": "", "description": "Accepts the following values:\n\n- `manual` (as defined in the [collection settings](https://help.shopify.com/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection))\n- `best-selling`\n- `title-ascending`\n- `title-descending`\n- `price-ascending`\n- `price-descending`\n- `created-ascending`\n- `created-descending`\n\n> Tip:\n> You can append the `sort_by` filter to the [`url_for_type`](/docs/api/liquid/filters/url_for_type)\n> and [`url_for_vendor`](/docs/api/liquid/filters/url_for_vendor) filters.", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/collections/sale-potions", "raw_liquid": "{{ collection.url | sort_by: 'best-selling' }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Generates a collection URL with the provided `sort_by` parameter appended. This filter must be applied to a collection URL.", "syntax": "string | sort_by: string", "name": "sort_by" }, { "category": "collection", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ 'health' | url_for_type }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Generates a URL for a collection page that lists all products of the given product type.", "syntax": "string | url_for_type", "name": "url_for_type" }, { "category": "collection", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ \"Polina's Potent Potions\" | url_for_vendor }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Generates a URL for a collection page that lists all products from the given product vendor.", "syntax": "string | url_for_vendor", "name": "url_for_vendor" }, { "category": "collection", "deprecated": false, "deprecation_reason": "", "description": "When the collection context is included, you can access the associated [`collection` object](/docs/api/liquid/objects/collection)\nin the [product template](/themes/architecture/templates/product).\n\n> Caution:\n> Because a standard product page and a product page in the context of a collection have the same content on separate\n> URLs, you should consider the SEO implications of using the `within` filter.", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/collections/sale-potions", "raw_liquid": "{%- assign collection_product = collection.products.first -%}\n\n{{ collection_product.url | within: collection }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Generates a product URL within the context of the provided collection.", "syntax": "string | within: collection", "name": "within" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "> Tip:\n> For accessibility best practices, it's recommended to have a minimum brightness difference of 125.", "parameters": [ { "description": "A color to compare with the provided color.", "name": "color", "positional": true, "required": true, "types": [ "string" ] } ], "return_type": [ { "type": "number", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#E800B0' | brightness_difference: '#FECEE9' }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Calculates the [perceived brightness difference](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast) between two colors.", "syntax": "string | brightness_difference: string", "name": "brightness_difference" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "number", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_brightness }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Calculates the [perceived brightness](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast) of a given color.", "syntax": "string | color_brightness", "name": "color_brightness" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "The order in which you specify the colors doesn't matter.\n\n> Tip:\n> For accessibility best practices, the\n> [WCAG 2.0 level AA](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast-contrast) requires a\n> minimum contrast ratio of 4.5:1 for normal text, and 3:1 for large text. [Level AAA](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast7)\n> requires a minimum contrast ratio of 7:1 for normal text, and 4.5:1 for large text.", "parameters": [ { "description": "A color to compare with the provided color.", "name": "color", "positional": true, "required": true, "types": [ "string" ] } ], "return_type": [ { "type": "number", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#E800B0' | color_contrast: '#D9D8FF' }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Calculates the contrast ratio between two colors and returns the ratio's numerator. The ratio's denominator, which isn't\nreturned, is always 1. For example, with a contrast ratio of 3.5:1, this filter returns 3.5.", "syntax": "string | color_contrast: string", "name": "color_contrast" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [ { "description": "The amount to darken the provided color by.", "name": "percent", "positional": true, "required": true, "types": [ "number" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_darken: 30 }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Darkens a given color by a specific percentage. The percentage must be between 0 and 100.", "syntax": "string | color_darken: number", "name": "color_darken" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [ { "description": "The amount to desaturate the provided color by.", "name": "percent", "positional": true, "required": true, "types": [ "number" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_desaturate: 30 }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Desaturates a given color by a specific percentage. The percentage must be between 0 and 100.", "syntax": "string | color_desaturate: number", "name": "color_desaturate" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "> Tip:\n> For accessibility best practices, it's recommended to have a minimum color difference of 500.", "parameters": [ { "description": "A color to compare with the provided color.", "name": "color", "positional": true, "required": true, "types": [ "string" ] } ], "return_type": [ { "type": "number", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#720955' | color_difference: '#FFF3F9' }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Calculates the [color difference](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast) between two colors.", "syntax": "string | color_difference: string", "name": "color_difference" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "Accepts the following color components:\n\n- `alpha`\n- `red`\n- `green`\n- `blue`\n- `hue`\n- `saturation`\n- `lightness`", "parameters": [ { "description": "The color component that you want to extract.", "name": "color_component", "positional": true, "required": true, "types": [ "string" ] } ], "return_type": [ { "type": "number", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_extract: 'red' }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Extracts a specific color component from a given color.", "syntax": "string | color_extract: string", "name": "color_extract" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [ { "description": "The amount to lighten the provided color by.", "name": "percent", "positional": true, "required": true, "types": [ "number" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_lighten: 30 }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Lightens a given color by a specific percentage. The percentage must be between 0 and 100.", "syntax": "string | color_lighten: number", "name": "color_lighten" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "> Tip:\n> A percentage factor of 100 returns the color being filtered. A percentage factor of 0 returns the color\n> supplied to the filter.", "parameters": [ { "description": "A color to mix with the provided color.", "name": "color", "positional": true, "required": true, "types": [ "string" ] }, { "description": "The percentage amount to mix the colors by.", "name": "percent", "positional": true, "required": true, "types": [ "number" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#E800B0' | color_mix: '#00936F', 50 }}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "", "description": "If one input has an alpha component, but the other does not, an alpha component of 1.0 will be assumed for the input without an alpha component.\n", "syntax": "", "path": "/", "raw_liquid": "{{ 'rgba(232, 0, 176, 0.75)' | color_mix: '#00936F', 50 }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Blends two colors together by a specific percentage factor. The percentage must be between 0 and 100.", "syntax": "string | color_mix: string, number", "name": "color_mix" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "The following table outlines valid color components, and the value range for their modifications:\n\n| Component | Value range |\n| --- | --- |\n| <ul><li>`red`</li><li>`green`</li><li>`blue`</li></ul> | An integer between 0 and 255 |\n| `alpha` | A decimal between 0 and 1 |\n| `hue` | An integer between 0 and 360 |\n| <ul><li>`saturation`<li>`lightness`</li></ul> | An integer between 0 and 100 |", "parameters": [ { "description": "The color component that you want to modify.", "name": "color_component", "positional": true, "required": true, "types": [ "string" ] }, { "description": "The amount to modify the supplied color component by.", "name": "modification_value", "positional": true, "required": true, "types": [ "number" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_modify: 'red', 255 }}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "", "description": "The format of the modified color depends on the component being modified. For example, if you modify the `alpha` component of a color in hexadecimal format, then the modified color will be in `rgba()` format.\n", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_modify: 'alpha', 0.85 }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Modifies a specific color component of a given color by a specific amount.", "syntax": "string | color_modify: string, number", "name": "color_modify" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [ { "description": "The amount to saturate the provided color by.", "name": "percent", "positional": true, "required": true, "types": [ "number" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_saturate: 30 }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Saturates a given color by a specific percentage. The percentage must be between 0 and 100.", "syntax": "string | color_saturate: number", "name": "color_saturate" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "Because colors are converted to `hex6` format, if a color with an alpha component is provided, then the alpha component\nis excluded from the output.", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ 'rgb(234, 90, 185)' | color_to_hex }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a CSS color string to hexadecimal format (`hex6`).", "syntax": "string | color_to_hex", "name": "color_to_hex" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "If a color with an alpha component is provided, the color is converted to `HSLA` format.", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_to_hsl }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a CSS color string to `HSL` format.", "syntax": "string | color_to_hsl", "name": "color_to_hsl" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_to_oklch }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a CSS color string to `OKLCH` format.", "syntax": "string | color_to_oklch", "name": "color_to_oklch" }, { "category": "color", "deprecated": false, "deprecation_reason": "", "description": "If a color with an alpha component is provided, then the color is converted to `RGBA` format.", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | color_to_rgb }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a CSS color string to `RGB` format.", "syntax": "string | color_to_rgb", "name": "color_to_rgb" }, { "category": "color", "deprecated": true, "deprecation_reason": "The `hex_to_rgba` filter has been replaced by [`color_to_rgb`](/docs/api/liquid/filters/color_to_rgb) and\n[`color_modify`](/docs/api/liquid/filters/color_modify).", "description": "", "parameters": [ { "description": "The desired alpha value.", "name": "alpha", "positional": true, "required": false, "types": [ "number" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '#EA5AB9' | hex_to_rgba }}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "alpha", "description": "The default `alpha` value is 1.0. However, you can specify a decimal value between 0.0 and 1.0.", "syntax": "string | hex_to_rgba: number", "path": "/", "raw_liquid": "{{ '#EA5AB9' | hex_to_rgba: 0.5 }}", "parameter": true, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a CSS color string from hexadecimal format to `RGBA` format. Shorthand hexadecimal formatting (`hex3`) is also accepted.", "syntax": "string | hex_to_rgba", "name": "hex_to_rgba" }, { "category": "string", "deprecated": false, "deprecation_reason": "", "description": "The secret key for the message is supplied as a parameter to the filter.", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{%- assign secret_potion = 'Polyjuice' | hmac_sha1: 'Polina' -%}\n\nMy secret potion: {{ secret_potion }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a string into an SHA-1 hash using a hash message authentication code (HMAC).", "syntax": "string | hmac_sha1: string", "name": "hmac_sha1" }, { "category": "string", "deprecated": false, "deprecation_reason": "", "description": "The secret key for the message is supplied as a parameter to the filter.", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{%- assign secret_potion = 'Polyjuice' | hmac_sha256: 'Polina' -%}\n\nMy secret potion: {{ secret_potion }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a string into an SHA-256 hash using a hash message authentication code (HMAC).", "syntax": "string | hmac_sha256: string", "name": "hmac_sha256" }, { "category": "string", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ '' | md5 }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a string into an MD5 hash.", "syntax": "string | md5", "name": "md5" }, { "category": "string", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{%- assign secret_potion = 'Polyjuice' | sha1 -%}\n\nMy secret potion: {{ secret_potion }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a string into an SHA-1 hash.", "syntax": "string | sha1: string", "name": "sha1" }, { "category": "string", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{%- assign secret_potion = 'Polyjuice' | sha256 -%}\n\nMy secret potion: {{ secret_potion }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a string into an SHA-256 hash.", "syntax": "string | sha256: string", "name": "sha256" }, { "category": "localization", "deprecated": true, "deprecation_reason": "Deprecated without a direct replacement because the [currency form](/docs/api/liquid/tags/form#form-currency) has also been\ndeprecated. The currency form was replaced by the [localization form](/docs/api/liquid/tags/form#form-localization). Refer to\nthis guide which explains [how to create a country selector](/docs/themes/markets/multiple-currencies-languages#implementing-country-and-language-selectors)\nusing the localization form.", "description": "The `currency_selector` filter must be applied to the [`form` object](/docs/api/liquid/objects/form) within a\n[currency form](/docs/api/liquid/tags/form#form-currency).", "parameters": [ { "description": "The desired `class` attribute.", "name": "class", "positional": false, "required": false, "types": [ "string" ] }, { "description": "The desired `id` attribute.", "name": "id", "positional": false, "required": false, "types": [ "string" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{% form 'currency' %}\n {{ form | currency_selector }}\n{% endform %}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "class", "description": "Specify the `class` attribute of the `<select>` element.", "syntax": "form | currency_selector: class: string", "path": "/", "raw_liquid": "{% form 'currency' %}\n {{ form | currency_selector: class: 'custom-class' }}\n{% endform %}", "parameter": true, "display_type": "text", "show_data_tab": true }, { "name": "id", "description": "Specify the `id` attribute of the `<select>` element.", "syntax": "form | currency_selector: id: string", "path": "/", "raw_liquid": "{% form 'currency' %}\n {{ form | currency_selector: id: 'custom-id' }}\n{% endform %}", "parameter": true, "display_type": "text", "show_data_tab": true } ], "summary": "Generates an HTML `<select>` element with an option for each currency available on the store.", "syntax": "form | currency_selector", "name": "currency_selector" }, { "category": "customer", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ 'Log in' | customer_login_link }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Generates an HTML link to the customer login page.", "syntax": "string | customer_login_link", "name": "customer_login_link" }, { "category": "customer", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ 'Log out' | customer_logout_link }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Generates an HTML link to log the customer out of their account and redirect to the homepage.", "syntax": "string | customer_logout_link", "name": "customer_logout_link" }, { "category": "customer", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ 'Create an account' | customer_register_link }}", "parameter": false, "display_type": "text", "show_data_tab": true } ], "summary": "Generates an HTML link to the customer registration page.", "syntax": "string | customer_register_link", "name": "customer_register_link" }, { "category": "format", "deprecated": false, "deprecation_reason": "", "description": "The `date` filter accepts the same parameters as Ruby's strftime method for formatting the date. For a list of shorthand\nformats, refer to the [Ruby documentation](https://ruby-doc.org/core-3.1.1/Time.html#method-i-strftime) or\n[strftime reference and sandbox](http://www.strfti.me/).", "parameters": [ { "description": "The desired date format.", "name": "format", "positional": false, "required": false, "types": [ "string" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/blogs/potion-notions/how-to-tell-if-you-have-run-out-of-invisibility-potion", "raw_liquid": "{{ article.created_at | date: '%B %d, %Y' }}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "The current date", "description": "You can apply the `date` filter to the keywords `'now'` and `'today'` to output the current timestamp.\n\n> Note:\n> The timestamp will reflect the time that the Liquid was last rendered. Because of this, the timestamp might not be updated for every page view, depending on the context and caching.\n", "syntax": "", "path": "/", "raw_liquid": "{{ 'now' | date: '%B %d, %Y' }}", "parameter": false, "display_type": "text", "show_data_tab": true }, { "name": "format", "description": "Specify a locale-aware date format. You can use the following formats:\n\n- `abbreviated_date`\n- `basic`\n- `date`\n- `date_at_time`\n- `default`\n- `on_date`\n- `short` (deprecated)\n- `long` (deprecated)\n\n> Note:\n> You can also [define custom formats](/docs/api/liquid/filters/date-setting-format-options-in-locale-files) in your theme's locale files.\n", "syntax": "string | date: format: string", "path": "/blogs/potion-notions/how-to-tell-if-you-have-run-out-of-invisibility-potion", "raw_liquid": "{{ article.created_at | date: format: 'abbreviated_date' }}", "parameter": true, "display_type": "text", "show_data_tab": true }, { "name": "Setting format options in locale files", "description": "You can define custom date formats in your [theme's storefront locale files](/themes/architecture/locales/storefront-locale-files). These custom formats should be included in a `date_formats` category:\n\n```json\n\"date_formats\": {\n \"month_day_year\": \"%B %d, %Y\"\n}\n```\n", "syntax": "", "path": "/blogs/potion-notions/how-to-tell-if-you-have-run-out-of-invisibility-potion", "raw_liquid": "{{ article.created_at | date: format: 'month_day_year' }}", "parameter": true, "display_type": "text", "show_data_tab": true } ], "summary": "Converts a timestamp into another date format.", "syntax": "string | date: string", "name": "date" }, { "category": "font", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [ { "description": "[string] Customize the [`font_display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) of the `@font-face` declaration.", "name": "font_display", "positional": false, "required": false, "types": [] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ settings.type_header_font | font_face }}", "parameter": false, "display_type": "text", "show_data_tab": false }, { "name": "font_display", "description": "You can include an optional parameter to specify the [`font_display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) of the `@font_face` declaration.\n", "syntax": "font | font_face: font_display: string", "path": "/", "raw_liquid": "{{ settings.type_header_font | font_face: font_display: 'swap' }}", "parameter": true, "display_type": "text", "show_data_tab": false } ], "summary": "Generates a CSS [`@font_face` declaration](https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face) to load the provided font.", "syntax": "font | font_face", "name": "font_face" }, { "category": "font", "deprecated": false, "deprecation_reason": "", "description": "The `font_modify` filter requires two parameters. The first indicates which property should be modified and the second is\neither the new value, or modification amount, for that property.\n\n> Tip:\n> You can access every variant of the chosen font's family by using [`font.variants`](/docs/api/liquid/objects/font#font-variants).\n> However, you can more easily access specific styles and weights by using the `font_modify` filter.\n\nThe following table outlines the valid font properties and modification values:\n\n<table>\n <thead>\n <th>Property</th>\n <th>Modification value</th>\n <th>Output</th>\n </thead>\n <tbody>\n <tr>\n <td rowspan=3><code>style</code></td>\n <td><code>normal</code></td>\n <td>Returns the normal variant of the same weight, if it exists.</td>\n </tr>\n <tr>\n <td><code>italic</code></td>\n <td>Returns the italic variant of the same weight, if it exists.</td>\n </tr>\n <tr>\n <td><code>oblique</code></td>\n <td>\n <p>Returns the oblique variant of the same weight, if it exists.</p>\n <p>Oblique variants are similar to italic variants in appearance. All Shopify fonts have only oblique or italic variants, not both.</p>\n </td>\n </tr>\n <tr>\n <td rowspan=7><code>weight</code></td>\n <td><code>100</code> → <code>900</code></td>\n <td>Returns a variant of the same style with the given weight, if it exists.</td>\n </tr>\n <tr>\n <td><code>normal</code></td>\n <td>Returns a variant of the same style with a weight of <code>400</code>, if it exists.</td>\n </tr>\n <tr>\n <td><code>bold</code></td>\n <td>Returns a variant of the same style with a weight of <code>700</code>, if it exists.</td>\n </tr>\n <tr>\n <td><code>+100</code> → <code>+900</code></td>\n <td>\n <p>Returns a variant of the same style with a weight incremented by the given value, if it exists.</p>\n <p>For example, if a font has a weight of <code>400</code>, then using <code>+100</code> would return the font with a weight of <code>500</code>.</p>\n </td>\n </tr>\n <tr>\n <td><code>-100</code> → <code>-900</code></td>\n <td>\n <p>Returns a variant of the same style with a weight decremented by the given value, if it exists.</p>\n <p>For example, if a font has a weight of <code>400</code>, then using <code>-100</code> would return the font with a weight of <code>300</code>.</p>\n </td>\n </tr>\n <tr>\n <td><code>lighter</code></td>\n <td>Returns a lighter variant of the same style by applying the rules used by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Meaning_of_relative_weights\">CSS <code>font-weight</code> property</a> and browser <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights\">fallback weights</a>, if it exists.</td>\n </tr>\n <tr>\n <td><code>bolder</code></td>\n <td>Returns a bolder variant of the same style by applying the rules used by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Meaning_of_relative_weights\">CSS <code>font-weight</code> property</a> and browser <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights\">fallback weights</a>, if it exists.</td>\n </tr>\n </tbody>\n</table>", "parameters": [ { "description": "Font property to modify", "name": "property", "positional": true, "required": true, "types": [ "string" ] }, { "description": "The new value for the associated property.", "name": "value", "positional": true, "required": true, "types": [ "string" ] } ], "return_type": [ { "type": "font", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{%- assign bold_font = settings.type_body_font | font_modify: 'weight', 'bold' -%}\n\nh2 {\n font-weight: {{ bold_font.weight }};\n}", "parameter": false, "display_type": "text", "show_data_tab": false }, { "name": "Non-existent font variants", "description": "If the `font_modify` filter tries to create a font variant that doesn't exist, then it returns `nil`. To handle this, you can either assign a fallback value with the [`default` filter](/docs/api/liquid/filters/default), or check for `nil` before using the variant.\n", "syntax": "", "path": "/", "raw_liquid": "{%- assign bold_font = settings.type_body_font | font_modify: 'weight', 'bold' -%}\n{%- assign italic_font = settings.type_body_font | font_modify: 'style', 'italic' -%}\n{%- assign heavy_font = settings.type_body_font | font_modify: 'weight', '900' | default: bold_font -%}\n{%- assign oblique_font = settings.type_body_font | font_modify: 'style', 'oblique' | default: italic_font -%}\n\nh2 {\n font-style: {{ heavy_font.weight }};\n}\n\n.italic {\n {% if oblique_font -%}\n font-style: {{ oblique_font.style }};\n {%- else -%}\n font-style: {{ italic_font.style }};\n {%- endif %}\n}", "parameter": false, "display_type": "text", "show_data_tab": false } ], "summary": "Modifies a specific property of a given font.", "syntax": "font | font_modify: string, string", "name": "font_modify" }, { "category": "font", "deprecated": false, "deprecation_reason": "", "description": "", "parameters": [ { "description": "Choose to return the URL for the font in `woff` format, instead of `woff2`.", "name": "font_type", "positional": true, "required": false, "types": [ "string" ] } ], "return_type": [ { "type": "string", "name": "", "description": "", "array_value": "" } ], "examples": [ { "name": "", "description": "", "syntax": "", "path": "/", "raw_liquid": "{{ settings.type_header_font | font_url }}", "parameter": false, "display_type": "text", "show_data_tab": false }, { "name": "woff format", "description": "By default, the `font_url` filter returns the [CDN URL](/themes/best-practices/performance/platform#shopify-cdn) for the font in `woff2` format. However, you can also choose `woff` format.\n", "syntax": "font | fon