Appearance

Featured product variants ​

This guide describes the Featured product variants section.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

To configure your Featured product variants section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select a page that contains a Featured product variants section.

    Note

    The section can be added into any page, except Giftcard and Customer pages. To add the section into the current page, select Add section > Featured product variants. Refer to Shopify help: Add a section.

  2. From the side menu, select Featured product variants.

  3. Select a setting described in the following table.

Setting nameDescription
HeadingIn the Heading text box, enter text to display.
SubheadingIn the Subheading text box, enter text to display.
ProductUse the Product selector to select a product.
Variant limitAdjust the Variant limit slider between 4 and 50.
Enable quick buySet the Enable quick buy checkbox to on or off.
Display on cardSet the Display on card checkbox to on or off.
LayoutUse the Layout options to select Grid or Carousel.
Grid > Products per row on mobileUse the Products per row on mobile options to select 1 or 2.
Grid > Products per row on desktopAdjust the Products per row on desktop slider between 2 and 5 products.
Carousel > Slideshow focusUse the Slideshow focus options to select Center or Left.
Carousel > Mobile slide widthUse the Mobile slide width options to select 3/5 or Full.
Carousel > Desktop slide widthAdjust the Desktop slide width slider between 20 and 60 percent.
Carousel > Autoscroll modeUse the Autoscroll mode options to select Right to left, Left to right or Disabled.
Product grid > Image aspect ratioUse the Image aspect ratio options to select Same as theme settings, Natural, Landscape, Square or Portrait.
Product grid > Image shapeUse the Image shape options to select a shape. For example, select Default, Circle, Rounded nonagon, or Pixelated. Selecting some shapes will crop the image.
Color > Color schemeUse the Color scheme selector to select a color scheme.
Color > Theme settings (link)Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store.
Color > Use gradient for backgroundSet the Use gradient for background checkbox to on or off.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove sectionSelect Remove section to delete the section from the current page.

To configure a block for your Featured product variants section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select a page that contains a Featured product variants section.

  2. From the side menu, expand the Featured product variants section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block-name, and then select the block you added.

    Note

    Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.

  4. Apply a block setting described in the following table.

Block nameBlock descriptionBlock setting(s)
Background patternDisplays a stylistic pattern as a background inside the section.Refer to Background pattern.
Background shapeDisplays a stylistic shape as a background inside the section.Refer to Background shape.
StickerOverlays the section with a stylized sticker.Refer to Stickers.
Shape dividerDisplays a stylized separator between the current section and the next/previous section.Refer to Shape divider.