Advanced guides

Moving specification tables

Advanced users

This article requires basic coding knowledge. You can reach our support for assistance if you do not know coding.

Shopify currently does not support nesting blocks in the theme editor. Because our app uses blocks to display specification tables, it is not easy to add, let's say, specifications table into a collapsible or a tab...:

Spec&Compare offers a workaround to move the specification table into any other DOM element in the section. To do that, you need to retrieve a valid CSS selector. This selector is the parent element where the specification table is appended.

Once you have the selector, open the specification table block in the theme editor and enter the CSS selector in the Parent target selector setting:

For instance, on Dawn theme, a collapsible HTML looks like this:

To move the specification table into the collapsible content, the selector here would be #Details-9df8a6da-fabb-4090-a61b-e38cf25d03dd-template--18835755761976__main .accordion__content.

Section

The selector you type must be contained within the section where the block is added. This feature does not support moving the block into a different section.

CLS

To minimize content-layout shift (CLS), the table is hidden by default when a parent selector is specified. It is made visible after it has been appended to the parent node. If the parent node does not exist (for instance, if the selector is invalid), the specification table is made visible without being moved.

Previous
Creating custom tables