Responsive Product & Shipping Table for Shopify

Example 

Introduction

This table section is designed to display product specifications, shipping information, or other structured data clearly. It’s mobile-friendly, easy to read, and works well for tech or design-oriented products.

 

When to Use This

• Product specification tables (dimensions, materials, features)

• Shipping & delivery information

• Pricing or plan comparison

• Any structured content that benefits from a responsive table layout

Code (Custom Liquid + CSS)

<!-- Table Section -->
<div id="tableSection" style="width:100%; overflow-x:auto; font-family:sans-serif; padding:0 16px;">
  <table id="customTable" style="border-collapse: collapse; width:100%; min-width:320px; max-width:800px; margin:0 auto; box-shadow:0 2px 6px rgba(0,0,0,0.1);">
    <thead style="background-color:#f5f5f5;">
      <tr>
        <th style="padding:12px; border:1px solid #ddd; text-align:left;">Feature</th>
        <th style="padding:12px; border:1px solid #ddd; text-align:left;">Specification</th>
        <th style="padding:12px; border:1px solid #ddd;">Notes</th>
      </tr>
    </thead>
    <tbody>
      <tr style="background-color:#fff;">
        <td style="padding:12px; border:1px solid #ddd;">Dimensions</td>
        <td style="padding:12px; border:1px solid #ddd;">200 x 150 x 50 mm</td>
        <td style="padding:12px; border:1px solid #ddd; font-weight:bold; color:#d4380d;">Can customize based on product</td>
      </tr>
      <tr style="background-color:#fafafa;">
        <td style="padding:12px; border:1px solid #ddd;">Material</td>
        <td style="padding:12px; border:1px solid #ddd;">Aluminum & Plastic</td>
        <td style="padding:12px; border:1px solid #ddd;">High-quality, lightweight</td>
      </tr>
      <tr style="background-color:#fff;">
        <td style="padding:12px; border:1px solid #ddd;">Shipping</td>
        <td style="padding:12px; border:1px solid #ddd;">Worldwide via FedEx / DHL</td>
        <td style="padding:12px; border:1px solid #ddd; font-weight:bold; color:#d4380d;">Delivery time varies by region</td>
      </tr>
    </tbody>
  </table>
</div>

Preview

How to Use

1. Go to Online Store → Themes → Edit Code

2. Open the page or section where you want the table

3. Add a Custom Liquid block

4. Paste the HTML code above

5. Update the <tbody> rows with your own data:

   • Feature → parameter or spec name

   • Specification → actual value

   • Notes → optional remark, can be highlighted using <strong> or CSS

   
   

Customizable parameters

Parameter	Usage	Example / Notes	Parameter
Table Width	Max table width	max-width:800px; — change to 600px or 100%	Table Width
Padding	Left/right spacing	padding:0 16px;	Padding
Header Background	Table header color	background-color:#f5f5f5;	Header Background
Row Background	Alternating row colors	#fff / #fafafa	Row Background
Highlight Notes	Highlight important notes	color:#d4380d; font-weight:bold; — can adjust color or weight	Highlight Notes
Box Shadow	Table shadow	box-shadow:0 2px 6px rgba(0,0,0,0.1); — adjust opacity if needed	Box Shadow
Parameter	Usage	Example / Notes	Parameter