Skip to main content

Create a section

  1. Create Section Schema. schema/core-faqs.js
  2. Duplicate content from schema/core-rich-text.js into schema/core-faqs.js
  3. Remove unnecessary blocks. This will require some mental planning. Use your best judgement. In my head, I would remove just the countdownBlock. This is because a FAQ really should not need a countdown. I can see it needing the following: Heading. Obviously. Text. Nice to have. Spacer - to make it look clean. Buttons, to link elsewhere. Inline image. To add a logo.
  4. Create schema/blocks/faq.js
  5. Copy content from schema/blocks/dropdown.js to schema/blocks/faq.js
  6. Remove heading_size_mobile settings from the block. Since it's a group of FAQs, they will all need to be the same size, so let's add these settings to the parent section.
  7. Import new FAQ block in schema/core-faqs.js with: const faqBlock = require('./blocks/faq')
  8. Add ...faqBlock to blocks key.
  9. Add const headingSizes = require('./globals/heading-size') to schema/core-faqs.js. Then unpack headingSizes under the settings. Do this at the bottom.
  10. Adjust Name, to be CORE: FAQs, also remember to adjust Preset Name.
  11. Create core-faqs.liquid under sections. Please note schema/[file-name].js must match sections/[file-name].liquid.
  12. Add {%- comment -%} schematic writeCode {%- endcomment -%} to core-rich-text.liquid. Please note: this file will be overwritten every time schema/core-faqs.js is saved. So do not make any changes within it.
  13. Inspect core-faqs.liquid. It should have changed.
  14. Create snippets/core-faqs.liquid.
  15. Review snippets/core-rich-text.liquid. Copy the contents to snippets/core-faqs.liquid. This should serve as your starting point.
  16. Clear out schema comment. Just leave CORE: FAQs for the moment.
  17. Create snippets/core-block-faq.liquid
  18. Render snippets/core-block-faq.liquid following format of block.type case.
  19. Review snippets/core-block-dropdown.liquid for dropdown setup. You can also review: snippets/z-debug-details.liquid - It would be good to have an option to choose between a "+" and a "Chevron" style.
  20. Review: https://github.com/Ten-Squared/vitaco-musashi/blob/main/sections/section-faqs.liquid for itemscope itemtype markup. Will need to be added to section + FAQ block.
  21. Complete section as per designs. Do not get caught up with fonts or exact spacing / widths. Use the existing block settings to get it close to the designs.