Best Practices

<!-- Base functionality works everywhere -->
<details class="accordion">
  <summary>Click to expand</summary>
  <div class="content">
    This works in all browsers without JavaScript
  </div>
</details>

<!-- Enhanced with JavaScript for better UX -->
<script>
  // Add smooth animations for modern browsers
  if ('animate' in Element.prototype) {
    // Progressive enhancement code
  }
</script>

{%- assign sale_price = product.price | money -%}
{%- assign compare_price = product.compare_at_price | money -%}

<span class="price">{{ sale_price }}</span>
{%- if compare_price -%}
  <span class="price--compare">{{ compare_price }}</span>
{%- endif -%}

// Don't do this - money formatting belongs server-side
const formatPrice = (cents) => {
  return `$${(cents / 100).toFixed(2)}`;
};

{%- liquid
  # Cleaner, more readable Liquid
  assign product_available = true
  if product.available == false
    assign product_available = false
  endif
-%}

{%- comment -%} Bad {%- endcomment -%}
{%- if condition1 -%}
  {%- if condition2 -%}
    {%- if condition3 -%}
      {%- comment -%} Too deep {%- endcomment -%}
    {%- endif -%}
  {%- endif -%}
{%- endif -%}

{%- comment -%} Good {%- endcomment -%}
{%- assign show_content = false -%}
{%- if condition1 and condition2 and condition3 -%}
  {%- assign show_content = true -%}
{%- endif -%}

{%- if show_content -%}
  {%- comment -%} Content here {%- endcomment -%}
{%- endif -%}

{%- comment -%} Bad - runs filter in loop {%- endcomment -%}
{%- for product in collection.products -%}
  {{ product.title | upcase }}
{%- endfor -%}

{%- comment -%} Good - cache the result {%- endcomment -%}
{%- for product in collection.products -%}
  {%- assign product_title_upper = product.title | upcase -%}
  {{ product_title_upper }}
{%- endfor -%}

// Use modules
export class ProductForm {
  constructor(element) {
    this.element = element;
    this.form = element.querySelector('form');
    this.init();
  }
  
  init() {
    this.form?.addEventListener('submit', this.handleSubmit.bind(this));
  }
  
  handleSubmit(event) {
    event.preventDefault();
    // Handle form submission
  }
}

// Use optional chaining and nullish coalescing
const productTitle = product?.title ?? 'Untitled Product';

// Only load heavy components when needed
if (document.querySelector('.product-media-gallery')) {
  import('./product-media-gallery.js').then(module => {
    const gallery = new module.ProductMediaGallery();
    gallery.init();
  });
}

class VariantPicker extends HTMLElement {
  connectedCallback() {
    this.setupEventListeners();
  }
  
  setupEventListeners() {
    this.querySelectorAll('input[type="radio"]').forEach(input => {
      input.addEventListener('change', this.onVariantChange.bind(this));
    });
  }
  
  onVariantChange(event) {
    // Handle variant selection
  }
}

customElements.define('variant-picker', VariantPicker);

:root {
  --color-primary: #000F9F;
  --color-text: #000000;
  --spacing-unit: 1rem;
  --font-body: system-ui, sans-serif;
}

.button {
  background-color: var(--color-primary);
  padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
  font-family: var(--font-body);
}

/* Base styles (mobile) */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet and up */
@media (min-width: 750px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 990px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Flexbox for one-dimensional layouts */
.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Grid for two-dimensional layouts */
.product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* Container queries for component-level responsiveness */
@container (min-width: 600px) {
  .product-card {
    flex-direction: row;
  }
}

{%- liquid
  assign sizes = 'sizes="(min-width: 990px) 50vw, 100vw"'
  assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000'
-%}

<img
  srcset="{{ product.featured_image | image_url: width: 375 }} 375w,
          {{ product.featured_image | image_url: width: 750 }} 750w,
          {{ product.featured_image | image_url: width: 1100 }} 1100w"
  {{ sizes }}
  src="{{ product.featured_image | image_url: width: 750 }}"
  alt="{{ product.featured_image.alt | escape }}"
  loading="lazy"
  width="{{ product.featured_image.width }}"
  height="{{ product.featured_image.height }}"
>

{%- if forloop.index > 4 -%}
  loading="lazy"
{%- else -%}
  loading="eager"
{%- endif -%}

# Create feature branch
git checkout -b feature/product-card-enhancement

# Make changes and commit
git add .
git commit -m "Add hover effect to product cards"

# Push to remote
git push origin feature/product-card-enhancement

# Create pull request for review

# Update main branch
git checkout main
git pull upstream main

# Merge feature branch
git merge feature/product-card-enhancement

# Deploy to Shopify
shopify theme push