Sidekick: Build Size Chart Section

Generate the Liquid, CSS, and JavaScript for a size chart section that I can paste into my theme as a custom section, based on this spec:

Section Heading: [e.g., “Size Guide” or “Find Your Perfect Fit”]
Introduction: [1-2 SENTENCES, e.g., “Use our size guide to find the right fit. All measurements are in [inches/centimeters].”]

Size Chart Table:

| Size Label | [MEASUREMENT 1, e.g., Chest] | [MEASUREMENT 2, e.g., Waist] | [MEASUREMENT 3, e.g., Hips] | [MEASUREMENT 4, e.g., Length] |
|————|——|——|——|——–|
| [XS/S/M/L/XL/XXL or numeric sizes] | [VALUE] | [VALUE] | [VALUE] | [VALUE] |
(Fill in all rows for each size offered.)

International Conversion (if applicable):
| US Size | UK Size | EU Size |
|———|———|——–|
| [VALUE] | [VALUE] | [VALUE] |

How to Measure Instructions:

  [MEASUREMENT 1]: [HOW TO MEASURE, e.g., “Measure around the fullest part of your chest, keeping the tape level.”]
  
  
  Include a measurement diagram image: [yes/no]


Fit Notes:

  Fit type: [slim fit/regular fit/relaxed fit/oversized]
  Model reference: [e.g., “Model is 5’10 and wears size [SIZE]” or “not applicable”]
  Between sizes recommendation: [size up/size down]
  Stretch factor: [no stretch/slight stretch/4-way stretch]


Display Options:

  Layout: [table on page/modal popup/accordion per product type]
  Unit toggle (inches/cm): [yes/no]
  Product type tabs (if multiple charts): [PRODUCT TYPE 1, PRODUCT TYPE 2]
  Background color: [COLOR or “match theme”]
  Table style: [striped rows/bordered/minimal]


Placement:

  Show on: [product pages/dedicated page/both]
  Trigger: [always visible/click “Size Guide” link on product page]


Where to paste this: Tell me which section file to save this as and walk me through adding it to my product template via the Shopify theme editor.