Liquid

100 characters/line

To avoid the need to side scroll while reading code each line should be limited to 100 characters. A line can be added to your editor to mark the point. Opening div tags can be written on multiple lines when needed like so:

<div
  class="product--root"
  data-full-width="true"
  data-alternative-text-color="false"
  data-spacing="true"
>
  ...
</div>

Class attribute should be first

This helps quickly navigate the code.

Refer to framework/scaffolding/scaffolding.liquid:

• You can see the translations, variables and onboarding are extracted above the first html tag. This helps to prevent excessive code and enhances readability.

Settings

Settings for a section are defined at the bottom of the file with a schema tag, see: https://help.shopify.com/en/themes/development/sections#settings

Setting values can then extracted and assigned to a variable like so:

{% assign show_featured = section.settings.show-featured %}

Shopify is strict regarding setting naming conventions, in particular 'show' vs. 'enable':

• Use 'show' when describing fairly simple, static content eg. show_title

• Use 'enable' when describing more complex, dynamic content eg. enable_disqus