Product showcase
Overview:
The Product Showcase section is designed to showcase selected products in an interactive hotspot-style layout over a background image. It supports desktop and mobile images, clickable product spots, custom positioning, typography controls, responsive layouts, color schemes, and spacing settings. This section helps merchants highlight featured products, curated collections, or key promotional items in a visually engaging shopping experience.
Blocks Configuration
Product Spot Block:
The Product Spot block displays an individual product hotspot inside the showcase section. Each hotspot can be positioned independently on desktop and mobile devices.
Product Settings
| Setting |
Description |
| Product |
Selects the Shopify product displayed inside the hotspot card. |
Position Settings:
| Setting |
Description |
| Top Position (Desktop) |
Controls the vertical position of the hotspot on desktop devices using percentage values (0%–100%). |
| Left Position (Desktop) |
Controls the horizontal position of the hotspot on desktop devices using percentage values (0%–100%). |
| Top Position (Mobile) |
Controls the vertical position of the hotspot on mobile devices using percentage values (0%–100%). |
| Left Position (Mobile) |
Controls the horizontal position of the hotspot on mobile devices using percentage values (0%–100%). |
Block Styling:
| Setting |
Description |
| Block Color Scheme |
Applies a predefined color palette to individual product hotspot cards. |
Section Configuration
Background Images:
| Setting |
Description |
| Desktop Image |
Uploads the main showcase image displayed on desktop devices. |
| Mobile Image |
Uploads a separate image displayed on mobile devices for responsive optimization. |
Heading:
| Setting |
Description |
| Section Heading |
Defines the main heading displayed above the product showcase. Supports rich text formatting such as bold and italic styling. |
| Heading Size |
Controls heading size such as H1–H6, Large, Medium, or Small. |
| Heading Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Heading Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family |
Allows switching between Default and Body font family styles. |
| Heading Color Style |
Applies predefined color styling to the heading text. |
| Heading Link Style |
Controls styling behavior of links used inside heading content. |
Description:
| Setting |
Description |
| Section Description |
Displays supporting text below the heading. |
| Description Size |
Controls text size such as Large, Medium, or Small. |
| Description Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Description Case |
Changes text transformation style for description text. |
| Description Font Family |
Allows switching between Default and Heading font family styles. |
| Description Color Style |
Applies predefined color styling to description text. |
Product Card Settings:
| Setting |
Description |
| Desktop Card Height |
Controls hotspot product card height on desktop devices. |
| Mobile Card Height |
Controls hotspot product card height on mobile devices. |
Product Heading Typography:
| Setting |
Description |
| Product Heading Size |
Controls the size of product headings such as H6, Large, Medium, or Small. |
| Product Heading Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Product Heading Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Product Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Product Heading Font Family |
Allows switching between Default and Body font family styles. |
| Product Heading Color Style |
Applies predefined color styling to product headings. |
Product Pricing:
| Setting |
Description |
| Show Unit Pricing |
Displays product unit pricing when available. |
Layout:
| Setting |
Description |
| Desktop Section Height |
Controls showcase section height on desktop devices. |
| Mobile Section Height |
Controls showcase section height on mobile devices. |
| Container Layout |
Determines whether the section uses Contained, Contained Content, or Full Width layout. |
| Container Width |
Controls the maximum width of the section container on desktop devices. |
| Text Alignment (Desktop) |
Sets content alignment on desktop devices such as Left, Center, or Right. |
| Text Alignment (Mobile) |
Sets content alignment on mobile devices such as Left, Center, or Right. |
Color Scheme:
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the Product Showcase section background and content. |