Generate Product Comparison Table

Create an interactive product comparison table block with feature checkmarks, pricing columns, highlight best value, and responsive mobile layout.

View as Markdown

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 product comparison table block:

Features:

  Side-by-side product comparison (2-4 products)
  Feature rows with checkmarks/crosses
  Price display for each product
  “Best Value” or “Most Popular” badge option
  Add-to-cart button for each product
  Sticky header row on scroll


Settings:

  Number of products to compare (2-4)
  Product picker for each column
  Custom feature rows (text + true/false per product)
  Highlight column option
  Badge text and color
  Background color
  Header style


Requirements:

  Responsive: stacks or scrolls horizontally on mobile
  Smooth hover effects on columns
  Accessible table markup
  Works on product pages and landing pages


Please generate the Liquid, CSS, and JavaScript for this comparison table as code I can paste into my own theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/product-comparison-table.liquid), and paste the generated code in. Save, then open the theme editor and use “Add section” to place it on your product page or a landing page template.

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