Skip to content

Instantly share code, notes, and snippets.

@ulziibat-n
Last active July 17, 2023 10:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ulziibat-n/c44be2093261d6d1f50900e12e67a891 to your computer and use it in GitHub Desktop.
Save ulziibat-n/c44be2093261d6d1f50900e12e67a891 to your computer and use it in GitHub Desktop.
Snippets - Shopify input settings
{
"checkbox - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_checkbox"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"checkbox\",",
" \"id\": \"show_announcement\",",
" \"label\": \"Show announcement\",",
" \"default\": true",
"}",
],
"description": "A setting of type checkbox outputs a checkbox field. These fields can be used for toggling features on and off, such as whether to show an announcement bar."
},
"number - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_number"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"number\",",
" \"id\": \"products_per_page\",",
" \"label\": \"Products per page\",",
" \"default\": 20",
"}",
],
"description": "A setting of type number outputs a single number field. In addition to the standard attributes of an input setting, number type settings have the following attribute: placeholder."
},
"radio - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_radio"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"radio\",",
" \"id\": \"logo_aligment\",",
" \"label\": \"Logo alignment\",",
" \"options\": [",
" {",
" \"value\": \"left\",",
" \"label\": \"Left\"",
" },",
" {",
" \"value\": \"centered\",",
" \"label\": \"Centered\"",
" }",
" ],",
" \"default\": \"left\"",
"}",
],
"description": "A setting of type radio outputs a radio option field. In addition to the standard attributes of an input setting, radio type settings have a required options attribute that accepts an array of value and label definitions."
},
"range - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_range"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"range\",",
" \"id\": \"font_size\",",
" \"min\": 12,",
" \"max\": 24,",
" \"step\": 1,",
" \"unit\": \"px\",",
" \"label\": \"Font size\",",
" \"default\": 16",
"}",
],
"description": "A setting of type range outputs a range slider field. In addition to the standard attributes of an input setting, range type settings have the following attributes: min, max, step, and unit. You can use these fields to capture a varying numerical value, such as font size."
},
"select - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_select"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"select\",",
" \"id\": \"vertical_alignment\",",
" \"label\": \"Vertical alignment\",",
" \"options\": [",
" {",
" \"value\": \"top\",",
" \"label\": \"Top\"",
" },",
" {",
" \"value\": \"middle\",",
" \"label\": \"Middle\"",
" },",
" {",
" \"value\": \"bottom\",",
" \"label\": \"Bottom\"",
" }",
" ],",
" \"default\": \"middle\"",
"}",
],
"description": "A setting of type select outputs a drop-down selector field. In addition to the standard attributes of an input setting, select type settings have the following attributes: options, group. You can use these fields to capture a multi-option selection, such as the vertical alignment of slideshow text."
},
"text - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_text"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"text\",",
" \"id\": \"footer_linklist_title\",",
" \"label\": \"Heading\",",
" \"default\": \"Quick links\"",
"}",
],
"description": "A setting of type text outputs a single-line text field. In addition to the standard attributes of an input setting, text type settings have the following attribute: placeholder. You can use these fields to capture short strings, such as titles."
},
"textarea - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_textarea"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"textarea\",",
" \"id\": \"home_welcome_message\",",
" \"label\": \"Welcome message\",",
" \"default\": \"Welcome to my shop!\"",
"}",
],
"description": "A setting of type textarea outputs a multi-line text field. In addition to the standard attributes of an input setting, textarea type settings have the following attribute: placeholder. You can use these fields to capture larger blocks of text, such as messages."
},
"article - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_article"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"article\",",
" \"id\": \"article\",",
" \"label\": \"Article\"",
"}",
],
"description": "A setting of type article outputs an article picker field that's automatically populated with the available articles for the store. You can use these fields to capture an article selection, such as the article to feature on the homepage."
},
"blog - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_blog - Shopify / Input settings"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"blog\",",
" \"id\": \"blog\",",
" \"label\": \"Blog\"",
"}",
],
"description": "A setting of type blog outputs a blog picker field that's automatically populated with the available blogs for the store. You can use these fields to capture a blog selection, such as the blog to feature in the sidebar."
},
"collection - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_collection"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"collection\",",
" \"id\": \"collection\",",
" \"label\": \"Collection\"",
"}",
],
"description": "A setting of type collection outputs a collection picker field that's automatically populated with the available collections for the store. You can use these fields to capture a collection selection, such as a collection for featuring products on the homepage."
},
"collection_list - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_collection_list"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"collection_list\",",
" \"id\": \"collection_list\",",
" \"label\": \"Collections\",",
" \"limit\": 8",
"}",
],
"description": "A setting of type collection_list outputs a collection picker field that's automatically populated with the available collections for the store. You can use these fields to capture multiple collections, such as a group of collections to feature on the homepage."
},
"color - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_color"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"color\",",
" \"id\": \"body_text\",",
" \"label\": \"Body text\",",
" \"default\": \"#000000\"",
"}",
],
"description": "A setting of type color outputs a color picker field. You can use these fields to capture a color selection for various theme elements, such as the body text color."
},
"color_background - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_color_background"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"color_background\",",
" \"id\": \"background\",",
" \"label\": \"Background\",",
" \"default\": \"linear-gradient(#ffffff, #000000)\"",
"}",
],
"description": "A setting of type color_background outputs a text field for entering CSS background properties. You can use these fields to capture background settings for various theme elements, such as the store background."
},
"color_scheme - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_color_scheme"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"color_scheme\",",
" \"id\": \"color_scheme\",",
" \"default\": \"scheme_1\",",
" \"label\": \"Color Scheme\"",
"}"
],
"description": "A setting of type color_scheme outputs a picker with all of the available theme color schemes, and a preview of the selected color scheme. Theme color schemes in the picker are defined using the color_schemes setting. You can apply a color scheme to sections, blocks and general theme settings. Color scheme settings aren't supported in app blocks."
},
"font_picker - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_font_picker"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"font_picker\",",
" \"id\": \"heading_font\",",
" \"label\": \"Heading font\",",
" \"default\": \"helvetica_n4\"",
"}",
],
"description": "A setting of type font_picker outputs a font picker field that's automatically populated with fonts from the Shopify font library. This library includes web-safe fonts, a selection of Google Fonts, and fonts licensed by Monotype."
},
"html - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_html"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"html\",",
" \"id\": \"video_embed\",",
" \"label\": \"Video embed\"",
"}",
],
"description": "A setting of type html outputs a multi-line text field that accepts HTML markup. In addition to the standard attributes of an input setting, html type settings have the following attribute: placeholder. You can use these fields to capture custom blocks of HTML content, such as a video embed."
},
"image_picker - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_image_picker"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"image_picker\",",
" \"id\": \"image_with_text_image\",",
" \"label\": \"Image\"",
"}",
],
"description": "A setting of type image_picker outputs an image picker field that's automatically populated with the available images from the Files section of Shopify admin, and has the option to upload new images. Merchants also have an opportunity to enter alt text and select a focal point for their image. You can use these fields to capture an image selection, such as logos, favicons, and slideshow images."
},
"inline_richtext - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_inline_richtext"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"inline_richtext\",",
" \"id\": \"inline\",",
" \"default\": \"my <i>inline</i> <b>text</b>\",",
" \"label\": \"Inline rich text\"",
"}",
],
"description": "A setting of type inline_richtext outputs HTML markup that isn't wrapped in paragraph tags (<p>). The setting includes the following basic formatting options: Bold, Italic, Link."
},
"link_list - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_link_list"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"link_list\",",
" \"id\": \"menu\",",
" \"label\": \"Menu\"",
"}",
],
"description": "A setting of type link_list outputs a menu picker field that's automatically populated with the available menus for the store. You can use these fields to capture a menu selection, such as the menu to use for footer links."
},
"liquid - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_liquid"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"liquid\",",
" \"id\": \"battery_message\",",
" \"label\": \"Battery message\",",
" \"default\": \"{% if product.tags contains 'battery' %}This product can only be shipped by ground.{% else %}This product can be shipped by ground or air.{% endif %}\"",
"}",
],
"description": "A setting of type liquid outputs a multi-line text field that accepts HTML and limited Liquid markup. You can use these fields to capture custom blocks of HTML and Liquid content, such as a product-specific message. Merchants can also use a liquid setting to add the code needed to integrate certain types of apps into your theme."
},
"page - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_page"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"page\",",
" \"id\": \"page\",",
" \"label\": \"Page\"",
"}"
],
"description": "A setting of type page outputs a page picker field that's automatically populated with the available pages for the store. You can use these fields to capture a page selection, such as the page to feature content for in a size-chart display."
},
"product - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_product"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"product\",",
" \"id\": \"product\",",
" \"label\": \"Product\"",
"}",
],
"description": "A setting of type product outputs a product picker field that's automatically populated with the available products for the store. You can use these fields to capture a product selection, such as the product to feature on the homepage."
},
"product_list - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_product_list"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"product_list\",",
" \"id\": \"product_list\",",
" \"label\": \"Products\",",
" \"limit\": 12",
"}"
],
"description": "A setting of type product_list outputs a product picker field that's automatically populated with the available products for the store. You can use these fields to capture multiple products, such as a group of products to feature on the homepage."
},
"richtext - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_richtext"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"richtext\",",
" \"id\": \"paragraph\",",
" \"label\": \"Paragraph\"",
"}",
],
"description": "A setting of type richtext outputs a multi-line text field with the following basic formatting options: Bold, Italic, Underline, Link, Paragraph, Unordered list."
},
"url - Shopify / Input settings - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_url - Shopify / Input settings"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"url\",",
" \"id\": \"button_link\",",
" \"label\": \"Button link\"",
"}",
],
"description": "url - A setting of type url outputs a URL entry field where you can manually enter external URLs and relative paths."
},
"video - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_video"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"video\",",
" \"id\": \"video\",",
" \"label\": \"A Shopify-hosted video\"",
"}",
],
"description": "A setting of type video outputs a video picker that's automatically populated with the available videos from the Files section of the Shopify admin. The merchant also has the option to upload new videos."
},
"video_url - Input settings for Shopify": {
"prefix": [
"liquid",
"shopify",
"liquid_video_url"
],
"scope": "liquid",
"body": [
"{",
" \"type\": \"video_url\",",
" \"id\": \"product_description_video\",",
" \"label\": \"Product description video\",",
" \"accept\": [",
" \"youtube\",",
" \"vimeo\"",
" ]",
"}",
],
"description": "A setting of type video_url outputs a URL entry field. In addition to the standard attributes of an input setting, video_url type settings have the following attributes: accept, placeholder. These fields can be used to capture a video URL from YouTube and/or Vimeo, such as the URL for a static video to show in the product description."
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment