Spotlight Block
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Spotlight Block".
Section settings
General
| Settings | Meaning |
|---|---|
Layout | Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width). |
Padding Container Full Width | Determine the left and right spacing of the Full Width layout. |
Disable Padding Content? | Toggle Padding for the Content |
Margin Minus Top | Determine the section negative spacing from the top. |
Layout | Select the layout of the block item to be in a Grid or Slider. |
Layout Mobile Responsive | Select the layout for the section render on mobile device. The options are: List, Scroll Snap and Slider. |
Column | Select the column count for the grid and slider on destop. |
Column Mobile | Select the column count for the grid and slider on mobile. |
Show Arrows On Desktop | Toggle the navigation arrows on Desktop. |
Show Arrows On Mobile / Tablet | Toggle the navigation arrows on Mobile/Tablet. |
Position Vertical Arrow - (Unit % or px) | Enter the position of the arrows relative to the top of the slider. |
Show Dots On Desktop | Toggle the paginating dots on Desktop. |
Show Dots On Mobile / Tablet | Toggle the paginating dots on Tablet and Mobile. |
Enable Border Bottom? | Toggle Border Bottom |
Border Color | Apply a color to the border bottom. |
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile | Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately. |
Background Color - Background Gradient | Set color (or gradient) for the section background. |
Background Image | Upload/Select an image as the section background. |
Title | Enter in the title for the section. |
Enable Title Border? | Toggle title torder |
Enable Custom Position Title | Toggle custom position title |
Title Color | Apply a color to the title of the section. |
Title Color Mobile | Apply a color to the title of the section on mobile. |
Title Font Size | Specify the font size of the title. |
Title Font Size Mobile | Specify the font size of the title on mobile. |
Title Margin Bottom | Determine the spacing of the title from bottom on Desktop. |
Description | Enter the text for the description. |
Description Color | Apply a color to the description. |
Description Margin Bottom | Determine the spacing of the description from bottom. |
Description Font Size | Specify the font size of the description on desktop. |
Alignment | Select the alignment of the header text to be either to the Left, Center or to the Right of the section. |
Grid Gap | Determine the gap between items. |
Border Radius | Determine the roundness of the items. |
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 | Select the alignment of the View all text to be either to the Left, Center or to the Right. |
View All Font Weight | Select the font weight of the 'View all' text. |
View All Margin Bottom | Determine the top spacing of the "View all" Desktop. |
Toggle "View all" border? | Toggle view all border? |
View All Link | Set URL for the "View all" to redirect to if the "Redirect To URL" is selected. |
View All Color | Apply a color to the "View all" of the block. |
Display Button? | Toggle the button display at the bottom. |
Button Text | Enter the text for the button. |
Button Link | Enter URL for the button to redirect to. |
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient | Set the text color, background and border color for both the normal and hover states of the button. |
Button Width | Determine the width of the button. |
Button Spacing Top | Determine the spacing of the buttons from top. |
Box Shadow For Block Item
| Settings | Meaning |
|---|---|
Enable Box Shadow ? | Toggle Box Shadow |
Horizontal Length | Determine the offset of the box shadow to the right. |
Vertical Length | Determine the offset of the box shadow to the left. |
Blur Radius | Determine the how blur the box shadow is. |
Spread | Determine the far the thickness of the box shadow maintains. |
Background Box Shadow | Set background color for the box shadow |
Inset? | Toggle to set the box shadow falls inward or outward. |
Enable Plus Icon? | Toggle the plus icon for block item |
Enable Border Content | Toggle the border for the content. |
Block settings
[BLOCK] Small Image
| Settings | Meaning |
|---|---|
Enable Image? | Toggle image to show. |
Image | Upload/Select image for the banner. |
Alignment | Select the horizontal alignment of the text content to be either to the Left, Right or Center. |
Content on Image | Toggle the content inside the image. |
Content Align Items | Select the vertical alignment of the text content to be either to the Top, Bottom or Center. |
Content Position Top/Bottom | Determine the top and bottom spacing of the text content relative to the image's top/bottom based on the alignment on desktop |
Content Position Top/Bottom Mobile | Determine the top and bottom spacing of the text content relative to the image's top/bottom based on the alignment on mobile |
Background Color | Background Color |
Content Spacing Top | Determine the spacing of the content from top. |
Content Spacing Bottom | Determine the spacing of the content from bottom. |
Content Spacing Left/Spacing Right | Determine the spacing of the content from left/right (cannot be used when 'Enable Border Content' is enabled in the settings section). |
Sub Title | Enter in the sub title for the content item. |
Enable Border Sub Title | Toggle border sub title |
Sub Title Color | Apply a color to the sub title of the content item. |
Sub Title Font Size | Specify the font size of the sub title. |
Font Weight | Select the font weight of the sub title |
Sub Title Spacing Bottom | Determine the spacing of the sub title from bottom. |
Title | Enter in the title for the section. |
Title Color | Apply a color to the title of the content item. |
Title Font Size | Specify the font size of the title. |
Title Font Size Mobile | Specify the font size of the title on mobile. |
Font Weight | Select the font weight of the title |
Enable Font Weight Italic? | Toggle font weight italic of the title |
Title Border | Select border/underline style of title:
|
Title Border Color | Apply a border color to the title. |
Description | Enter the text for the description. |
Description Color | Apply a color to the description. |
Description Font Size | Specify the font size of the description. |
Enable Description Hover? | Toggle description on hover |
Button Style | Select the style of the button:
|
Button | Enter the text for the button. |
Link | Enter URL for the button to redirect to. |
Button Font Size | Determine the font size of the button. |
Determine the font size of the button. | Determine the width of the button. |
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient | Set the text color, background and border color for both the normal and hover states of the button. |
Button Background Opacity | Specify the transparency of the button background. |
Enable Custom Border? | Toggle custom border? |
Button Text Transform | Transform the text of the button to be either normal, uppercase, lowercase or capitalize. |
Icon | Enter the SVG icon for the button. |
Button Spacing Top | Determine the spacing of the buttons from top. |
[BLOCK] Large Image
| Settings | Meaning |
|---|---|
Enable Image? | Toggle image to show. |
Image | Upload/Select image for the banner. |
Alignment | Select the horizontal alignment of the text content to be either to the Left, Right or Center. |
Content on Image | Toggle the content inside the image. |
Content Align Items | Select the vertical alignment of the text content to be either to the Top, Bottom or Center. |
Sub Title | Enter in the sub title for the content item. |
Enable Border Sub Title | Toggle border sub title |
Sub Title Color | Apply a color to the sub title of the content item. |
Title | Enter in the title for the section. |
Title Color | Apply a color to the title of the content item. |
Title Border | Select border/underline style of title:
|
Title Font Size | Specify the font size of the title. |
Title Font Size Mobile | Specify the font size of the title on mobile. |
Font Weight | Select the font weight of the title |
Enable Font Weight Italic? | Toggle font weight italic of the title |
Description | Enter the text for the description. |
Description Color | Apply a color to the description. |
Description Font Size | Specify the font size of the description. |
Description Spacing Top | Determine the spacing of the description from top. |
Button | Enter the text for the button. |
Link | Enter URL for the button to redirect to. |
Button Font Size | Determine the font size of the button. |
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient | Set the text color, background and border color for both the normal and hover states of the button. |
Button Background Opacity | Specify the transparency of the button background. |
Button Text Transform | Transform the text of the button to be either normal, uppercase, lowercase or capitalize. |
Icon | Enter the SVG icon for the button. |
Button Spacing Top | Determine the spacing of the buttons from top. |
Animation
| Settings | Meaning |
|---|---|
Image Behavior | Select animation for images |
Last updated
