PDP General Info ( Product Specifications )

About The Section

This section is used to render the tech specs for the current product in a table format. Table will be nested inside of an accordion. Table should have 4 columns per row with the following format: a heading column, a content column, a heading column, and a content column.

Section - Desktop Preview Section - Mobile Preview

Section Settings

Setting Name	Usage	Recommended Value
Title	The title for the section.	Product Specifications
Title Text Color	The text color of the section title	#282923
Background Color	The background color of the section title	#EBEBEB
Body Text Color	The text color of the accordion body	#282923
Expanded By Default	A toggle that controls if when the page loads, the accordion should be expanded or collapsed.	ENABLED ( FALSE )
Allowed Properties From Attributes	A list of attributes that are allowed to show on the PDP.	inside_top,inside_bottom,inside_height,outside_top,base_dims::Base Dimensions,spec_sheet,size,ind_weight

"Under the Hood" Details

• This section references a TON of metafields on both the product and the selected variant on load.
• Not all metafields referenced have a definition setup on the product / variant. This is normal.
• Some data renders based on a product tag.
• Some data renders based on a product metafield.
• Some data renders based on a variant metafield.
• When a variant is updated, the table specs should change to reflect the currently selected variant.
• In order for the Pump links to work, you must set the related pump URL in the theme settings.

Understanding "Allowed Properties From Attributes" Setting

This setting was added to give more control over what attributes can show from the variant metafield called "attributes".

Lets say your product has the following JSON set inside the metafield:

title="sample-attributes.json"

[
  {
    "inside_top": "10"
  },
  {
    "inside_bottom": "11"
  },
  {
    "inside_height": "12"
  },
  {
    "outside_top": "13"
  },
  {
    "catalog_page": "26"
  },
  {
    "base_dims": "16\" W"
  },
  {
    "spec_sheet": "link here"
  },
  {
    "size": "35.25\" W x 52.5\" H"
  },
  {
    "ind_weight": "value"
  }
]

The first part of configuring this setting is deciding what properties you want to keep. A property is any of the values to the left of the ':' ( for example, inside_top is a property ). Make a comma separated list like the example below of properties you want to keep

 inside_top,base_dims,size,ind_weight

This list when set will tell the theme which values you want displayed in the table. So in our example above, if the 4 properties have a value ( anything to the right if the ':' ), then we will show it in the table. The title column will be whatever the current property is without the underscore, capitalized. See example below:

inside_top = Inside Top
base_dims = Base Dims
size = Size
ind_weight = Ind Weight

If you want to override the property name with your own custom name, you will need to tweak the initial list slightly. Adding a '::' after the property name but before the next ',' tells the theme that you'd like to add a title override.

Let's say I want to set "base_dims" to show as "Base Dimensions" instead. See the example below to configure this:

original list:
inside_top,base_dims,size,ind_weight

modified list:
inside_top,base_dims::Base Dimensions,size,ind_weight

Now how would this look on the client side with a real product?

Here is the list set in the test theme for allowed properties:

inside_top,inside_bottom,inside_height,outside_top,base_dims::Base Dimensions,spec_sheet,size,ind_weight

Example

Troubleshooting Tips

• Product details are set via the TRAX API and stored as metafields / tags on the product. If a detail is missing / incorrect, verify the request sent to TRAX had all the required data points.
• If a property is not showing from the attributes metafield, verify that the value exists in the field and that the setting has been configured on the section to handle the attribute.
• If you've tried the above tips and are still running into issues, please reach out to us for assistance.