# Spotlight Block

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fm2e9hyrjED3n0wDAkMja%2Fspotlight%20block.jpg?alt=media&#x26;token=a86b5a75-29c5-4468-9afd-06a32157f6d3" alt=""><figcaption><p>Style 1</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FJ7Fi0bZ3r2niZt99t3bP%2Fspotlight%20block%202.jpg?alt=media&#x26;token=d402ece3-c6c8-45ba-963c-625a570e4d89" alt=""><figcaption><p>Style 2</p></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FjQwy8ozbNVFcVg3laFA1%2Fscreenshot-new-ella-demo.myshopify.com-2022.08.29-16_13_59.jpg?alt=media&#x26;token=08f259ef-a2f8-4d80-9e50-cddc911d23bc" 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 "**Spotlight block**".

## Section settings

### General

<table><thead><tr><th width="328">Settings</th><th>Meaning</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</strong></mark></p><p><mark style="color:orange;"><strong>Width (1170px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1320px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1470px)</strong></mark></p><p><mark style="color:orange;"><strong>Width (1570px)</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></p></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></tr><tr><td>Remove content right padding</td><td>Toggle padding for the content.</td></tr><tr><td>Negative top margin</td><td>Determine the section negative spacing from the top.</td></tr><tr><td>Layout</td><td>Select the layout of the block item to be in a Grid or Slider.</td></tr><tr><td>Mobile layout</td><td><p>Select the layout for the section render on mobile device. The options are: </p><p><br><mark style="color:orange;"><strong>List</strong></mark><br><mark style="color:orange;"><strong>Scroll Snap</strong></mark><br><mark style="color:orange;"><strong>Slider</strong></mark><br><br><em><mark style="color:orange;">Note: Only applicable for grid layout</mark></em></p></td></tr><tr><td>Desktop columns count</td><td>Select the column count for the grid and slider on destop.</td></tr><tr><td>Mobile columns count</td><td>Select the column count for the grid and slider on mobile.</td></tr><tr><td>Enable center mode for mobile</td><td>Toggle to use property center mode.</td></tr><tr><td>Grid gap</td><td>Specifies the distance between items.</td></tr><tr><td>Corner radius</td><td>Determine the roundness of the image.</td></tr><tr><td>Show navigation arrows on desktop</td><td>Toggle the navigation arrows on desktop.</td></tr><tr><td>Show navigation arrows on mobile/tablet</td><td>Toggle the navigation arrows on Mobile/Tablet.</td></tr><tr><td>Horizontal position of arrows (unit % or px)</td><td>Enter the position of the arrows relative to the top of the slider.</td></tr><tr><td>Show navigation dots on desktop</td><td>Toggle the paginating dots on desktop.</td></tr><tr><td>Show navigation dots on mobile/tablet</td><td>Toggle the paginating dots on Tablet and Mobile.</td></tr><tr><td>Show bottom border</td><td>Toggle Border Bottom</td></tr><tr><td>Border color</td><td>Apply a color to the border bottom.</td></tr><tr><td>Background color - Background gradient</td><td>Set color (or gradient) for the section background.</td></tr><tr><td>Background image</td><td>Upload/Select an image as the section background.</td></tr></tbody></table>

### Section header

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Enable position customization</td><td>Adjust the title to the specific position.<br><br><em><mark style="color:orange;">Demo:</mark></em> <a href="https://new-ella-demo-11.myshopify.com/?fts=0&#x26;preview_theme_id=128559120435"><em><mark style="color:blue;">Home 29 - Chic Couture</mark></em></a><em><mark style="color:blue;">.</mark></em></td></tr><tr><td>Title</td><td>Enter in the title for the section.</td></tr><tr><td>Show title border</td><td>Toggle title border</td></tr><tr><td>Title color</td><td>Apply a color to the title of the section.</td></tr><tr><td>Title color on mobile</td><td>Apply a color to the title of the section on mobile.</td></tr><tr><td>Title font size</td><td>Specify the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Specify the font size of the title on mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from bottom on Desktop.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from bottom.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description on desktop.</td></tr><tr><td>Alignment</td><td>Select the alignment of the content to be either to the Left, Center or to the Right of the section.</td></tr><tr><td>'View all' style</td><td>Select the style for the view all. There are 2 styles:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark></td></tr><tr><td>View all</td><td>Enter the text for the "view all" link.</td></tr><tr><td>'View all' font size</td><td>Determine the font size of the "view all".</td></tr><tr><td>'View all' alignment</td><td>Select the alignment of the view all text to be either to the Left, Center or to the Right.</td></tr><tr><td>'View all' font weight</td><td>Select the font weight of the 'view all' text.</td></tr><tr><td>'View all' bottom margin</td><td>Determine the top spacing of the "view all" Desktop.</td></tr><tr><td>Show 'view all' border</td><td>Toggle view all border.</td></tr><tr><td>'View all' link</td><td>Set URL for the "view all" to redirect to if the "Redirect To URL" is selected.</td></tr><tr><td>'View all' link color</td><td>Apply a color to the "view all" of the block.</td></tr></tbody></table>

### CTA button

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show button</td><td>Toggle the button display at the bottom.</td></tr><tr><td>Position</td><td>Select the display position of the button.</td></tr><tr><td>Label</td><td>Enter the text for the button.</td></tr><tr><td>Link</td><td>Enter URL for the button to redirect to.</td></tr><tr><td>Label color -Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background and border color for both the normal and hover states of the button.</td></tr><tr><td>Width</td><td>Determine the width of the button.</td></tr><tr><td>Top margin</td><td>Determine the spacing of the buttons from top.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing of the buttons from bottom.</td></tr></tbody></table>

### Block items

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show plus icon on hover</td><td>Toggle the plus icon for block item.</td></tr><tr><td>Plus icon color</td><td>Apply a color to the plus icon.</td></tr><tr><td>Show content border</td><td>Toggle the border for the content.</td></tr><tr><td>Border color</td><td>Apply a color to the border.</td></tr><tr><td>Show box shadow</td><td>Toggle Box Shadow</td></tr><tr><td>Horizontal length</td><td>Determine the offset of the box shadow to the right.</td></tr><tr><td>Vertical length</td><td>Determine the offset of the box shadow to the left.</td></tr><tr><td>Blur radius</td><td>Determine the how blur the box shadow is.</td></tr><tr><td>Spread</td><td>Determine the far the thickness of the box shadow maintains.</td></tr><tr><td>Box shadow color</td><td>Set background color for the box shadow</td></tr><tr><td>Show inset shadow</td><td>Toggle to set the box shadow falls inward or outward.</td></tr></tbody></table>

## Block settings

### \[BLOCK] Small image

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show image</td><td>Toggle image to show.</td></tr><tr><td>Image</td><td>Upload/Select image for the banner.</td></tr><tr><td>Content alignment</td><td>Select the horizontal alignment of the text content to be either to the Left, Right or Center.</td></tr><tr><td>Show content on image</td><td>Toggle the content inside the image.</td></tr><tr><td>Content position</td><td>Select the vertical alignment of the text content to be either to the Top, Bottom or Center.</td></tr><tr><td>Content top/bottom spacing</td><td>Determine the top and bottom spacing of the text content relative to the image's top/bottom based on the alignment on desktop</td></tr><tr><td>Content top/bottom spacing on mobile</td><td>Determine the top and bottom spacing of the text content relative to the image's top/bottom based on the alignment on mobile</td></tr><tr><td>Background color</td><td>Background Color</td></tr><tr><td>Content top margin</td><td>Determine the spacing of the content from top.</td></tr><tr><td>Content bottom margin</td><td>Determine the spacing of the content from the bottom.</td></tr><tr><td>Content left/right spacing</td><td>Determine the spacing of the content from left/right (cannot be used when 'Enable Border Content' is enabled in the settings section).</td></tr><tr><td>Subtitle</td><td>Enter in the sub title for the content item.</td></tr><tr><td>Show subtitle border</td><td>Toggle border sub title</td></tr><tr><td>Subtitle color</td><td>Apply a color to the sub title of the content item.</td></tr><tr><td>Subtitle font size</td><td>Specify the font size of the sub title.</td></tr><tr><td>Subtitle font weight</td><td>Select the font weight of the sub title</td></tr><tr><td>Subtitle bottom margin</td><td>Determine the spacing of the sub title from bottom.</td></tr><tr><td>Title</td><td>Enter in the title for the section.</td></tr><tr><td>Title color</td><td>Apply a color to the title of the content item.</td></tr><tr><td>Title font size</td><td>Specify the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Specify the font size of the title on mobile.</td></tr><tr><td>Title font weight</td><td>Select the font weight of the title</td></tr><tr><td>Make the title text italic</td><td>Toggle font weight italic of the title</td></tr><tr><td>Title border style</td><td><p></p><p>Select border/underline style of title:</p><p><br><mark style="color:orange;"><strong>None</strong></mark></p><p><mark style="color:orange;"><strong>Full border</strong></mark></p><p><mark style="color:orange;"><strong>Thick border</strong></mark></p><p><mark style="color:orange;"><strong>Short border</strong></mark></p><p><mark style="color:orange;"><strong>Border on hover</strong></mark></p></td></tr><tr><td>Title border color</td><td>Apply a border color to the title.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description.</td></tr><tr><td>Description top margin</td><td>Determine the spacing of the description from the top.</td></tr><tr><td>Show description on hover</td><td>Toggle description on hover</td></tr><tr><td>Button style</td><td><p>Select the style of the button:</p><p><br><mark style="color:orange;"><strong>Primary button</strong></mark><br><mark style="color:orange;"><strong>Secondary button</strong></mark><br><mark style="color:orange;"><strong>Tertiary button</strong></mark></p></td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Button link</td><td>Enter URL for the button to redirect to.</td></tr><tr><td>Button font size</td><td>Determine the font size of the button.</td></tr><tr><td>Button width</td><td>Determine the width of the button.</td></tr><tr><td>Button background opacity</td><td>Specify the transparency of the button background.</td></tr><tr><td>Show custom border</td><td>Toggle custom border?</td></tr><tr><td>Show button on hover</td><td>Toggle to only show button when hovering over the item.</td></tr><tr><td>Button label style</td><td>Transform the text of the button to be either normal, uppercase, lowercase or capitalize.</td></tr><tr><td>Icon</td><td>Enter the SVG icon for the button.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>Button top margin</td><td>Determine the spacing of the buttons from top.</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 button.</td></tr></tbody></table>

### \[BLOCK] Large Image

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show image</td><td>Toggle image to show.</td></tr><tr><td>Image</td><td>Upload/Select image for the banner.</td></tr><tr><td>Content alignment</td><td>Select the horizontal alignment of the text content to be either to the Left, Right or Center.</td></tr><tr><td>Show content on image</td><td>Toggle the content inside the image.</td></tr><tr><td>Content position</td><td>Select the vertical alignment of the text content to be either to the Top, Bottom or Center.</td></tr><tr><td>Subtitle</td><td>Enter in the sub title for the content item.</td></tr><tr><td>Show subtitle border</td><td>Toggle border sub title.</td></tr><tr><td>Subtitle color</td><td>Apply a color to the sub title of the content item.</td></tr><tr><td>Subtitle font size</td><td>Specify the font size of the subtitle.</td></tr><tr><td>Title</td><td>Enter in the title for the section.</td></tr><tr><td>Title color</td><td>Apply a color to the title of the content item.</td></tr><tr><td>Title border style</td><td><p>Select border/underline style of title:</p><p><br><mark style="color:orange;"><strong>None</strong></mark></p><p><mark style="color:orange;"><strong>Full border</strong></mark></p><p><mark style="color:orange;"><strong>Thick border</strong></mark></p><p><mark style="color:orange;"><strong>Short border</strong></mark></p><p><mark style="color:orange;"><strong>Border on hover</strong></mark></p></td></tr><tr><td>Title border color</td><td>Apply a color to the border of the title.</td></tr><tr><td>Title font size</td><td>Specify the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Specify the font size of the title on mobile.</td></tr><tr><td>Make the title text italic</td><td>Toggle font weight italic of the title</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description.</td></tr><tr><td>Description top margin</td><td>Determine the spacing of the description from top.</td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Link</td><td>Enter URL for the button to redirect to.</td></tr><tr><td>Button font size</td><td>Determine the font size of the button.</td></tr><tr><td>Button background opacity</td><td>Specify the transparency of the button background.</td></tr><tr><td>Button label style</td><td>Transform the text of the button to be either normal, uppercase, lowercase or capitalize.</td></tr><tr><td>Icon</td><td>Enter the SVG icon for the button.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5.15/icons?d=gallery&#x26;p=2"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>Button Spacing Top</td><td>Determine the spacing of the buttons from top.</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 button.</td></tr></tbody></table>