> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/social-shop-feed.md).

# Social shop feed

Helps display content from your social media channels.

*Shared Settings*:

* [<mark style="color:$primary;">'Follow' button</mark>](/triumph/template/shared-settings/view-all-button.md)
* [<mark style="color:$primary;">Card</mark>](#card)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)
* [<mark style="color:$primary;">Card bottom gradient</mark>](#card-bottom-gradient)
* ['Follow' button colors](/triumph/template/shared-blocks/button.md#colors)
* [<mark style="color:$primary;">Carousel buttons colors</mark>](/triumph/template/shared-settings/carousel-buttons-colors.md)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Card</mark>](/triumph/template/sections/social-shop-feed/card.md)

***

#### Card

**Product image aspect ratio**\
Choose the image shape:

* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F5Wf9lOe9UMPTA5djFOHO%2Fsocial%20shop%20feed_image%20ratio.png?alt=media&amp;token=764c74f2-570a-493f-ae4e-720838ada725" alt=""><figcaption></figcaption></figure>

**Video playback**\
Controls how the video starts playing:

* **Play on hover** - Starts playing the video when the user hovers over it.
* **Autoplay** - Automatically plays the video when it appears on a page.
* **Play on click** - Starts playing the video only when the user clicks on it.

***

#### Card bottom gradient

Displays a gradient color at the bottom of the product card.

**Color**\
Select the color.

**Opacity**\
Set the color transparency (0-100%).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F9YTVZ2IdvDJquiaGyai0%2Fsocial%20shop%20feed_card%20bottom%20gradient.png?alt=media&amp;token=ca653a74-28d7-4e14-8225-c78270bad5db" alt=""><figcaption></figcaption></figure>

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FHAAdSRGADFNL6AYUXCi2%2Fsocial%20shop%20feed_desktop.png?alt=media&amp;token=c039a8d7-b182-47c5-aa36-6d7011876357" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FmDE0jQazGtZvmmYnD7CF%2Fsocial%20shop%20feed_mobile.png?alt=media&amp;token=f1887f3a-8313-4811-b995-317f31414f42" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}