Troubleshooting

shopify auth logout
shopify auth login

shopify theme push --only sections/header.liquid

shopify theme push --allow-live

# On macOS/Linux
lsof -i :9292

# On Windows
netstat -ano | findstr :9292

shopify theme dev --port 9293

shopify theme check

{%- if product.featured_image -%}
  {{ product.featured_image | image_url: width: 750 }}
{%- endif -%}

{{ product.title | default: 'Untitled Product' }}

{%- comment -%} Correct {%- endcomment -%}
{{ product.featured_image | image_url: width: 750 }}

{%- comment -%} Incorrect {%- endcomment -%}
{{ product.featured_image | image_url: 750 }}

{%- comment -%} money filter needs cents {%- endcomment -%}
{{ 1999 | money }}  {%- comment -%} $19.99 {%- endcomment -%}

{{ 'global.js' | asset_url | script_tag }}
{{ 'product.js' | asset_url | script_tag }}  {%- comment -%} Loads after global {%- endcomment -%}

// product.js
export class ProductForm { }

// main.js
import { ProductForm } from './product.js';

// Bad - might run before DOM ready
const button = document.querySelector('.add-to-cart');
button.addEventListener('click', handler);

// Good - waits for DOM
document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.add-to-cart');
  button?.addEventListener('click', handler);
});

document.addEventListener('click', (event) => {
  if (event.target.matches('.add-to-cart')) {
    // Handle click
  }
});

fetch('/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ id: variantId, quantity: 1 })
})

{{ 'base.css' | asset_url | stylesheet_tag }}

/* Less specific */
.button { }

/* More specific */
.product-form .button { }

{{ 'base.css' | asset_url | stylesheet_tag }}
{{ 'custom.css' | asset_url | stylesheet_tag }}  {%- comment -%} Loads after base {%- endcomment -%}

:root {
  --color-primary: #000F9F;
}

.button {
  background-color: var(--color-primary);
}

color: var(--color-text, #000000);

/* Remove fixed widths if present */
.product-card {
  /* width: 300px; */ /* Remove this */
}

{%- comment -%} Use responsive images {%- endcomment -%}
{{ product.featured_image | image_url: width: 750 }}

{%- comment -%} Add loading="lazy" {%- endcomment -%}
<img loading="lazy" ... >

<link rel="preload" href="{{ 'base.css' | asset_url }}" as="style">

{%- if section.settings.image -%}
  <link
    rel="preload"
    as="image"
    href="{{ section.settings.image | image_url: width: 1500 }}"
  >
{%- endif -%}

<img loading="eager" ... >

<img
  width="{{ image.width }}"
  height="{{ image.height }}"
  ...
>

.product-card__image {
  aspect-ratio: 1 / 1;
}

.product-card {
  contain: layout;
}

.flex-item {
  flex: 1 1 auto; /* Instead of just flex: 1 */
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: block;
}

.flex-container {
  gap: 1rem;
  /* Fallback for older Firefox */
  margin: -0.5rem;
}
.flex-container > * {
  margin: 0.5rem;
}