Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

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.

• We've written about getting started with Shopify Sections

  Shopify Sections: The what, where, when, and how.

• And we've written about getting fancy with blocks

  Shopify Sections with Dynamic Blocks

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

🔥Note: the setting image_picker was once known as just image.

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