> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bonnita-documentation/sections/all-sections-in-theme/spotlight-block.md).
# Spotlight Block
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 "**Spotlight Block**".
## General
| Setting | Description |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| Layout | Select the width layout of the section to be either default to the body's width, 1170px, 1770px or full screen width. |
| Padding Container Full Width | Determine the spacing of the left and right sides if the layout 'fullwidth' is selected. |
| Disable Padding Content? | The max width of the section will be 100% minus the double of padding Container Full Width |
| Margin Minus Top | Determine the margin top in negative number (the section will get closer to the section above it) |
| Layout | Select the layout for the items to be either Grid or Slider |
| Layout Responsive Mobile | Select the layout for the items to be either Grid, Slider or Scroll Snap on Mobile |
| Column | Select the number of items to show on a row. |
| Column Mobile | Select the number of items to show on a row on Mobile. |
| Enable Arrow? | Enable to show the arrow for the slider. |
| Enable Border Bottom? | Enable to show the border for the section bottom. |
| Border Color | Set the color for the border of the bottom of the section. |
| Spacing top - Desktop / Tablet / Mobile | Determine the spacing of the section from the top on Desktop, Tablet and Mobile. |
| Spacing bottom - Desktop / Tablet / Mobile | Determine the spacing of the section from the bottom on Desktop, Tablet and Mobile. |
| Background Color | Set the Background Color for the whole section. |
| Background Gradient | Set the Background Gradient for the whole section. If the gradient is none, then the background color will be applied if any. |
| Background Image | Upload/choose an image as the background for the section. |
| Title | Enter the title for the section. |
| Enable Title Border? | Turn on the title border. |
| Title Font Size | Determine the font size of the section title on Desktop ranging from 10px to 50px. |
| Title Font Size Mobile | Determine the font size of the section title on Mobile ranging from 10px to 50px. |
| Title Margin Bottom | Determine the spacing of the title from the bottom. |
| Title Color | Set the title color for the section. |
| Desctiption | Enter the text for the section description. |
| Description Color | Set the color for the description text. |
| Description Spacing Bottom | Determine the spacing of the description from the bottom. |
| Description Font Size | Determine the font size of the description. |
| Alignment | Align the content including title and description to the left, the right or center of the section. |
| Grid Gap | Determine the gap between each block. |
| View all | Enter the text for the view all link |
| View All Font Size | Determine the font size of the view all. |
| View All Alignment | Align the view all link to the left, the right or center of the section. |
| View All Font Weight | Select the font weight for the view all link. |
| View All Margin Bottom | Determine the spacing of the view all from the bottom. |
| View All Margin Bottom Mobile | Determine the spacing of the view all from the bottom on Mobile. |
| Enable View All Border? | Underline the view all link |
| View All Link | Specify the URL for the view all to redirect to |
| View All Color | Set the color for the view all link |
| Display Button | Show the section button. |
| Button Text | Fill in the text for the Show More Button for the Grid layout. |
| Button Link | Specify the link for the section button to redirect to. |
| Color - Border - Background | Set the text color, background and border color for the button. |
| Button Width | Determine the width of the button ranging from 50px to 600px. |
| Button Spacing Top | Determine the spacing of the button from the top. |
| Enable Box Shadow | Toggle to show the button shadow. |
| Horizontal Length | Determine how far the shadow falls horizontally from its origin. |
| Vertical Length | Determine how far the shadow falls vertically from its origin. |
| Blur Radius | Determine how blur the shadow is. |
| Spread | Determine how far the shadow keeps its original thickness before getting blur. |
| Background Box Shadow | Set the color for the box shadow. |
| Inset? | Select Yes to let the shadow falls inward to the button. |
| Enable Plus Icon? | Enable to show the plus icon. |
| Color Plus Icon | Set the color for the plus icon. |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://halosoft.gitbook.io/bonnita-documentation/sections/all-sections-in-theme/spotlight-block.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.