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

# Shopable social

The **Shopable social** section seamlessly integrates product displays onto a banner, enhancing user engagement and simplifying the shopping experience.

<figure><img src="/files/f8JxI8rNtfgkbFFWybA6" alt=""><figcaption></figcaption></figure>

## Section settings

### General settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fix width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Color scheme</td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td>Heading</td><td>The title of the section</td></tr><tr><td>Description</td><td>The description of the section</td></tr><tr><td>Heading size</td><td><p>Font size text customization:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Content alignment</td><td><p>The position of the heading and description.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Image ratio</td><td>"Image ratio" refers to the proportional relationship between the width and height of the image.</td></tr></tbody></table>

### Settings for carousel

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Items per row on desktop</td><td>Choose how many items to display per row on desktops for optimal layout.</td></tr><tr><td>Column gap</td><td>Adjust spacing between columns</td></tr><tr><td>Show navigation</td><td>Display the next and back controls for the carousel</td></tr><tr><td>Show pagination</td><td>Display the pagination for the carousel</td></tr><tr><td>Border background color</td><td>Set a background color for the border of the items</td></tr></tbody></table>

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section

### **Section radius**

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable rounded top</td><td>Apply a rounded corner effect to the top edge of the section</td></tr><tr><td>Enable rounded bottom</td><td>Apply a rounded corner effect to the bottom edge of the section</td></tr></tbody></table>

## **Theme block**

### **Shopable item**

**Item preview**

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Upload a desired image</td></tr><tr><td>Heading</td><td>The title of the item</td></tr></tbody></table>

#### Modal social

1. **Social header**

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Social heading</td><td>Custom content block</td></tr><tr><td>Social count posts</td><td>The number of related post</td></tr></tbody></table>

2. **Social content**

2.1. **Social post**

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Social account name</td><td>Define the social account name</td></tr><tr><td>Social account avatar</td><td>Upload the social account avatar</td></tr><tr><td>Social post content</td><td>Determine the main content text</td></tr><tr><td>Social post link</td><td>Attach a link to the social channel's post</td></tr></tbody></table>

2.2. **Social image with product**

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Social post image</td><td>Upload your desired image</td></tr><tr><td>Select product</td><td>Select the desired product</td></tr><tr><td>Vertical position</td><td>The vertical position of the image</td></tr><tr><td>Horizontal position</td><td>The horizontal position of the image</td></tr></tbody></table>