what is data-section-type?

New Member
7 0 0

I'm new to coding in shopify and it seems to me that sections are the best building blocks because they are independently maintainable, and they have a nice way to allow shop-owners to customize stuff.


As I look at the free sections made by shopify, almost all of them have code like this...


<div class="foobar" data-section-id="{{ section.id }}" data-section-type="foobar-section">
What is the purpose of data-section-type?  Should I use it with my custom made sections? Where is it documented? What are the valid values?


835 95 178
Any kind of data attribute is a custom attribute. It's just a different place to store information in an element and you can use the information in javascript or use it to target an element in css. For example, I usually use a data-url attribute to store the product url of an item so say I wanted to make a quick shop modal or something, I can grab the product information with the Shopify Ajax API, which you need a products url to access. Or for another example, people who lazy load their images make a data-src attribute to store their source and use javascript to take the source out of the data-src and put it into the source when the element comes into the view port, this way the images dont load until the users can see them, decreasing load time.
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D