What Approach is correct for creating Quiz Questions: Block, Section, Meta Objects, Something Else?

Store Design
,

Topic summary

A web developer new to Shopify is seeking guidance on the best approach for building an interactive quiz page for an English teaching site. The quiz needs multiple-choice questions with instant feedback (“correct!” or “try again”), and the site owner wants to easily create and manage questions.

Initial Attempt:

  • Created custom sections using section.settings for questions and answers
  • Implemented basic JavaScript/CSS for user feedback
  • Concerns: requires one section per question, displays full-width, lacks responsive layout flexibility

Key Requirements:

  • Questions should display in two columns on desktop, single column on mobile
  • Owner needs ability to add/manage quiz questions independently

Suggested Alternatives:

  • Custom Blocks: More flexible, reusable across pages, easier responsive design
  • Metafields: Store quiz data as custom fields, requires custom interface for management
  • Custom App: Full control over quiz creation, user interactions, scoring, and reporting—best for complex requirements

Recommendation:
Choice depends on complexity: custom sections/blocks work for simple quizzes with minimal customization; metafields or custom apps better suit needs requiring greater flexibility and advanced features like progress tracking.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hi Shopify devs! I wanted to ask if I am taking the wrong approach is there a better way to accomplish what I’m doing? I’m an experienced web developer but total newb at Shopify. I’m working on a Shopify site that teaches English. I was just tasked with creating a page with a free quiz made up of multiple choice questions. The owner of the site wants to be able to create questions and add them to a Quiz page. It seems that there are a few different approaches to this such as creating custom blocks, custom sections, or meta objects. My first try I created a custom section using “section.settings” to insert the questions and answer choices as values into liquid code. I use basic JavaScript and CSS so that the user gets feedback if their answer to the question is correct it says “correct!” or says “try again” if they select the wrong answer. It appears to be working as a custom section but, then I would have to create a section for every question and they display full screen width. It would be nice if each question had separate columns on Desktop and single on Mobile. I could add CSS media queries to make my sections do this maybe but that feels wrong to me. Should I be creating these individual quiz questions as Blocks instead of Sections, or should they be Meta Objects, or something like question blocks that go inside quiz sections that are loaded in templates that are assigned to a quiz page. Or as an app? I’m not clear on what would be “normal” or a best practice for Shopify. Opinions welcome. What would your approach be? Thanks in advance.

I would share the custom section code if I wasn’t under an NDA, but you can probably guess how its written as its pretty basic with settings containing types such as richtext, text, and image_picker. Here is a link to a picture of what the desired layout would be assuming there were two questions one in each column: https://i.stack.imgur.com/SqRey.png

2

Hello @jonathangrover ,

When it comes to creating a page with a free quiz made up of multiple-choice questions, there are indeed multiple approaches you can take. The choice of approach depends on the specific requirements of the project, the level of flexibility needed for managing the quiz content, and the complexity of the quiz itself. Here are a few options to consider:

  • Custom Sections: Using custom sections, as you’ve tried, can work well for creating individual question sections. It provides a straightforward way to manage the content within the Shopify theme editor. However, as you mentioned, it can result in multiple sections for each question, and handling responsive layouts might require additional CSS and media queries.
  • Custom Blocks: Custom blocks allow you to create reusable content elements that can be added to various pages. This approach provides more flexibility and allows you to create a separate block for each question. You can design the blocks with responsive layouts, custom styling, and JavaScript functionality. The advantage is that you can add the blocks to any page, not just a dedicated quiz page.
  • Metafields: Shopify’s metafields feature allows you to add custom data fields to your products, collections, and pages. You can utilize metafields to store and manage the quiz questions and answer choices. This approach requires creating a custom interface for managing the quiz content, either through a Shopify app or custom coding. You would need to handle the logic for displaying the questions, capturing user responses, and providing feedback.
  • Custom App: If the quiz functionality is complex or requires extensive customization, building a custom Shopify app dedicated to managing quizzes could be a viable option. This approach gives you complete control over the quiz creation process, user interactions, and reporting. You can build a user-friendly interface for adding, editing, and managing quiz questions, along with features like scoring, tracking progress, and generating reports.

The best approach depends on the specific needs and complexity of your project. If the quiz is simple and requires minimal customization, using custom sections or blocks could be sufficient. If you need more flexibility, consider utilizing metafields or developing a custom app. It’s important to evaluate the trade-offs between development effort, maintenance, and the level of control and flexibility required.

Hope this can help.

Ali Reviews team

1 Like
3

Thanks Ali! This was just the explanation I was looking for. All of the options can be overwhelming but its good to hear the pros/cons and differences between these approaches.

1 Like