Product spotlight
Product spotlight puts one product forward: its card sits over a large image, video or color on one side, and your text, buttons, links or a countdown sit on the other. Use it for a launch, a bestseller or a limited piece.
How to set it up
Step 1: Add the section
- In the theme editor, open the home page and click Add section in the Template area.
- Choose Product spotlight. Drag it to where you want it on the page.
Step 2: Choose the product
- Under Product, select the Product (1).
- Turn Show price, Show variant options and Show quick add on or off.
- Pick the Product card color scheme and the Product card width.
Step 3: Set the background
- Under Background behind the product, choose Image, Video, Color or None.
- For an image, add an optional Mobile image; the desktop image is used when it is empty.
Step 4: Add the content
- Click Add block and add a Subheading, Heading, Text, Split text, Icon, Links, Button wrapper or Countdown.
- Under Layout, choose the Product position (left or right), the Content alignment, the Content width and the Height as a percent of the screen.
Step 5: Set the mobile layout
- Under Mobile, choose Product first or Content first, the alignment, and the Product area height.
Settings reference
Product spotlight
| Product | |
|---|---|
| Product | A product. |
| Show price | Turns this on or off. |
| Show variant options | Turns this on or off. |
| Show quick add | Turns this on or off. |
| Product card color scheme | Colors from Theme settings > Colors. |
| Product card width | Slider. |
| Background behind the product | |
| Background | Options: Image, Video, Color, None. |
| Image | An image from your files. |
| Mobile image | Optional. Uses the image above when empty. |
| Video | A video from your files. |
| Color | |
| Layout | |
| Product position | Options: Left, Right. |
| Content alignment | |
| Content width | Slider. |
| Height | Percentage of the screen height. |
| Mobile | |
| Order | Options: Product first, Content first. |
| Content alignment | |
| Product area height | Slider. |
| Corners | |
| Make section rounded | Rounds this section's corners with the radius set for each one. |
| Top left radius | Slider. |
| Top right radius | Slider. |
| Bottom right radius | Slider. |
| Bottom left radius | Slider. |
Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- The product card links to the product page. Its image and price update with the product, so the section stays current when you edit the product in Shopify Admin.
- With Video, the video plays muted and loops behind the card.