# Slidable Spotlight

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

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Slidable spotlight**".

## Section settings

### General

<table><thead><tr><th width="336">Settings</th><th>Meaning</th><th data-hidden></th></tr></thead><tbody><tr><td>Section width</td><td><p>Choose the maximum width of the section on the Desktop. The options are:</p><p></p><p><mark style="color:orange;"><strong>Default (width of the body content set in the Theme settings)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1170px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1770px)</strong></mark></p><p><mark style="color:orange;"><strong>Full width (the width of the browser).</strong></mark><br></p><p><em><mark style="color:orange;">Note: To fit more videos in a row, a wider layout is more appropriate</mark></em></p></td><td></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the Full Width layout.</td><td></td></tr><tr><td>Background color</td><td>Set color for the section background.</td><td></td></tr><tr><td>Background gradient</td><td>Set color gradient for the section background.</td><td></td></tr><tr><td>Background image</td><td>Upload/Select an image as the section background</td><td></td></tr><tr><td>Title</td><td>Enter in the title for the section.</td><td></td></tr><tr><td>Title color</td><td>Apply a color to the title of the section.</td><td></td></tr><tr><td>Title font size</td><td>Determine the font size of the title on Desktop.</td><td></td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on Mobile.</td><td></td></tr><tr><td>Title font weight</td><td>Select the font weight of the title</td><td></td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from bottom on Desktop.</td><td></td></tr><tr><td>Title bottom margin on mobile</td><td>Determine the spacing of the title from bottom on Mobile.</td><td></td></tr><tr><td>Horizontal position (unit % or px)</td><td>Fill in the desired positions of arrows horizontally relative to their slider.</td><td></td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## Block settings

### Image

<table><thead><tr><th width="336">Settings</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Image</td><td>Upload/Select an image.</td><td></td></tr><tr><td>Link</td><td>Set link for the block image to redirect to when clicked if the When Click On Image "Redirect To URL" option is selected.</td><td></td></tr><tr><td>Title</td><td>Enter in the title for the block.</td><td></td></tr><tr><td>Color</td><td>Apply a color to the title of the block.</td><td></td></tr><tr><td>Title font size</td><td>Determine the font size of the title on Desktop.</td><td></td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on Mobile.</td><td></td></tr><tr><td>Title font weight</td><td>Select the font weight of the title</td><td></td></tr><tr><td>Button label</td><td>Enter the text for the button.</td><td></td></tr><tr><td>Button label color, Button border color, Button background color, Button background gradient, Button label hover color, Button border hover color, Button background hover color, Button background hover gradient</td><td>Set the text color, background and border color for both the normal and hover states of the buttons.</td><td></td></tr><tr><td>Button width</td><td>Determine the width of the button.</td><td></td></tr><tr><td>Button top margin</td><td>Determine the spacing of the button from top.</td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/slidable-spotlight.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.