# Social proof

The **Social Proof** section displays a carousel of selected images and captions from your favorite social media posts. Instead of syncing to a feed, this section is a great way to curate specific social media post while having total control over how they're presented on your storefront.

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/spark/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/spark/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/spark/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Social proof**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## **Add posts**

Add up to 15 Post blocks with images that link to your social media posts. Add a caption and the current number of likes to re-create the social media posts that you have curated specifically for your page.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on a **Post** block to open the settings.

   > Click **(+) Add Post** to create new blocks.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Under *Image*, click **Select image** to add an uploaded image used in one of your social media posts.

   > Your image will appear in its original orientation by default. There are no required image dimensions but a square orientation is ideal.
3. Paste the full **Link** to the original social media post to make the entire image a clickable link.

   > Make sure you copy the full URL, including **`https://`** at the start. For example: **`https://instagram.com/abc123`**.
4. (*Optional*.) Update the **Number of likes** of the original social media post.

   > Note that misleading customers with fake numbers could fall under “unfair or deceptive acts or practices” in the [FTC Act](https://ca.practicallaw.thomsonreuters.com/w-007-7584).
5. Add a name or username to the **Posted by** field.
6. Add the **Caption** text.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
7. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

   > Click **Remove block** in the block settings to delete a block.

   > Click the **Eye icon** to hide or unhide a block.
8. Click **Save**.

</details>

## Section headings and layout

You can add a main **Heading** and **Subheading**, set the number of **columns per row**, change the shape and orientation of your images, and adjust the section colors.

The **Social proof** section settings are applied to all Post blocks.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Social proof** section to open the settings.
2. Use the **Columns per row** slider to adjust the number of posts per row, between *2*, *3*, or *4*.

   > On mobile, Posts are displayed one at a time.
3. (*Optional*.) Change the **Heading** text displayed at the top of the section or leave the field blank to remove it.

   > We recommended a short title of just a few words.
4. (*Optional*.) Change the **Subheading** text or leave the field blank to remove it.

   > We recommend two to three short sentences.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
5. Use the **Max width of text** slider to control the maximum width of the headings.

   > Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
6. To make your images a uniform shape and size, select an **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

The default **Natural** setting will display the original orientation of your image.

<img src="https://github.com/fluorescent/kb-spark/blob/main/.gitbook/assets/aspect-ratio.png" alt="" data-size="original">

1. Change the **Like icon color** from the default red.

   > The like icon appears only when the **Number of likes** field has been filled.
2. Click **Save**.

</details>

## Section style

Customize the section **Style** with options for section **Spacing**, **Animation**, and **Alternate section color**.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the section to find the **Section style** settings.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-309687bb9b31e7f3d33217dea186736e74109ff0%2Ftheme-section-styles.jpeg?alt=media)
2. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) in Spark.
3. Choose to enable the **Alternate section color** to apply the secondary section colors selected in your theme settings for colors.
4. Select a **Spacing** option to add padding around the section content.

   > Add padding to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-dea3714e6b027ccef067f49888512f7fee4715ee%2Ftheme-section-spacing.jpeg?alt=media)
5. Select the **Spacing amount** for the padded sides of the section: **Full**, **Half**, or **Minimum**.
6. Click **Save**.

</details>

## Settings reference

Click the **Post blocks** to find the following settings.

| Setting         | Description                                                                                                                                                                                    |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image           | Use the Select image button to add an uploaded image. Your image will appear in its original orientation by default. There are no required image dimensions but a square orientation is ideal. |
| Link            | Add a link to the image. Make sure you paste the full URL, including https\:// at the start. For example: `https://instagram.com/abc123`.                                                      |
| Number of likes | Update the number of current likes on the original post. Note that misleading customers with fake numbers could fall under “unfair or deceptive acts or practices” in the FTC Act.             |
| Posted by       | Add the social media handle or name of who posted the original image.                                                                                                                          |
| Caption         | Add caption text to show below the post image.                                                                                                                                                 |

Click the **Social proof** section to find the following settings.

| Setting            | Description                                                                                                                                                                                                                                                                                                                             |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Columns per row    | Select the number of post blocks to show in each row for desktop.                                                                                                                                                                                                                                                                       |
| Heading            | Add text to display as a heading for the section.                                                                                                                                                                                                                                                                                       |
| Subheading         | Add text to display a subheading below the heading.                                                                                                                                                                                                                                                                                     |
| Max width of text  | Use the slider to control the maximum width and line breaks of the section headings.                                                                                                                                                                                                                                                    |
| Image aspect ratio | Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our [Image settings guide](https://help.fluorescent.co/spark/general/image-guide/theme-image-settings). |
| Like icon color    | Change the color of the Like icon from the default red. The like icon appears only when the Number of likes field has been filled.                                                                                                                                                                                                      |

**Section style**

| Setting                     | Description                                                                                                                                                                                                                                   |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable animation            | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) to learn more.                                     |
| Use alternate section color | Apply the alternate section colors as chosen in your Theme Settings. See Spark's [theme color settings](https://help.fluorescent.co/spark/theme-styles/colors) to learn how to create a secondary color scheme with alternate section colors. |
| Spacing                     | Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None.                                                                                                                                  |
| Spacing amount              | Increase or decrease the amount of space around the section: either Full, Half, or Minimum.                                                                                                                                                   |

> **R**

\\

***

> **Related links**
>
> [Image hero](https://help.fluorescent.co/spark/pages/theme-sections/inline-features)\\
