/** Shopify CDN: Minification failed

Line 12:1 Unexpected bad string token
Line 12:39 Unterminated string token
Line 16:1 Unexpected "\"source\""
Line 16:33 Expected identifier but found "\"heading\""
Line 18:23 Unexpected "/"
Line 20:74 Unterminated string token
Line 24:147 Unterminated string token

**/
I'm using Shopify, with the Dawn theme.

I have a JSON metafield for some products with the following structure:

{"source":"280467.pdf","tables":{"heading":"Technical Information","rows":[["Series","GOT2000 SERIES"],["Type","RS-422 CABLE"],["Cable Length (m)","10"]]}}

Can you write me a HTML/Liquid section that displays the table information.

I've provided some sample HTML/Liquid from an in-built section to help you
2:47 pm
Reading frontend design skill

Here's a clean Shopify section that reads the metafield and renders the table. I'll follow the same patterns as the Dawn theme's built-in sections.
Created 2 files, read a file

Two files to add to your theme:

product-technical-info.liquid → goes in sections/ section-product-technical-info.css → goes in assets/

Setup steps:

    In the Shopify Theme Editor, add the "Technical Information" section to your product page template.
    Set the Metafield namespace and Metafield key in the section settings to match wherever your JSON metafield lives (e.g. namespace custom, key technical_info).
    Make sure your metafield is typed as JSON in Shopify Admin → Settings → Custom data.

A few things worth noting:

    The heading falls back to the heading value inside your metafield data if you leave the section's heading field blank, so it's driven by the data automatically.
    The optional "Show source document link" setting will render a download link for the PDF — it expects the file (e.g. 280467.pdf) to be uploaded to Shopify Files (Content → Files), which makes it available via file_url.
    Rows use the first cell as a <th> header and remaining cells as <td> values, which handles your two-column structure and is semantically correct.
    Styling uses Dawn's CSS custom properties (--color-foreground) so it inherits your theme's color scheme correctly.

Product technical info
LIQUID 
Section product technical info
Code · CSS 
Want to be notified when Claude responds?


Claude is AI and can make mistakes. Please double-check responses.
Section product technical info · CSS
.technical-info__heading {
  margin-bottom: 2rem;
}
 
.technical-info__table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
 
.technical-info__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}
 
.technical-info__row:nth-child(even) {
  background-color: rgba(var(--color-foreground), 0.04);
}
 
.technical-info__cell {
  padding: 1.2rem 1.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1);
}
 
.technical-info__cell--header {
  font-weight: 600;
  width: 40%;
  color: rgba(var(--color-foreground), 0.85);
  white-space: nowrap;
}
 
.technical-info__cell--value {
  color: rgba(var(--color-foreground), 1);
}
 
.technical-info__source {
  margin-top: 1.6rem;
  font-size: 1.4rem;
}
 
@media screen and (max-width: 749px) {
  .technical-info__cell {
    padding: 1rem 1.2rem;
  }
 
  .technical-info__cell--header {
    width: 45%;
  }
}