DYODE. Dev Challenges

Liquid Challenge

These questions should be answered with real world solutions in liquid

*Please provide these answers in written form

1. Describe how you would add an editable text setting to a section using schema, and render it in Liquid. Include both the schema and Liquid example.
2. How would you implement a collection banner using the collection’s featured image in a section that can be reused across templates?
3. In a Shopify section, add a setting that allows a merchant to toggle the visibility of a component (e.g., show/hide a banner). Show both the schema and the Liquid needed to implement this.
4. In a Shopify section, how would you access and render the current product’s title, price, and featured image? Briefly explain the context required for this to work.
5. Using section schema, define a repeatable block (e.g., items with a title and text). Show how you would loop through and render those blocks in Liquid.

Frontend Challenge

Thanks for taking the time to complete this challenge — we appreciate it.

This exercise is designed to reflect the kind of work you’d be doing with our team: working within an existing codebase, extending components, and making thoughtful improvements.

---

Design

Figma File

---

Getting Started

Clone the repository and run:

yarn install
yarn start

---

The Task

You’ll be working within a small React codebase that includes some starter components and data.

Your objectives:

1. Complete the Product Carousel

The ProductCarousel component is partially implemented.

• Render the provided product data
• Structure the component in a clean, reusable way

---

2. Add a Layout Variation

Extend the ProductCarousel component to support a variation via props.

• Example: compact vs default layout
• Implementation details are up to you

---

3. Styling (Mobile-First)

Apply styling to the Product Carousel to roughly match the provided design.

• Focus on structure and responsiveness
• Pixel perfection is not required

---

4. Refactor the Product Card

The ProductCard component is intentionally basic.

• Improve structure and readability
• Make any changes you feel improve the component

---

Submission

Please provide:

• A link to your GitHub repository
• (Optional) A hosted preview (Netlify, Vercel, etc.)
• A short README or notes covering:
  • Your approach
  • Any tradeoffs you made
  • What you would improve with more time

---

Expectations

• This exercise should take approximately 1–2 hours
• We value clarity, structure, and thought process over completeness
• It’s okay to make assumptions — just document them

---

What We’re Looking For

• Ability to work within an existing codebase
• Clean, readable component structure
• Thoughtful use of props and reusability
• Basic understanding of responsive design
• Clear communication of decisions

---

If anything is unclear, feel free to reach out with questions.

Thanks again — we look forward to reviewing your submission.