what is data-section-type?

11 0 2

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?
Shopify Partner
1280 169 402

This is an accepted solution.

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 my solution helped you, please like and accept as solution!
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