Sidekick: Build Product Comparison Chart Section

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

Section Heading: [e.g., “Compare Our [PRODUCTS/PLANS]” or “Find the Right Fit”]
Subheading: [OPTIONAL, e.g., “See how our options stack up”]

Items to Compare:

Item 1: [PRODUCT/PLAN NAME]

  Price: [PRICE]
  Image: [UPLOAD or DESCRIBE]
  Highlight as recommended: [yes/no]


Item 2: [PRODUCT/PLAN NAME]

  Price: [PRICE]
  Image: [UPLOAD or DESCRIBE]
  Highlight as recommended: [yes/no]


Item 3: [PRODUCT/PLAN NAME]

  Price: [PRICE]
  Image: [UPLOAD or DESCRIBE]
  Highlight as recommended: [yes/no]


(Add more items if needed.)

Comparison Criteria (rows):


  [FEATURE/ATTRIBUTE NAME, e.g., “Material”] – Values: [ITEM 1 VALUE], [ITEM 2 VALUE], [ITEM 3 VALUE]
  [FEATURE NAME, e.g., “Weight”] – Values: [VALUE], [VALUE], [VALUE]
  [FEATURE NAME, e.g., “Warranty”] – Values: [VALUE], [VALUE], [VALUE]
  [FEATURE NAME, e.g., “Waterproof”] – Values: [yes/no], [yes/no], [yes/no]
  [FEATURE NAME] – Values: [VALUE], [VALUE], [VALUE]
  [FEATURE NAME] – Values: [VALUE], [VALUE], [VALUE]


(Add as many rows as needed.)

Display Options:

  Yes/No values shown as: [checkmark and X icons/text/colored dots]
  Recommended badge: [e.g., “Best Seller” or “Most Popular” or “Best Value”]
  Badge color: [COLOR or “theme accent”]
  Sticky header row (product names): [yes/no]
  “Add to Cart” button per item: [yes/no]


Layout:

  Table style: [clean minimal/bordered/striped rows/card columns]
  Background color: [COLOR or “match theme”]
  Mobile behavior: [horizontal scroll/stacked cards/select dropdown to compare two]


Highlight Column:

  Visually emphasize the recommended item with: [colored border/background tint/scale up slightly]


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