Featured product

You can add a section that features a specific product.

To add this section, please follow the 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 "Featured product".

Section settings

Setting
Description

Product

Select a product you want to display.

Color scheme

Set the color for the section.

Show secondary background

Shows the background for this section's container. If this setting is disabled, this section will have a full background.

Media

Setting
Description

Desktop media width

Width of product images container on desktop:

  • Small

  • Medium

  • Large

Constrain media to screen height

Select this checkbox to constrain media to screen height.

Desktop media position

Position of the product images on desktop:

  • Left: the product images are on the left.

  • Right: the product images are on the right.

Desktop layout

The layout for the section on desktop:

  • Stacked

  • 2 colums

  • Thumbnails

  • Thumbnail carousel

Image zoom

Turns on the zoom feature for main product images.

Hide other variants’ media after selecting a variant

When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected.

Enable video looping

Allows the video to be played again.

Section padding

Setting
Description

Top padding

Determines the height of the top inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).

Bottom padding

Determines the height of the bottom inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).

Text block

Setting
Description

Text

The text for the this block.

Text style

Style of the text:

  • Body

  • Subtitle

  • Uppercase

Title block

Setting
Description

Heading size

The size of the product's title:

  • Small

  • Medium

  • Large

  • Extra large

SKU block

Setting
Description

Text style

Style of the text:

  • Body

  • Subtitle

  • Uppercase

Price block

Displays the product's pricing information, such as price and compare at price.

It has no adjustable settings.

Variant picker block

Setting
Description

Type

Displays any variant options for the product:

  • Dropdown

  • Pills

Color swatches

If you wish to use 'Color swatches', then the Variant picker type must be set to 'Pills'.

Setting
Description

Color selector type

Displays the color variants in swatches:

  • Text swatch

  • Color swatch

  • Variant image and color swatch

Quantity selector block

Displays a quantity selector that customers can use to change the number of the product that they want to purchase. The default quantity is 1.

It has no adjustable settings.

Buy buttons block

Setting
Description

Show dynamic checkout buttons

Displays any dynamic checkout options that you've enabled in your Payments settings.

Show recipient information form for gift cards

Add to cart button

Setting
Description

Color scheme

Select the color for the Add to cart button.

Share

Setting
Description

Show share

Allows customers to share the product to their social media.

Custom Liquid block

Setting
Description

Liquid code

You can add your own Liquid code to create a custom block.

Icon with text block

Setting
Description

Layout

The layout for the block:

  • Horizontal

  • Vertical

Content

Setting
Description

First icon

Displays the icon for the first block. This icon will not be displayed if the First image is selected.

First image

Displays the image for the first block.

First heading

Displays the heading for the first block.

Second icon

Displays the icon for the second block. This icon will not be displayed if the Second image is selected.

Second image

Displays the image for the second block.

Second heading

Displays the heading for the second block.

Third icon

Displays the icon for the third block. This icon will not be displayed if the Third image is selected.

Third image

Displays the image for the third block.

Third heading

Displays the heading for the third block.

Last updated