1. What is Product showcase?
Product showcase (Featured product) section lets you highlight a specific product with its images, essential information, and purchase actions in a single, focused layout.
It is commonly used on the homepage or landing pages to promote best-selling, new, or campaign products.
2. Section Components
| Section | Product showcase | Display one selected product with media gallery and customizable product information. | |
|---|---|---|---|
| Available blocks |
1st-level available blocks (Blocks you can add directly inside the Product showcase section) |
Product media gallery | Display product images and videos. |
| Product details | Used to contain multiple product information blocks. | ||
|
Sub-level available blocks (Blocks you can add inside the Product details blocks only) |
> Vendor | Used to display vendor name. | |
| > Product title | Used to show product name. | ||
| > Rating | Used to show product star rating. | ||
| > SKU & barcode | Used to show product SKU and barcode. | ||
| > Price | Used to show product price. | ||
| > Variant picker | Allow customers to select variants. | ||
| > Buy button | Used to add an "Add to cart / Buy now" button. | ||
| > Inventory status | Used to show stock availability. | ||
| > Countdown timer | Used to display a countdown for promotions. | ||
| > Heading | Used to display a title or highlight text. | ||
| > Subheading | Used to display a small supporting text. | ||
| > Text | Used to add descriptive content. | ||
| > Icon | Used to add visual symbols to highlight features or benefits. | ||
| > Button | Used to add a call-to-action button such as “Shop now” or “Learn more”. | ||
| > Image | Used to add a supporting image inside the group. | ||
| > Video | Used to add a supporting video inside the group. | ||
| > Counter | Used to display numbers with a counting animation. | ||
| > Group | Create nested — “blocks inside blocks” to build more complex layouts. | ||
| > Item list | Similar to Group, but with layout control. Make the items inside display as Grid or Carousel. |
||
3. Location & Setup
To add and set up the Product showcase section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Decide where you want to place the new section.
- Click "Add Section".
- Select "Product showcase".
4. Highlight Features
- Display product images and videos, make it outstanding right on your homepage/ landing page
- Fully customizable product information layout
- Supports all core product elements (price, variants, buy button, inventory, etc.)
- Flexible content structure using Group and Item list blocks
- Responsive layout for desktop and mobile.
5. Common Use Cases
🤔 How to set up the Product showcase section?
Don't know where to start with the Product showcase section? Follow this:
STEP 1: Add the section
At your desired position, click "Add section" and choose the Product showcase section.
STEP 2: Select your product
Click on the Product showcase to open its settings panel.
- Find the Product setting at the top.
- Click Select and choose the product you want to showcase from your store.
STEP 3: Click "Save" when done.
🤔 How to customize which product information to display in this section?
Want to control exactly what product details appear and in what order - like showing only the price and buy button, or adding vendor information and ratings?
Here's how:
STEP 1: Access the Product details block
Under the Product showcase section in the left sidebar, click on Product details to expand it and see all available sub-blocks.
STEP 2: Add or remove sub-blocks
Each block represents a specific piece of product information. You can:
- Add blocks: Click "Add block" and select from options like Vendor, Rating, SKU & barcode, Price, Variant picker, Description, etc.
- Remove blocks: Click on any block you don't want and select "Remove block" or click the trash icon.
STEP 3: Arrange the display order
- Click and drag blocks up or down to reorder them.
- The order in the sidebar reflects the order they'll appear on your product page.
⚠️Note: Use the Group block or Item list block to nest other blocks inside, make them appear horizontally, etc.
STEP 4: Fine-tune the overall appearance
Go back to the Product details settings panel to adjust:
- Alignment: Choose vertical and horizontal alignment for desktop and mobile.
- Style: Toggle border display and select color schemes for light and dark modes.
- Padding: Adjust spacing around the product details section for desktop and mobile.
STEP 5: Click "Save" when done.
🤔 How to adjust the look of product media?
Want to customize how your product images and videos are displayed - adjusting the size, layout, zoom behavior, or enabling video autoplay?
Here's how:
STEP 1: Access the Product media gallery block
- Click on the Product showcase section.
- In the left sidebar, click on Product media gallery block to open its settings.
STEP 2: Adjust the gallery size and layout
- Desktop width: Use the slider to set what percentage of the section width the gallery should occupy (useful when displaying product details alongside the gallery).
- Media ratio: Choose how your images should be cropped or displayed (e.g., Square, Portrait, Landscape).
STEP 3: Configure zoom and video settings
- Zoom effect: Select your preferred zoom behavior (e.g., Magnifier for detailed product views).
- Show sound control: Toggle to show/hide audio controls for product videos.
- Enable video autoplay: Toggle to automatically play videos when visitors view the page.
STEP 4: Adjust gallery spacing
Set padding for desktop and mobile to control the spacing around your media gallery (Top, Bottom, Left, Right).
STEP 5: Click "Save" when done.
🤔 What other customization options can you give your Product showcase?
| For the whole Product showcase section: | |
| ✨ Change the media position on the desktop |
Click on the Product showcase section, then find the Desktop media gallery position setting, and choose Left or Right. |
| ✨Adjust the gap between the media and the product details |
Click on the Product showcase section, then scroll down to the Spacing group > Gap > slide or enter a desired number. |
| ✨Adjust the width, the padding, or add a divider line for the section |
Click on the Product showcase section:
|
| ✨Change the Color scheme of the overall section |
Click on the Product showcase section, then scroll down to the Style group > change the Color scheme on the dark and light versions. |
6. Support Information
Need help? Contact our support team at Omni Themes Support
