Spotlight Product Slider

Updated 1 month ago

The Spotlight Product Slider helps you highlight a selected collection in a more visually focused way. Use it when you want to promote a specific collection, like bestsellers, new arrivals, or seasonal picks, with extra emphasis.

Content Settings

This section controls which products appear in the slider.

  • Select Collection – Choose the collection you want to feature

  • Number of Items – Finalize how many products should appear in the slider

Image

Choose or upload the image you want to display in the spotlight section. Apply an overlay to improve contrast and make the section look more polished

Image Attributes

This controls how the main spotlight image appears.

  • Ratio – Set the shape of the image

  • Adjust Ratio – Fine tune the ratio for the best fit

  • Radius – Adjust how rounded the corners appear

  • Image Scale – Choose whether the image fills or fits the container

Header

This controls the title shown above the spotlight product slider.

You can customize:

  • Text – Add the section title

  • Font – Choose a font that matches your brand

  • Size/Weight – Adjust how bold or subtle the title appears

  • Line Height – Control spacing between lines

  • Letter Spacing – Fine tune spacing between characters

  • Text Color – Choose a color that stands out clearly

  • Alignment – Position the text within the section

  • Capitalization – Set how the text appears

Layout Padding

  • Padding – Adjust the spacing inside the section for a cleaner and more balanced layout

Product Card Settings

This section controls how each product card appears inside the slider.

Product Image Attributes

  • Ratio – Set the shape of the product image

  • Radius – Adjust how rounded the image corners appear

  • Image Scale – Choose whether the image fills or fits the card

Image Border

  • Color – Choose the border color around the product image

  • Width – Adjust thickness

Title

This controls the product title text.

You can customize:

  • Text

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Vendor

This controls how the vendor name appears.

You can customize:

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Price

This controls how the product price is displayed.

You can customize:

  • Text

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Compare Price

This controls the styling of the compare price.

You can customize:

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Capitalization

Action Button

You can make changes to the action button to match your design and improve usability.

Card Background

  • Color – Set the background color of the product card

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the card

Card Border

  • Color – Choose border color

  • Width – Adjust thickness

Background and Spacing

This controls the overall appearance of the entire spotlight product slider section.

Background:

  • Color – Set the section background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the section

  • Margin – Manage spacing outside the section

Border:

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Benefits:

  • Draws attention to priority products or collections

  • Helps drive higher conversions by showcasing curated products instead of overwhelming users

  • Encourages users to explore more items within a focused theme 

  • Supports strategic merchandising (push high-margin or trending products)

  • Improves average order value by exposing users to more products in a guided way

 

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read