Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Featured product

The Featured product section displays an entire product form on your page so customers can buy your products on the spot.

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click (+) Add section and select Featured product.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

  4. Click on the Featured product section and click Select product to choose which product to feature.

  5. Select the Product image size of your product media. Either Small, Medium, Large, Extra Large.

  6. (Optional.) If you have added a video to your Product media, choose whether to Enable video looping so they play continuously after being started.

  7. Select an Image aspect ratio to crop the product image to Square, Landscape, or Portrait.

    The default Natural setting will display the original orientation of your product media.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  8. Click Save.

Product blocks

Just like the Product template, this section contains the elements or blocks that make up your product form. You can rearrange or edit these blocks to create new styles or layout for your Featured product section.

Below you'll find a list of all the Featured product blocks, along with associated settings and features:

Configuration Settings

Product header

Displays product title, price, vendor, star rating, and badges.

Description

Displays product description as added in the Shopify admin.

Variant selector

Displays available product options (e.g. Size or Material) with selectable variants.

Includes Information popup, Variant swatches, and Variant chips.

Quantity selector

Displays product quantity that can be increased or decreased.

Buy buttons

Displays "Add to cart" button with local pickup information below.

It can also show any dynamic checkout buttons.

Share

Display social media icons that let customers share the product on their Facebook, Instagram, or Twitter.

Information popup

An icon link that opens an popup with custom page content when clicked.

Stock level indicator bar

An indicator bar that displays the relative stock level of your product and alerts customers when there are limited quantities.

Learn more about the Stock level indicator bar.

Collapsible row

Display expandable rows with headings that open when clicked to reveal more text.

Learn more about Collapsible rows.

Text

Display additional information as a block of rich text.

Text list with icon

Display additional information with lines of text and one of 30+ icons.

Product label

Display badges with a short text label and one of 30+ icons.

Border

Add a solid line to visually separate product blocks.

Spacer

Add padding between blocks to adjust the layout.

Variant chips

All product variants display as "Chips" or clickable rectangles. You can select a Chip Style to change their layout.

Steps

In your theme editor (Customize):

  1. Under Product overview, click on the Variant selectors block to open the settings.

  2. Under Chip style, set the Layout to 2 Column, 3 Column, or Natural.

    The Column layouts expand the width of the chips to the product form width.

    Natural matches the width of the chip to the length of the variant name.

  3. Click Save.

Variant swatches

Stiletto can display your product variants as a sleek row of clickable color Swatches. You can also choose to show swatches on product cards across your site whenever a customer hovers over them.

See our full Swatches article to learn how to use Stiletto's 140 [default swatch colors][swatch-default-color] or upload your own [custom swatch images][swatch-custom], as well as enable the option to [display swatches on hover][swatch-hover] across your site.

Text block

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple templates.

Add a Text block for additional information within the product form.

Steps

In your theme editor (Customize):

  1. Under Product overview, click + Add block and select Text block.

    Add block button
    Add block button
  2. Click on the new Text block block to open the block settings.

  3. Add a short sentence or two. Use the formatting buttons to add bold, italic, or linked text.

  4. Set the Text size to Small, Medium, or Large.

  5. Select which Column to display the Collapsible row: Either the Right (in the product form) or on the Left (beneath the product media).

  6. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  7. Click Save.

Collapsible row

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple templates.

The Collapsible row displays expandable rows with headings that open when clicked to reveal more text. It's great to add more product details or answerscommon questions in a compact way.

Add collapsible row

In your theme editor (Customize):

  1. Under Product overview, click + Add block and select Collapsible row.

  2. Click on the new Collapsible row block to open the block settings.

  3. Change the Heading text to display as the title.

    We recommend a heading that clearly labels the content.

    To show different headings on different product pages, learn how to create multiple templates or [use dynamic sources][dynamic-sources].

  4. Add Body text that will display when the row is opened.

    Use the formatting buttons to add bold, italic, or linked text.

    To show different text on different product pages, learn how to create multiple templates or [use dynamic sources][dynamic-sources].

  5. (Optional.) Under Page for content, select a page to replace the Body text.

  6. Check the Expand by default option to reveal the row content when the page loads.

  7. Select which Column to display the Collapsible row: Either the Right (in the product form) or on the Left (beneath the product media).

  8. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  9. Click Save.

Information popup

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple templates.

The Information popup displays extra information about your products, like a size guide or other details about your product variants.

You can display an information popup link next to your variant options or add a separate icon block with a link that can be reordered in the product form.

To learn more about setting up an information popup on your product pages, see our [Information popup][information-popup] article.

Text list with icons

Display additional information with lines of text and one of 30+ icons.

Product labels

Display badges with a short text label and one of 30+ icons.

Social sharing buttons

Display social media icons that let customers share the product on their Facebook, Instagram, or Twitter.

To disable Share icons, click on the Share block and click Remove block.

Dynamic checkout button

The Dynamic checkout button lets customers quickly purchase products with a preferred payment method. This button automatically displays one of your supported payment methods based on your customers' browser, device, and personal payment history.

To enable this option, click on the Buy buttons block to access its settings and check the Show dynamic checkout buttons checkbox.

Dynamic checkout button settings
Dynamic checkout button settings

See Shopify's Dynamic checkout buttons documentation for more details.

Stock level indicator

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple templates.

The Stock level indicator displays the relative availability of your product with a dynamic indicator bar that alerts customers when there are limited quantities.

Displaying your stock level can turn limited stock quantities into an advantage by conveying a sense of scarcity to increase conversion and quicker purchases.

The indicator bar visually represents the remaining percentage of your initial stock quantity, turns red when stock is low, and displays three different messages.

Set up your Stock level indicator

Before adding a Stock level indicator block, you need to enable the Track quantity option for your product and product variants.

To learn more, see Shopify's guide on how to Set up inventory tracking.

Steps

In your theme editor (Customize):

  1. Select a Products template you want to edit.

  2. Click + Add block and select Stock level indicator from the Theme Blocks list.

  3. Click on the new Stock level indicator block to open the block settings.

    Stock Level Indicator block settings
  4. (Optional.) Toggle the Show label option to display or hide the "Stock" title above the indicator bar.

  5. Enter the initial quantity of your product stock level in the Inventory base quantity field.

    The indicator bar displays your remaining product quantity as a percentage of this base quantity. If your base quantity is set at 100 products, the bar will display at 100% when your have 100 products in stock and 60% when you have 60 products in stock.

    To learn how to set different base quantities for multiple products, learn how to [use dynamic sources and metafields][dynamic-stock].

  6. Enter the product inventory quantity in the Low quantity threshold to alert customers when limited quantities are available.

    When your current product inventory matches or goes below the Low quantity threshold, the indicator bar will turn red and display a "Limited quantities available" message.

    To learn how to set different Low inventory thresholds for multiple products, learn how to [use dynamic sources and metafields][dynamic-stock].

  7. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  8. Click Save.

Local pickup banner

The Local pickup banner tells customers whether a product is in stock at one of your locations. Spark automatically display this banner beneath the Buy buttons if your local pickup settings are set up in your Admin.

Local pickup is a Shopify feature and you can learn more by reading Shopify's guide for Local pickup.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.