How to manage Details page
The Details page is a feature that lets you provide more data on your items without information overflowing.
Fill out the Google Sheet and add all the data necessary, then map the columns to the fields on the Details page, leaving your website page neat and clean.
To add this feature, you need to go to the Content Tab and choose Enable details page.
A Details page has a similar structure as a card. Basically, it is an enlarged version of a card that allows you to provide more information on every item and has a bigger image.
The page also consists of:
Title
Subtitle
Price
Text (supports Markdown and HTML tags)
Status (Badge)
Image (or Images)
Specification
Call-to-Action Buttons (or Action Buttons)
Add all the information you find necessary to the Details pages by mapping the columns from the same source Google Sheet to the corresponding fields:
Use only plain text for Title and Subtitle
Add rich text content (HTML tags or Markdown formatted) to the Text.
Try Google Sheet Currency formatting for the Price column.
Add as many details as you find necessary in the Specification field.
If you want to paste links, please place them in the Specification field. They will be shown as clickable icons.
Manage your Action button in the Primary button settings dropdown by choosing one of the options available:
If you are using it as a Link-to, make sure to map the corresponding column with the links.
You can also add a second button to your cards by enabling it in the Secondary button menu:
For more information, please refer to the following article: How to configure and manage your content.
You can use HTML tags or Markdown in the cells mapped to Text element:
Each Details Page has its own address.
You need to map a column in your Google Sheet that will serve as a route URL. The values of that column should be unique.
Use Roman lowercase letters, numbers, and dashes instead of spaces for the values in the dedicated column.
Also, you can change the default base path /item/ to something that works better for your case. To do that, please follow this instruction.
To open a Details Page, you can click on the card image.
Please note that if there is more than one image (i.e., Image Gallery), they will not be clickable. In this case, click on the card title to open the Details Page.
And there's always a Details button to redirect you to the corresponding Details page.
Fill out the Google Sheet and add all the data necessary, then map the columns to the fields on the Details page, leaving your website page neat and clean.
How to manage a Details page
To add this feature, you need to go to the Content Tab and choose Enable details page.
A Details page has a similar structure as a card. Basically, it is an enlarged version of a card that allows you to provide more information on every item and has a bigger image.
The page also consists of:
Title
Subtitle
Price
Text (supports Markdown and HTML tags)
Status (Badge)
Image (or Images)
Specification
Call-to-Action Buttons (or Action Buttons)
Add all the information you find necessary to the Details pages by mapping the columns from the same source Google Sheet to the corresponding fields:
Use only plain text for Title and Subtitle
Add rich text content (HTML tags or Markdown formatted) to the Text.
Try Google Sheet Currency formatting for the Price column.
Add as many details as you find necessary in the Specification field.
If you want to paste links, please place them in the Specification field. They will be shown as clickable icons.
Manage your Action button in the Primary button settings dropdown by choosing one of the options available:
If you are using it as a Link-to, make sure to map the corresponding column with the links.
You can also add a second button to your cards by enabling it in the Secondary button menu:
For more information, please refer to the following article: How to configure and manage your content.
How to add rich text content?
You can use HTML tags or Markdown in the cells mapped to Text element:
Route URL
Each Details Page has its own address.
You need to map a column in your Google Sheet that will serve as a route URL. The values of that column should be unique.
Use Roman lowercase letters, numbers, and dashes instead of spaces for the values in the dedicated column.
Also, you can change the default base path /item/ to something that works better for your case. To do that, please follow this instruction.
How to open a Details Page on a website
To open a Details Page, you can click on the card image.
Please note that if there is more than one image (i.e., Image Gallery), they will not be clickable. In this case, click on the card title to open the Details Page.
And there's always a Details button to redirect you to the corresponding Details page.
Updated on: 06/03/2023
Thank you!