Generate Size Chart Block

Create a size chart popup or inline table with measurement conversion, fit guide, and product-specific sizing data.

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Create a size chart block for my Shopify product pages:

Features:

  Popup modal triggered by “Size Guide” link near variant selector
  Responsive HTML table with sizes and measurements
  Toggle between CM and Inches
  “How to Measure” section with illustration placeholder
  Fit guide (Slim, Regular, Relaxed)


Settings:

  Chart title
  Size rows (XS through 3XL)
  Measurement columns (Chest, Waist, Hips, Length)
  Values for each size/measurement combination
  Unit toggle default (CM/Inches)
  Fit recommendation text


Requirements:

  Mobile-friendly scrollable table
  Clean typography and spacing
  Accessible modal with focus management
  Can be assigned to specific products via metafields


Generate the Liquid, CSS, and JavaScript for this as a snippet I can paste into my own theme.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Snippets (e.g. snippets/size-chart.liquid), paste the generated code in, and save. Then add a {% render 'size-chart' %} line in your sections/main-product.liquid (or the relevant product template section) near the variant selector so the “Size Guide” link and popup appear on the product page.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions