Docs

Featured product section

The Featured product section of Borders shows one product with gallery and buy blocks on any page, using the same blocks as the product page.

Applies to: Borders 3.1.0 and later. Added in: Borders 1.0.0. Last checked: 2026-10-13 against Borders 3.1.0.

The Featured product section shows one product with its gallery and buy options on any page, for example on the home page or a landing page. Customers can choose a variant and add it to the cart without opening the product page. It uses the same blocks as the Product page, plus a Product link block.

Where to find it: select Add section in the theme editor, then choose Featured product.

  • Select product chooses the product. Without one, the section shows placeholder content in the editor.
  • Style & layout sets the gallery: a 1 column slider, or a 1 or 2 column scrolling gallery (default: 1 column scroll). On mobile the gallery is always a 1 column slider.
  • Desktop media width gives the gallery One half or Two thirds of the width; the product information takes the rest.
  • Media aspect ratio crops every image to one shape, from Standard (3:2) to Taller (2:3).
  • Fit media inside container shows whole images instead of cropping them, with Container inner spacing and Container background. Media shape shows only when this is off.
  • Add borders to media draws a border around each image; it works only without a media shape.
  • Show thumbnails adds small thumbnails of the media for navigation.
  • Add parallax effect to product sliders moves the images slightly as the customer scrolls the slider.
  • Enable image zoom opens the images larger on click.
  • Enable video looping, Enable video autoplay (muted, without controls) and Fill videos to match the aspect ratio of the images set how product videos play. The section preset turns all three on.
  • Remove border radius and Remove inner padding & border radius change the gallery frame.

Content and functionality

  • Hide border between gallery and content removes the vertical line between the gallery and the product information.
  • Hide border between blocks removes the lines between the blocks.
  • Select the first available variant by default preselects the first available variant (default: on). When off, customers must choose a variant before they can add the product to the cart.

The Section heading and Section design settings are the shared ones: see General section styling.

Blocks

A new Featured product section starts with Title, Price, Variant picker and Buy buttons. Add the other blocks with Add block and drag them into order. The blocks work as on the product page; the setups that need metafields or apps (size guide, metaobject swatches, product siblings, icons with metafields, back in stock, variant metafields) are explained on the Product page.

Title

  • The product title. Text font, Text size, Mobile text size and Heading tag (H3 by default here, because the page already has its own H1).

Vendor

  • The product vendor, linked to the vendor's collection. No settings.

Price

  • The price, the compare-at price when the product is on sale, and unit prices. No settings.

Tax information

  • The "Tax included" notice when your prices include tax, and a "Shipping calculated at checkout" line with a link to your shipping policy when you have one. Open links in opens the policy in a modal on the same page ("Popup"), in the same window or in a new window.

SKU / BARCODE

  • The SKU and barcode of the selected variant, updated when the variant changes. No settings.

Variant picker

  • The product options. Variants style shows them as Blocks (buttons) or Dropdown; color options show as color swatches.
  • Handle unavailable variants hides sold-out variants, disables them or shows them like the others.
  • Metaobject swatch metafields shows images or colors from metaobjects on other options (Blocks style only).
  • Size guide: Size guide option names, Size guide label, Size guide page and Open options add a size guide link next to a matching option.

Buy buttons

  • The add to cart button. Show quantity selector, Show "pre-order" button label, Show inventory notifications (needs inventory tracking), Show dynamic checkout buttons (Shop Pay, PayPal and others) and Show recipient information form for gift card products.
  • Show price adds the price to the button; Update price based on quantity multiplies it by the quantity.
  • Buttons color scheme sets the colors of the buttons.

Back in stock alert

  • A form shown only on sold-out products. The customer leaves an email address and you receive an email; you notify the customer yourself.
  • Text, Button label, Success message and Email message set its texts.

Pickup availability

  • Shows whether the selected variant can be picked up in your stores, when local pickup is set up in Shopify admin → Settings → Shipping and delivery. No settings.

Description

  • The product description. Text font, Text size and Line height style it.
  • Truncate description shows a small, medium or large excerpt (3, 7 or 12 lines) with a Show more button, or the full text.

Text

  • Your own text. Text size, Text color, Text transform (uppercase) and Hide borders (removes the lines around the block).

Collapsible tab

  • A heading that opens to show content. Heading is the title; Tab content, Tab content from page and Tab image fill it, in that order.
  • Hide block if dynamic content is not present hides the tab when its content, page and image are all empty, for example when they come from an empty metafield.

Tabs

  • Up to three tabs side by side, each with a Title and Content. A tab without a title is not shown.
  • Hide block if dynamic content is not present hides the tabs whose content is empty.

Product rating

  • The product's star rating from the review app chosen in Theme settings → Product card → Rating app. No settings. See Product card theme settings.

Product badges

  • The sold out, discount and custom badges of the selected variant, styled in Theme settings → Product card. No settings.

Icons / tags list

  • Up to six icons (128 x 128 px) with labels, shown as pills. Style sets Columns or Rows; Background color and Text color style the pills.
  • Labels can be connected to product metafields so each product shows its own features.

Image

  • An extra image inside the product information, with Mobile image (optional), Remove border radius and a Link.

Product siblings

  • Thumbnails of other products, for example the same model in other colors. Heading, Products (connect it to a product list metafield for different siblings per product), Media aspect ratio and Reduce opacity for unavailable products.

Complementary products

  • Products that go with this one, from the Shopify Search & Discovery app. Title sets the heading. Nothing shows until you set complementary products in the app.

Variant metafield

  • A variant metafield of the selected variant, updated when the variant changes. Variant metafield key (namespace.key) and Title.

Coupon code

  • A discount code with a copy button. Code, Caption, and an optional Link label with Link. The block only shows the code: the discount must exist in Shopify admin → Discounts, and the customer applies it in the cart or at checkout.

Disclosures

  • The product disclosures set up in Shopify for this product. Title sets the heading. Nothing shows for products without disclosures.
  • A "View product details" button that opens the full product page. Featured product only. No settings.

Custom HTML / Liquid

  • Your own HTML or Liquid code inside the product information.

Apps

  • App blocks from your installed apps, for example a reviews widget or a subscription option.

Why can customers not add the product to the cart?

Select the first available variant by default is off, so customers must choose a variant first. The add to cart button stays inactive until they do. Turn the setting on to preselect the first available variant.

Featured product has its own blocks. Changes to the product page template do not change this section, and the other way round. Add and set the blocks in each section separately.

Every setting on this page, with its type and default.

On this page