Relationships Component - Product Sheet Designer

How to display relationships in a table when designing Product Sheets

The relationships component allows you to add product relationships in a table format. When editing the relationships component you will see different sections and settings. In this article we will go over these different sections and explain how to use them.

Attributes
Title
Component Layout
Customize Table
Sort by Attribute

 

Attributes

You can add attributes such as SKU, Label, Thumbnail, Quantity and more to the table. Do this by:

  1. Click “Attributes” at the very bottom of the component editor. 
  2. Click the “+ Add” button to add new attributes

 

💡 When editing your component, first add attributes in order to see the other customization options.

 

ℹ  You can rearrange the order of attributes by dragging and dropping them.

product-sheets-relationship-attributes

 

Rearranging attributes here will correspond to how they are laid out in the table. From top to bottom, attributes will be shown left to right.

 

 

To remove attributes: 

  1. Hover over the attribute
  2. Click on the trash can icon that appears.

 

Title

The title serves two purposes: 

  1. To identify the component in the component list. 
  2. To be used within the template itself as a section header.

 

ℹ If you wish to show the title as a component header, click the “Show title” toggle.

 

Component Layout

The component layout allows you to decide how much space the component will occupy: 100% will take up the whole width of the column while 50% will take up half of the column. 

When 50% is applied, there is space for another 50% component right next to it. This setting is not recommended for large tables in multi-column layouts due to space constraints, however using the 50% layout in landscape or single-column designs can be useful.

 

Customize Table

The relationships component has a table layout. Click this button to customize how the table looks. A pop up will appear showing the options available.

 

  • Font - This is the font style for the whole table
  • Size - This controls the font size for the whole table
  • Text Style - Choose bold, italic, underlined or a combination of these styles for all the text 
  • Alignment - This is the text alignment for the whole table
  • Header color - Choose the color of the header bar
  • Header text color - Choose the text color in the header bar
  • Alternating color - Choose the color for alternating rows. Leave white if you do not want any color differences
  • Content text color - This is the color of text in the rows under the header bar
  • Table preview - Here you will see your style options reflected. You can also drag the columns to change their width. 
  • Vertical Padding - This controls the vertical space within each row

 

Sort by attribute

Here you can choose to sort the attributes automatically in the table. Choose the attribute you want to sort by and then if you want it to be ascending (A to Z) or descending (Z to A).

 


What's next?

 

If you have any questions just click on the chat box in the bottom-right corner and we'll be happy to answer them...




and please let us know 👇