Creating custom tables

Advanced users

This documentation is aimed at developers. If you do not have coding knowledge but want to create custom tables, we recommend you to reach a Shopify Expert and link them to this documentation. Our support does not provide any development service.

Subscription

Creating custom tables requires being on a paid plan. We reserve the right to report to Shopify legal team each merchant creating custom tables without a valid app subscription.

Introduction

To ensure our app can work flawlessly in as many themes as possible, Spec & Compare uses Shadow DOM to scope the app styles. Shadow DOM is a standardized web technology that completely isolates our components from the rest of your theme so that no matter the theme you are using, specification and comparison tables will look good.

This isolation comes at a cost: you also cannot add your own custom CSS to extend the app's default styling. However, our app offers a table editor which allows you to customize most of the table appearance without needing to use custom coding. Learn more about customizing tables using the editor.

Custom tables

Despite offering a flexible editor, there are cases where you might want to use the whole app infrastructure to manage your tables (such as the ability to create specification tables, translate them, saving product attributes...) but still have complete control over the appearance to create highly custom tables. This is especially useful for agencies or freelance developers.

Because Spec & Compare app saves all the information as metafields, this also means that all the information is directly retrievable in Liquid!

This guide will go through how to get all the information to create your highly custom tables.

Performance

Our app is using app blocks to inject JavaScript and CSS to style default app block. If you decide to create your own tables in Liquid instead of using blocks, the app won't inject any script nor CSS. This means you can have the best possible performance.

Accessing specification tables

All specification tables are stored in Shopify metabojects, and can be accessed anywhere by using the following Liquid code:

{%- for table in shop.metaobjects['app--31615844353--tables'].values -%}
{%- endfor -%}

Accessing the specification table of a product

Most of the time, what you can is to retrieve the specification table of a specific product:

{%- assign table = product.metafields['app--31615844353--specifications'].table.value -%}

Automatic conditions

This will only work if you are manually assigning the table to your products. If you are using an automatic condition, the table metafield will be empty. You will need to iterate through each table, get the rule set, and check which table match a given product.

Accessing the compared products

If you wish to build a comparison table, you can retrieve the products being compared with a given product:

{%- assign table = product.metafields['app--31615844353--specifications'].compare_with.value -%}

Anatomy of the specification table

Once you have retrieved the specification table, you can iterate through the schema to access to all the needed information to create your own table:

{%- assign table = product.metafields['app--31615844353--specifications'].table.value -%}

{%- for group in table.groups.value %}
  {{- group.name -}} <!-- Get the group name -->
 
  {%- for attribute in group.attributes -%}
	{{ attribute.name }} <!-- Get the attribute name -->
	{{ attribute.type }} <!-- Get the attribute name -->
	{{ attribute.icon }} <!-- Get the icon handle (image can be retrieved in Liquid using {{ images[attribute.icon] }}) -->
	{{ attribute.tooltip }} <!-- Get the tooltip (if any) -->
	{{ attribute.scope }} <!-- Get the attribute's scope (can be "product" or "variant") -->
	{{ attribute.comparable }} <!-- Boolean that indicates if the attribute is comparable -->
	{{ attribute.product_option_name }} <!-- Only for "product_option" attribute type -->
	{{ attribute.metafield_reference }} <!-- Information about the connected metafield -->
  {%- endfor -%}
{%- endfor -%}

Groups access

Internally, the app stores the tables as a metaobject. Groups are therefore a field of the metaobject. For this reason, you need to include the ".value" to access the groups field.

For each attribute that you retrieve, the app will store inside the type property the kind of attribute. There are two kinds of attributes:

If the value is product_option, product_type, product_vendor, product_price, product_sku, product_weight or product_rating, this means that the information must be retrieved from the corresponding field in the product. For instance, the product_type should map to {{ product.type }}.
For other values, the attribute's value must be retrieved from a corresponding metafield. You can get the metafield reference information this way:

{% assign metafield = product.metafields[attribute.metafield_reference.namespace][attribute.metafield_reference.key] %}

Please note that merchants may create a specification table that references an existing metafield definition. This metafield definition may be connected to a metaobject. If this is the case, you can get the reference of the metaobject field using {{ attribute.metafield_reference.metaobject_field_key }}.