Final Capstone: Build, Publish, and Walkthrough

## Must Include

### Liquid

- [ ] Clean, well-organized Liquid code
- [ ] Proper use of snippets for reusability
- [ ] Efficient loops and conditionals
- [ ] Error handling for edge cases

### Schema

- [ ] Comprehensive section settings
- [ ] Logical block types
- [ ] Helpful labels and info text
- [ ] Sensible defaults
- [ ] Presets for quick setup

### Styling

- [ ] CSS custom properties for theming
- [ ] Responsive at all breakpoints
- [ ] Consistent spacing and typography
- [ ] Smooth transitions/animations

### JavaScript

- [ ] Progressive enhancement
- [ ] Event delegation where appropriate
- [ ] No console errors
- [ ] Theme editor compatibility

### Accessibility

- [ ] Semantic HTML
- [ ] Keyboard navigation
- [ ] ARIA attributes where needed
- [ ] Sufficient color contrast

### Performance

- [ ] Lazy loading for images
- [ ] Efficient asset loading
- [ ] No render-blocking resources

## Documentation

### For Merchants

- [ ] Section/feature overview
- [ ] Setting descriptions
- [ ] Best practices and tips
- [ ] Example configurations

### For Developers

- [ ] Code architecture overview
- [ ] Customization guide
- [ ] Dependencies and requirements
- [ ] Known limitations

## Planning Checklist

1. Choose your project option
2. Sketch the UI/UX design
3. List all features and settings
4. Identify edge cases
5. Plan file structure
6. Set up Git repository

## Featured Collection Section

### Features

- Grid layout (2-6 columns)
- Slider layout with arrows
- Product card components
- Quick view trigger
- Collection link

### Settings

- Heading text
- Collection picker
- Products per row (desktop/mobile)
- Show/hide elements
- Color scheme selector
- Layout type toggle

### Blocks

- Product (auto from collection)
- Promotional card
- Spacer

### Edge Cases

- Empty collection
- Collection with 1 product
- Very long product titles
- Products without images
- Sold out products

## Development Process

1. Set up development environment
   - Clone Dawn or start fresh
   - Run shopify theme dev
2. Build HTML structure first
   - Semantic markup
   - Accessibility foundations
3. Add Liquid logic
   - Dynamic content
   - Settings integration
4. Style with CSS
   - Mobile-first approach
   - CSS custom properties
5. Add JavaScript
   - Progressive enhancement
   - Theme editor events
6. Write schema
   - All settings and blocks
   - Presets and defaults

{# sections/featured-collection.liquid #}

<section
  class="featured-collection color-scheme-{{ section.settings.color_scheme }}"
  id="section-{{ section.id }}"
>
  <div class="container">
    {%- if section.settings.heading != blank -%}
      <h2 class="featured-collection__heading">
        {{ section.settings.heading }}
      </h2>
    {%- endif -%}

    {%- assign collection = collections[section.settings.collection] -%}

    {%- if collection.products.size > 0 -%}
      <div
        class="featured-collection__grid"
        style="--columns: {{ section.settings.columns }};"
      >
        {%- for product in collection.products limit: section.settings.products_count -%}
          {% render 'product-card',
            product: product,
            show_vendor: section.settings.show_vendor,
            show_rating: section.settings.show_rating
          %}
        {%- endfor -%}
      </div>

      {%- if section.settings.show_view_all -%}
        <div class="featured-collection__footer">
          <a href="{{ collection.url }}" class="button button--secondary">
            {{ section.settings.view_all_text | default: 'View All' }}
          </a>
        </div>
      {%- endif -%}
    {%- else -%}
      <p class="featured-collection__empty">
        {{ 'collections.general.no_matches' | t }}
      </p>
    {%- endif -%}
  </div>
</section>

{% schema %}
{
  "name": "Featured Collection",
  "tag": "section",
  "class": "featured-collection-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Featured Products"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_count",
      "label": "Products to show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4
    },
    {
      "type": "range",
      "id": "columns",
      "label": "Columns (desktop)",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 4
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme_1"
    },
    {
      "type": "header",
      "content": "Product card"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "label": "Show rating",
      "default": false
    },
    {
      "type": "header",
      "content": "Footer"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": "Show 'View all' button",
      "default": true
    },
    {
      "type": "text",
      "id": "view_all_text",
      "label": "Button text",
      "default": "View All"
    }
  ],
  "blocks": [
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "Featured Collection"
    }
  ]
}
{% endschema %}

## Testing Checklist

### Functional Testing

- [ ] All settings work correctly
- [ ] Edge cases handled
- [ ] Theme editor preview works
- [ ] Section re-renders correctly

### Browser Testing

- [ ] Chrome (desktop/mobile)
- [ ] Safari (desktop/iOS)
- [ ] Firefox
- [ ] Edge

### Responsive Testing

- [ ] 320px (small mobile)
- [ ] 375px (iPhone)
- [ ] 768px (tablet)
- [ ] 1024px (laptop)
- [ ] 1440px (desktop)

### Accessibility Testing

- [ ] Keyboard navigation
- [ ] Screen reader testing
- [ ] Color contrast
- [ ] Focus indicators

### Performance Testing

- [ ] Lighthouse audit
- [ ] Image optimization
- [ ] No console errors

## Documentation Structure

### README.md

- Project overview
- Installation instructions
- Configuration guide
- Screenshots/demos

### MERCHANT_GUIDE.md

- Feature overview
- Step-by-step setup
- Best practices
- FAQ

### DEVELOPER_GUIDE.md

- Architecture overview
- Code organization
- Customization points
- Contributing guidelines

# Featured Collection Section

A highly customizable featured collection section for Shopify themes.

## Features

- 🎨 Multiple layout options
- 📱 Fully responsive
- ♿ Accessible
- 🎯 Color scheme support
- 🧩 App block compatible

## Installation

1. Copy `sections/featured-collection.liquid` to your theme
2. Copy `snippets/product-card.liquid` if not present
3. Add the section to any template

## Configuration

### Basic Setup

1. Add section to homepage
2. Select a collection
3. Customize appearance

### Available Settings

| Setting        | Description       | Default             |
| -------------- | ----------------- | ------------------- |
| Heading        | Section title     | "Featured Products" |
| Collection     | Products source   | None                |
| Products count | Number to display | 4                   |
| Columns        | Grid columns      | 4                   |

## Screenshots

[Include screenshots here]

## Browser Support

- Chrome 90+
- Safari 14+
- Firefox 88+
- Edge 90+

## License

MIT

## Deployment Steps

1. Final code review
2. Run theme check
3. Update version number
4. Create release notes
5. Push to development theme
6. Test in theme editor
7. Push to staging
8. Get approval
9. Deploy to production
10. Verify deployment

## Presentation Outline

### 1. Introduction (2 min)

- What you built
- Why you chose this project

### 2. Demo (5 min)

- Live walkthrough
- Key features
- Merchant experience

### 3. Technical Deep Dive (5 min)

- Architecture decisions
- Interesting challenges
- Solutions implemented

### 4. Quality Assurance (3 min)

- Testing approach
- Accessibility features
- Performance results

### 5. Lessons Learned (2 min)

- What went well
- What you'd do differently
- Future improvements

### 6. Q&A (3 min)

## Final Submission

### Code

- [ ] All files included
- [ ] No console errors
- [ ] Theme check passes
- [ ] Version number set

### Documentation

- [ ] README complete
- [ ] Merchant guide written
- [ ] Developer guide written
- [ ] Screenshots included

### Testing Evidence

- [ ] Lighthouse scores
- [ ] Browser test results
- [ ] Accessibility audit

### Presentation

- [ ] Demo prepared
- [ ] Talking points ready
- [ ] Q&A answers prepared