Section Types

Sections in Shopify are probably one of the highest value aspects for the client experience. They really empower non-technical clients control over a lot of their shops.

In this post we wanted to create a quick reference to all the types, as well as hightlight a few new and interesting one.

⬇Skip to the reference here

video_url

You can now add video urls from either YouTube or Vimeo. This make it so much easier to let store owners swap out videos for things like seasonal promotions or new product announcements.

Like with all sections, the type, id, label attributes are mandatory. In this case the accept attribute is also required (and can only be youtube and/or vimeo).


{
   "id": "video_url",
   "type": "video_url",
   "label": "Video URL",
   "accept": ["youtube", "vimeo"],
   "default": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
   "info": "Text",
   "placeholder": "Text"
}
You can reference a video_url setting {{ section.settings.video_url }}. You can also reference the videos id {{ section.settings.video_url.id }} (returns dQw4w9WgXcQ ) and the videos type {{ section.settings.video_url.type }} (returns youtube)

richtext

Rich text allows the user to have a little more control over the content they're adding. They can bold or italicize text and add links, but also prevents them from going completey rogue.

The value returned to you in liquid is html which you can use css to style.

Supported HTML tags: p, br, strong, b, em, i, u, span, a

html

The HTML tag allows for the most customization from admin interface. You can write straight up code directly in there (it will strip out tags like HTML, HEAD, andBODY - but pretty much everything else is fair game).

This could be very useful if you have a client that's a little more technical. Or if you know you'll be having to update things, but you don't want to be going through the process of a full deploy just to change some small sections.

Section Types Reference

Each regular setting has 5 attributes : type, id, label, placeholder,default, info

Type Requirement Description
type mandatory defines the type of input the option takes
id mandatory must be unique. It is how the settings are references in the theme.
label mandatory describes to the user what the option is for.
placeholder optional A value for the input's placeholder text. This is for text-based setting types only..
default optional to define a default value for the option.
info optional to provide additional info about the option to the end user.

Regular Setting Types

The following table describes regular input types allowed. The value of each is set in the type attribute

Value Explanation
text Allows the user to input a single line text field
textarea Allows the user to input multi line text
image_picker Allows the user to upload images
radio Allows the user to select from radio buttons
select Allows the user to select from a drop-down
checkbox Allows the user to check a box return a true or false value
range Allows the user to choose a value withing a range with a range slider

Image Picker

It is noteworthy that images uploaded this way will be saved in an asset library and can be reused in other places (rather than the asset folder of the previous image type). It also now provides an image object and the img_url filter can be used to get the URL. Alt text can also now be explicity written.

In the example below I set the image url to a variable with assign in liquid and then use the variable in the src attribute of the img tag.


  {% assign section_image = section.settings.image| img_url: '800x' %}
  
{{section.settings.image.alt}}

{{section.settings.title}}

{{section.settings.text}}

Radio and Select types

Because radio and select types have multiple values to choose from, the settings definition will also require an options attribute. This will take an array of objects with a value and label each.


{
  "type": "radio",
  "id": "id",
  "label": "Text",
  "options": [
    { "value": "one", "label": "Radio One" },
    { "value": "two", "label": "Radio Two" }
  ],
  "default": "one",
  "info": "Text"
}

Range Slider

The range slider takes on all the values that would be required to build a range slider in HTML


{
  "type": "range",
  "id": "font_size",
  "min": 12,
  "max": 18,
  "step": 1,
  "unit": "px",
  "label": "Font size",
  "default": 16
}

Specialized Setting Types

Specialized settings are defined the same way as regular settings. The difference is that these settings offer specialized and pre-selected info for the user to choose from. For example the product type is a dropdown but only allows the user to select from products already defined in the store.

Value Explanation
color Allows the user to choose a color with a color picker widget
font Allows the user to select from a list of fonts available
collection Allows the user to choose a product collection available in the store
product Allows the user to select a product available in the store
blog Allows the user to select from a list of blogs set up in the store
link_list Allows the user to select from available menus
page Allows the user to select a certain page defined in the store
url Allows the user to add a url (external or internal)
video_url Allows the user to include video link from youtube or vimeo
richtext Allows the user to add text and with minimal styles and also links
html Allows the user to add custom HTML
article Allows the user to select a certain page defined in the store
⚠️snippets⚠️ Warning: snippet is no longer included in this list.

Informational Settings

Shopify also allows you to create purely informational settings to go into the sidebar (they refer to these as sidebar settings). The configuration is very similar to all the other settings, but they only have 3 attribute : type, content, info

Type Requirement Description
type mandatory defines the type of input the option takes. For sidebar settings this can only be either header or paragraph
content mandatory text content
info optional to provide additional info about the option to the end user.