> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.spreadsimple.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Mapping your Sheet data to website elements


In this help article we will cover the basics of content management and configuration in SpreadSimple.

### 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)
* ${color}[#4f4f4f](SKU (not displayed on the site, but used for notifications and automation needs))

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/01-card-elements_1vu2qfu.png)

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. 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/02-cm_crjeo2.png)

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., ${color}[#0433ff](Category) column information can be mapped to **Subtitle**, **Text** or **Specification** fields. 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/04-eg-subtitle_gl4mhq.jpeg)
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/05-eg-text_1ic8icq.jpeg)
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/06-eg-specification_d8u8eo.jpeg)

All the columns chosen for **Specification** will be displayed as a table: [Column Name]  [Cell Value] 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/00-specification-column_p1eayv.png)

### How to edit the card information?

With SpreadSimple all changes are done in your Google Sheet.
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/03-spreadsheet_1qj4s0y.jpeg)

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](https://commonmark.org/help/) in the cells mapped to **Text** element:

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/markdown-html-demo_pry59k.png)

The same works for the [details page](/en/article/how-to-manage-details-page-16h9j6e/#3-how-to-add-rich-text-content).

### 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**)

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/10-euro-1_r0995o.png)
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/11-euro-2_snexd9.png)

And you can also use **Old Price** element to display the prices crossed out, for example, the prices without discount: 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/old-price_1ocey9u.png)

### 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}[#0433ff](Color)). 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/12-color_1ufs6uu.png)

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!

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/13-color_k4tygr.png)
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/14-color_12mx1s4.png)
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/15-color_v6z2xw.png)

### How to add more images? 

For the information on adding and managing images, please refer to [this article](https://help.spreadsimple.com/en/article/adding-images-1k2y9tj/).

### 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.

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/08-link-as-specification_1gbwi82.png)

![Make sure to select the column containing the links](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/cleanshot-2021-07-29-at-192807_4gz6bt.png)

| 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: 

1. It can be used for redirecting you to an external website (as we have mentioned [above](#3-how-to-place-an-external-link-on-a-card)). 

2. 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. 
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/cleanshot-2021-07-29-at-193325_f9y9wn.png)

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. 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/cleanshot-2021-07-29-at-193437_1niv0mw.png)
You can also enable **quantity picker** on buttons so your customers can increase or decrease the item quantity before proceeding to checkout.

3. The Button can redirect to a Details page that has more information on a single item.
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/cleanshot-2021-07-29-at-193604_t1kgbe.png)

For more information on Details pages, please refer to [this article](/en/article/how-to-manage-details-page-16h9j6e/).

4. 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.

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/cleanshot-2021-07-29-at-194248_12w24ya.png)

To learn more about Embedding in a Pop-up, please check [this article](/en/article/embedding-a-pop-up-umd3te/).

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. 

![Choose the layout that works best for you](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/cleanshot-2021-07-29-at-194535_9k5o2i.png)

### 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. 
![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/16-new-row_rqlvli.png)


### 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.