How to add a Specifications table below the Product images in product page Dawn Theme

Shopify Discussion
1

Hi everyone!

I wanted to add specs table below the product images. See the screenshot for reference.
storelink: thecleanroom.net

IntechCarl_0-1739760694940.png
IntechCarl_0-1739760694940.png847×873 106 KB

2

Hi @IntechCarl

To fulfill your request, insert the following table code into the specified file: https://prnt.sc/taOFD5GQKlqO


    

| 1 | 2 |
| - | - |

Here is the result:

image_720.png
image_720.png720×424 71.6 KB

I hope this helps

Best,

Daisy

1 Like
3

Hi @IntechCarl ,

Thank you for reaching out about implementing a specifications table for your Shopify store. I’ve reviewed your requirements and have prepared a complete solution that will match the layout you shared.

Here’s what we’ll implement:

  1. A clean, professional specifications table below your product images
  2. Fully responsive design that works on all devices
  3. Easy-to-maintain structure using Shopify metafields
  4. Matching styling with your current theme

Technical Implementation Details:

  1. First, we’ll set up the metafield structure in your Shopify admin:
namespace: product_specs key: specifications type: json
  1. We’ll add the following Liquid code to your product template:
{%- if product.metafields.product_specs.specifications -%}
  <div class="product-specifications">
    <h2>Specifications</h2>
    <table class="specs-table">
      {% assign specs = product.metafields.product_specs.specifications | json_parse %}
      {% for spec in specs %}
        <tr class="specs-row {% cycle 'odd', 'even' %}">
          <td class="specs-label">{{ spec[0] | replace: '_', ' ' | capitalize }}</td>
          <td class="specs-value">
            {%- if spec[1].first -%}
              {% for sub_spec in spec[1] %}
                {% if sub_spec[0] %}
                  <div>{{ sub_spec[0] }}: {{ sub_spec[1] }}</div>
                {% else %}
                  <div>{{ sub_spec }}</div>
                {% endif %}
              {% endfor %}
            {%- else -%}
              {{ spec[1] }}
            {%- endif -%}
          </td>
        </tr>
      {% endfor %}
    </table>
  </div>
{%- endif -%}
  1. We’ll add the necessary CSS to ensure the table looks perfect:
.product-specifications {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
}

.specs-row {
  border-bottom: 1px solid #e5e5e5;
}

.specs-row:last-child {
  border-bottom: none;
}

.specs-row.odd {
  background-color: #f9f9f9;
}

.specs-label {
  padding: 1rem;
  width: 33%;
  font-weight: 500;
  color: #333;
}

.specs-value {
  padding: 1rem;
  color: #666;
}

@media screen and (max-width: 767px) {
  .specs-table {
    font-size: 0.9em;
  }
  
  .specs-label {
    width: 40%;
  }
}​

The best part? We’d be happy to implement this solution for your store completely free of charge! We’ll handle all the technical setup and ensure everything works perfectly with your theme.

Would you like us to proceed with the implementation? Just let me know, and we can get started right away.

Best regards,

Shubham | Untechnickle

P.S. Once implemented, updating product specifications will be as simple as editing the metafields in your Shopify admin.

1 Like
4

Hi!
I’ve implemented the changes, but how do I customize the contents of the table?

5

Yes sure, Can we talk about it on DMs?

6

Sure!

7

@IntechCarl

What do you want the table to look like?
Please list the details so I can create the code for you.

8

I want the table to be customizable like the description