Spark 1.0

Social proof

The Social Proof section lets you display images and captions in an Instagram feed-like way. It's great for curating your actual social media posts while having total control over how they're presented on your storefront.

This section can be used on the following page templates:

  • Home page template

  • Collection pages template

  • Product pages template

Add a Social proof section to the home page

To set up the Social proof section:

STEPS

  1. From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

  2. Scroll to the bottom of the home page sections and choose Add section.

  3. Choose Social proof from the list of sections.

    This opens the Social proof section settings.

  4. Set the amount of Columns per row using the slider.

  5. Change the Heading text.

  6. Change the Subheading text.

    Leave this field blank to remove the subheading.

  7. Use the Max width of text slider to limit the maximum width of the text.

    If your text just doesn't quite "look right" on the page, you can adjust how wide the paragraph(s) are displayed at maximum.

  8. Select the Image aspect ratio to display your images as Square, Landscape, or Portrait.

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

  9. Return to the list of Home page sections to find your new Social proof section.

Use the drag handles to rearrange the order of you Home page sections:

  1. Use the Add Post button to add a post.

For more information, see the Add posts section.

  1. Click Save.

Add a Social proof section to other pages

You can add a Social proof section to your Collection pages and Product pages templates.

To enable a Social proof section on these pages:

STEPS

  1. From your Customize theme editor, choose Collections or Products from the pages drop-down menu at the top of the screen.

  2. Click on the arrow beside Collection features or Product features.

  3. Use the Add block button to select the Social proof section.

    This opens the Social proof settings.

    You can add up to 5 posts.

  4. Change the Heading text.

  5. Change the Subheading text.

    Leave this field blank to remove the subheading.

  6. Use the Max width of text slider to limit the maximum width of the text.

    If your text just doesn't quite "look right" on the page, you can adjust how wide the paragraph(s) are displayed at maximum.

  7. Select the Image aspect ratio to display your images as Square, Landscape, or Portrait.

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

  8. Select an Image and add a Link and update the Number of likes.

    For more information, see the Add posts section.

  9. Click Save.

Settings reference

The following settings are available for Social proof sections:

Columns per row

Use the slider to choose how many social image previews should be displayed per row of previews. You can choose between 2 and 4 previews per row.

Heading

Change the heading displayed above the posts.

We recommend a title just a few words long.

Subheading

Add subheading text.

Leave this field blank to remove the subheading.

Max width of text

Change how wide the text can be at a maximum.

This makes your text paragraph(s) narrower or wider depending on how long your text is.

Image aspect ratio

Choose to display your product images as Square, Landscape, or Portrait.

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

Link icon color

Change the color of the icon link to your social media page.

Use alternate selection color

Set the background color to the Alternate Section Color as chosen in your Color Settings.

See Spark's Color settings documentation to learn how to set Alternate section colors.

Add posts

Once you have added a Social proof section, you can start curating post content to be added to the section.

To add a post:

STEPS

  1. Make sure you are already editing the Social proof section that you want to change.

  2. Use the Select image button to add a new post image.

  3. Make the image into a clickable link by adding a Link.

    If you want to link to a external page, like an Instagram profile page, you need to type (or copy and paste) the full URL starting with "https://". For example: https://instagram.com/abc123.

  4. (Optional.) Update the Number of likes that your post currently has.

    Note that misleading customers with fake numbers could fall under “unfair or deceptive acts or practices” in the FTC Act.

  5. Add a name to the Posted by field.

  6. Add the Caption text.

  7. Return to the list of Home page sections to find your Social proof section.

  8. Repeat this process until you've added all the posts you need.

  9. You can change the order of the blocks by using the drag handles:

    You can also use the Remove block button to remove a post from this section entirely.

  10. Click Save.

Settings reference

Each post image has the following settings:

Image

Select or upload a post image.

Link

Add a link to the image.

Note that if you want to link to a external page, like an Instagram profile page, you need to type (or copy and paste) the full URL starting with "https://". For example: https://instagram.com/abc123.

Number of likes

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

  • Home page

  • Collection pages

  • Product pages