Mapping your Sheet data to website elements
In this help article we will cover the basics of content management and configuration in SpreadSimple.
Basically, a card is a core element of your content. Each card represents one item of your listing whatever website template you are using.
A card consists of the following elements:
Title
Subtitle
Price
Text (supports Markdown and HTML tags)
Image (or Images)
Specification
Call-to-Action Button (or Action Button)
SKU (not displayed on the site, but used for notifications and automation needs)
These are basic but you don't have to use all of them - just pick the ones you find necessary. That could be easily done on your Content Tab on the left.
If you don't need a certain piece of information to be shown just leave the corresponding field on your Content Tab empty. That will be applied to all the cards.
You may arrange information on your card the way you prefer to. Just choose a necessary column for the element you want it to be. E.g., Category column information can be mapped to Subtitle, Text or Specification fields.
All the columns chosen for Specification will be displayed as a table: [Column Name] [Cell Value]
With SpreadSimple all changes are done in your Google Sheet.
To change your card information you need to open your source Google Sheet and edit the corresponding cell. All the changes you have made and saved are instantly reflected on your website after refreshing the page.
You can use HTML tags or Markdown in the cells mapped to Text element:
The same works for the details page.
Here you can use the power of Google Sheet features! Just enter plain numbers into your Price Column and then format it by customising currency. (Choose Format -> Number -> More formats -> More currencies)
And you can also use Old Price element to display the prices crossed out, for example, the prices without discount:
If you need more details or categories for your items listed, add a new column in your source Google Sheet and name it correspondingly (e.g. Color).
Fill this column in, then choose it for Specification or any other card element which suits you the most, and voilà - it's all done!
For the information on adding and managing images, please refer to this article.
Please note that you can not choose any external links for Title, Subtitle and Price fields as they will be displayed as plain text.
Use Specification, Text (for hyperlinks) or Action Button instead so the links will become clickable.
A tip: If you don't enable details pages and have only one image, the Image and Title will work as hyperlinks and will redirect to the link mapped to the primary button.
Each action Button (primary and secondary) has several options:
It can be used for redirecting you to an external website (as we have mentioned above).
You may use Action Button to collect the orders your customers placing. To use that option you need to choose Order Form on Primary/Secondary button settings menu dropdown.
After that, if your customers click on the button to place an order, they will see a form to fill in. After being filled, the form will be sent to your email.
The Button can redirect to a Details page that has more information on a single item.
For more information on Details pages, please refer to this article.
Use the Button to open a pop-up. For this case, make sure to select the column containing the necessary links in the iFrame URL dropdown.
To learn more about Embedding in a Pop-up, please check this article.
And you can customise your Action Button by changing its text, color and style (primary or secondary).
In Content Tab, you can choose between two ways to display your cards: a grid or a list layout. And you can define the card size as well.
To add a card you just need to add a new row in your Google Sheet and fill it in. Having been saved, your new card will appear on your website after refreshing the page.
The value of the mapped SKU column is passed to every place like Webhooks, automation add-ons, e-commerce analytics data, etc. It is a unique item criterion you can refer to.
What is a card?
Basically, a card is a core element of your content. Each card represents one item of your listing whatever website template you are using.
A card consists of the following elements:
Title
Subtitle
Price
Text (supports Markdown and HTML tags)
Image (or Images)
Specification
Call-to-Action Button (or Action Button)
SKU (not displayed on the site, but used for notifications and automation needs)
These are basic but you don't have to use all of them - just pick the ones you find necessary. That could be easily done on your Content Tab on the left.
If you don't need a certain piece of information to be shown just leave the corresponding field on your Content Tab empty. That will be applied to all the cards.
You may arrange information on your card the way you prefer to. Just choose a necessary column for the element you want it to be. E.g., Category column information can be mapped to Subtitle, Text or Specification fields.
All the columns chosen for Specification will be displayed as a table: [Column Name] [Cell Value]
How to edit the card information?
With SpreadSimple all changes are done in your Google Sheet.
To change your card information you need to open your source Google Sheet and edit the corresponding cell. All the changes you have made and saved are instantly reflected on your website after refreshing the page.
How to add rich text content?
You can use HTML tags or Markdown in the cells mapped to Text element:
The same works for the details page.
How to format Price?
Here you can use the power of Google Sheet features! Just enter plain numbers into your Price Column and then format it by customising currency. (Choose Format -> Number -> More formats -> More currencies)
And you can also use Old Price element to display the prices crossed out, for example, the prices without discount:
How to add more information to a card?
If you need more details or categories for your items listed, add a new column in your source Google Sheet and name it correspondingly (e.g. Color).
Fill this column in, then choose it for Specification or any other card element which suits you the most, and voilà - it's all done!
How to add more images?
For the information on adding and managing images, please refer to this article.
How to place an external link on a card?
Please note that you can not choose any external links for Title, Subtitle and Price fields as they will be displayed as plain text.
Use Specification, Text (for hyperlinks) or Action Button instead so the links will become clickable.
A tip: If you don't enable details pages and have only one image, the Image and Title will work as hyperlinks and will redirect to the link mapped to the primary button.
How to manage Action Buttons?
Each action Button (primary and secondary) has several options:
It can be used for redirecting you to an external website (as we have mentioned above).
You may use Action Button to collect the orders your customers placing. To use that option you need to choose Order Form on Primary/Secondary button settings menu dropdown.
After that, if your customers click on the button to place an order, they will see a form to fill in. After being filled, the form will be sent to your email.
The Button can redirect to a Details page that has more information on a single item.
For more information on Details pages, please refer to this article.
Use the Button to open a pop-up. For this case, make sure to select the column containing the necessary links in the iFrame URL dropdown.
To learn more about Embedding in a Pop-up, please check this article.
And you can customise your Action Button by changing its text, color and style (primary or secondary).
How to customize cards layout?
In Content Tab, you can choose between two ways to display your cards: a grid or a list layout. And you can define the card size as well.
How to add a new card?
To add a card you just need to add a new row in your Google Sheet and fill it in. Having been saved, your new card will appear on your website after refreshing the page.
What is SKU field mapping for?
The value of the mapped SKU column is passed to every place like Webhooks, automation add-ons, e-commerce analytics data, etc. It is a unique item criterion you can refer to.
Updated on: 11/10/2024
Thank you!