/

August 5, 2024

Specialized Input Settings ( Schema ) In Shopify

article

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.

{
“type”: “article”,
“id”: “article”,
“label”: “Article”
}

 

blog

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.

{

  “type”: “blog”,

  “id”: “blog”,

  “label”: “Blog”

}

 

collection

A setting of type collection outputs a collection picker field that’s automatically populated with the available collections for the store

you can use this type to create collection of products on home page.

{

  “type”: “collection”,

  “id”: “collection”,

  “label”: “Collection”

}

 

collection_list

A setting of type collection_list outputs a collection picker field that’s automatically populated with the available collections for the store.

using this type you can create multiple collections( group of collection )

{

  “type”: “collection_list”,

  “id”: “collection_list”,

  “label”: “Collections”,

  “limit”: 10

}

 

you can create maxmum 50 number of collection using this collection_list, here we select 10 number of collection list limit.

color

Using these fields to capture a color selection for various theme elements, such as the body text color and many more

{

  “type”: “color”,

  “id”: “body_text”,

  “label”: “Body text”,

  “default”: “#000000”

}

 

color_background

Using these fields to capture background settings for various theme elements, such as the store background.

{

  “type”: “color_background”,

  “id”: “background”,

  “label”: “Background”,

  “default”: “linear-gradient(#ffffff, #000000)”

}

 

color_scheme

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_scheme_group setting.

You can apply a color scheme to sections, blocks and general theme settings. Color scheme settings aren’t supported in app blocks.

  {
“type”: “color_scheme”,
“id”: “color_scheme”,
“default”: “scheme_1”,
“label”: “Color Scheme”
}

 

color_scheme_group

A setting of type color_scheme_group outputs a color scheme which is composed of the following input setting types:

  • header
  • color
  • color_background

Color schemes can be added only in settings_schema.json.

  {
“type”: “color_scheme_group”,
“id”: “color_schemes”,
“definition”: [
{
“type”: “header”,
“content”: “Typography”
},
{
“type”: “color”,
“id”: “text”,
“label”: “Text”,
“default”: “#121212”
},
{
“type”: “header”,
“content”: “Background”
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“default”: “#FFFFFF”
},
{
“type”: “color_background”,
“id”: “background_gradient”,
“label”: “Gradient”,
“info”: “Background gradient replaces background where possible.”
},
{
“type”: “header”,
“content”: “Additional”
},
{
“type”: “color”,
“id”: “primary_button”,
“label”: “Primary”,
“default”: “#121212”
},
{
“type”: “color”,
“id”: “on_primary_button”,
“label”: “On Primary Button”,
“default”: “#FFFFFF”
},
{
“type”: “color”,
“id”: “primary_button_border”,
“label”: “Primary Button Border”,
“default”: “#121212”
},
{
“type”: “color”,
“id”: “secondary_button”,
“label”: “Secondary Button”
},
{
“type”: “color”,
“id”: “on_secondary_button”,
“label”: “On Secondary Button”,
“default”: “#121212”
},
{
“type”: “color”,
“id”: “secondary_button_border”,
“label”: “Secondary Button Border”,
“default”: “#FFFFFF”
},
{
“type”: “color”,
“id”: “icons”,
“label”: “Icons”,
“default”: “#FFFFFF”
},
{
“type”: “color”,
“id”: “links”,
“label”: “Links”,
“default”: “#121212”
}
],
“role”: {
“background”: {
“solid”: “background”,
“gradient”: “background_gradient”
},
“text”: “text”,
“primary_button”: “primary_button”,
“on_primary_button”: “on_primary_button”,
“primary_button_border”: “primary_button_border”,
“secondary_button”: “secondary_button”,
“on_secondary_button”: “on_secondary_button”,
“secondary_button_border”: “secondary_button_border”,
“icons”: “icons”,
“links”: “links”
}
}

 

 

inline_richtext

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

You can use these fields to capture formatted text content, such as introductory brand content on the homepage.

{
“type”: “inline_richtext”,
“id”: “inline”,
“default”: “my <i>inline</i> <b>text</b>”,
“label”: “Inline rich text”
}

 

font_picker

Using these fields to capture a font selection for various theme elements, such as the base heading font.

fontpicker automatically populated with the font from the shopify library which includes Google fonts and web-safe fonts and licenced moto type font

{

  “type”: “font_picker”,

  “id”: “heading_font”,

  “label”: “Heading font”,

  “default”: “helvetica_n4”

}

 

liquid

You can use these fields to capture custom blocks of HTML and Liquid content, such as a product-specific message

{

  “type”: “liquid”,

  “id”: “battery_message”,

  “label”: “Battery message”,

  “default”: “This product can be shipped by ground or air.”

}

 

link_list

You can use these fields to capture a menu selection, such as the menu to use for footer links.

{

  “type”: “link_list”,

  “id”: “menu”,

  “label”: “Menu”

}

 

image_picker 

It is widely used in shopify

You can use these fields to capture an image selection, such as logos, slideshow images, and  favicons.

{

  “type”: “image_picker”,

  “id”: “logo_image”,

  “label”: “Logo image”

}

 

html

You can use these fields to capture custom blocks of HTML content, such as a video embed.

{

  “type”: “html”,

  “id”: “video_embed”,

  “label”: “Video embed”

}

 

page 

You can use these fields to capture a page selection, such as the page to feature content for in a size-chart display.

{

  “type”: “page”,

  “id”: “page”,

  “label”: “Page”

}

 

product

You can use these fields to capture a product selection, such as the product to feature on the homepage.

{

  “type”: “product”,

  “id”: “product”,

  “label”: “Product”

}

 

product_list

You can use these fields to capture multiple products, such as a group of products to feature on the homepage.

{

  “type”: “product_list”,

  “id”: “product_list”,

  “label”: “Products”,

  “limit”: 5

}

 

you can create maximum 50 number of product using this product_list, here we select 5 number of product list limit.

richtext

You can use these fields to capture formatted text content, such as introductory brand content on the homepage.

here you can use this rech text with the following basic formatting optins such as bold, italic, underline, link, paragraph.

{

  “type”: “richtext”,

  “id”: “paragraph”,

  “label”: “Paragraph”

}

 

text_alignment

A setting of type text_alignment outputs a SegmentedControl field with icons.

{
“type”: “text_alignment”,
“id”: “alignment”,
“label”: “Text alignment”,
“default”: “center”
}

 

url

You can use these fields to capture a URL selection, such as the URL to use for a slideshow button link.

it is automatically populated with Articles, collections, pages, blogs, products.

{

  “type”: “url”,

  “id”: “button_link”,

  “label”: “Button link”

}

 

video

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.

{
“type”: “video”,
“id”: “video”,
“label”: “A Shopify-hosted video”
}

 

video_url

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.

{

  “type”: “video_url”,

  “id”: “product_description_video”,

  “label”: “Product description video”,

  “accept”: [

    “youtube”,

    “vimeo”

  ]

}

 

Create links

You can add links to the info settings attribute by enclosing the link text in brackets and then following it immediately with the URL in parentheses.

{
“type”: “checkbox”,
“id”: “enable_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/online-store/dynamic-checkout)”,
“default”: true
},

 

From the same category