Featured 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".

Setting
Description

Product

Select a product to show

Show product badges

Enable/disable checkbox

Enable share

Enable/disable checkbox If you include a link in social media posts, the page’s featured image will be shown as the preview image. Learn more.

A store title and description are included with the preview image. Learn more.

Layout style

Select the layout style for the section:

  • Special

  • Classic

  • Modern

Media

Setting
Description

Desktop media size

Select desktop media size from the dropdown menu:

  • Small

  • Medium

  • Large

(Media is automatically optimized for mobile)

Desktop layout

Select desktop layout from the dropdown menu:

  • Stacked

  • Carousel

  • Carousel (Thumbnail)

Image zoom

Select image zoom from the dropdown menu:

  • Open lightbox

  • No zoom

Enable video looping

Enable/disable checkbox

Image ratio

Select image ratio from the dropdown menu:

  • Adapt to image

  • Square

(Use for Carousel thumbnail layout)

Setting
Description

Carousel thumbnail direction

Set the position of the thumbnails:

  • Vertical: displays on the left of the main product image.

  • Horizontal: displays under the main product image.

Grid spacing (desktop)

Determines the grid spacing between columns of thumbnails on desktop devices. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).

Grid spacing (tablet)

Determines the grid spacing between columns of thumbnails on tablet devices. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).

Colors

Setting
Description

Color scheme

Select a color scheme to set the text and background colors for the section

Section padding

Setting
Description

Top padding

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

Bottom padding

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

Top padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).