The Featured Product section is a highly impactful component designed to showcase a single, key product on any page of your store. It serves as a powerful conversion tool, drawing immediate attention to a best-seller, a new arrival, or a promotional item. This section provides extensive customization options for product details, image display, pricing, call-to-action, and layout, enabling you to present your featured product in an engaging and optimized manner that encourages immediate purchase.
1. How to access the Featured Product section?
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select the Featured Product section.
2. How to customize the Featured Product section?
2.1. Featured Product section
After adding the Featured Product section, you can customize its settings in the left or right sidebar (depending on your screen size)
Product: Select the product you want to display in this section. When you select a product, information such as title, description, price, and images will be automatically fetched from that product's data.
Featured product image: Select a specific image from the product's image gallery to use as the featured image
Color scheme: Select the color scheme to be applied to this section. A color scheme typically defines primary background and text color pairs to ensure contrast and consistency with the overall theme.
Make section full width: Enable this option to make the section span the full width of the browser, overriding the theme's standard content width constraints.
Section padding
Top padding: Enter the value for the top padding of the element (unit: pixels). This padding creates space between the top edge of the content and the top edge of the element.
Bottom padding: Enter the value for the bottom padding of the element (unit: pixels). This padding creates space between the bottom edge of the content and the bottom edge of the element.
Rate padding (mobile): Enter the padding rate value for the element on mobile devices
Theme Settings
Pick mode: Allows users to quickly select product options and variants.
Show currency codes: Enable this option to display the currency code (e.g., "VND", "USD") next to product prices.
Hide sold out variants: Enable this option to hide product variants that are out of stock from the variant selector on the product page.
Wishlist mode: Enables or disables the wishlist feature, providing users with a function to save favorite products.
You can Disable, Enable wishlist local, Enable wishlist account Install EcomRise free, Enable Growave wishlist
Compare mode: Enables or disables the product comparison mode, allowing customers to compare products side-by-side for informed purchasing decisions.
You can Disable, Enable compare local, Enable compare account
Max products compare: 6
Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to theme settings for detailed instructions.
2.2. Media block
After open the Media block, you can adjust its settings using the sidebar—located on the right or left side of your screen depending on your device
Visible if certain conditions are met
Learn more about media types.
Desktop media layout: Select the main media display layout for product images/videos on desktop and tablet devices.
Thumbnail carousel: Large main image with smaller thumbnails below in a carousel format.
1 column: Displays all media in a single vertical column.
2 columns: Displays media in two columns (often a larger main image in one column and smaller thumbnails in the other, or two equal columns).
Stacked: Stacks all media vertically, with the main image at the top.
Without thumbnails: Displays only the main image/video without accompanying thumbnails.
Thumbnail left/right size: (Only applies to 2 columns layouts or when thumbnails are left/right) Adjust the relative size of the thumbnail column when placed to the left or right of the main media.
Mobile media layout: Select the media display layout for product images/videos on mobile devices (smartphones).
Fraction: Displays page indicators (e.g., "1/5") instead of thumbnails.
Thumbnail: Displays small thumbnails below or next to the main image.
Show first media: Enable this option to always display the product's first media item by default, regardless of which variant is selected.
Show first media until customers hand-pick a variant.
Use select variants by change image on slide: Enable this option to automatically select the product variant when the user swipes or navigates through the product's media images
Normally, variants are selected from a swatch. You might want your customers to be able to select a product variant by change a variant image. Only working when slider active.
Video are muted automatically to allow autoplay: Enable this option to automatically mute videos when they start playing. Muting is required to enable autoplay functionality on most modern browsers.
Enable video looping: Enable this option to automatically loop videos when they finish playing.
Enable thumbnail effect: Enable this option to apply an effect (e.g., zoom, hover effect) to thumbnails when a user interacts with them.
Image ratio: Select the aspect ratio (Adapt to image, Square, Portrait, Landscape,...) for the image. Setting an aspect ratio helps ensure consistency in layout
Full image: Enable this option to make the image span the full available width of its containing element.
Image zoom
Zoom won't show video or 3D models
Image zoom: Select the zoom and lightbox behavior when a user interacts with product images.
Hover zoom: Zooms the image when the user hovers over it.
Click open lightbox: Opens the image in a lightbox (a pop-up window) when the user clicks on it.
No zoom: No zoom effect is applied.
Hover zoom and click open lightbox: Applies both hover zoom and opens a lightbox on click.
Open lightbox mode is forced on touch devices.
Image hover zoom type: (Only applies when Hover zoom is selected) Select the type of zoom effect on hover.
Inner: Zooms the image within its container, potentially overflowing the container.
External: Displays a zoomed version of the image next to the original.
Magnifier: Displays a smaller, magnified region that follows the mouse cursor.
Zoom level of zoom hover: (Only applies when Hover zoom is selected) Adjust the zoom level on hover. The higher the value, the more the image is zoomed.
Max zoom level of lightbox: (Only applies when Click open lightbox is selected) Adjust the maximum zoom level when the image is displayed in the lightbox.
Carousel settings
Use navigation: Enable this option to display navigation controls (arrows) for the carousel. When enabled, the navigation design options will become available.
Style: Select the design style for the navigation buttons. This controls the visual appearance of the buttons, such as their background color, border, and arrow styling.
Default: A solid background button with a contrasting arrow color.
Outline: A button with a border and a transparent or arrow-colored background.
Simple: Only the arrow is visible, without a distinct background or border.
Shape: Select the shape of the navigation buttons.
Default: The default shape (typically square or rectangular).
Rounded: The buttons have rounded corners or a circular shape (depending on size).
Rotate: The button might have a rotational or transformative effect on interaction
Size: Select the size of the navigation buttons. This affects the overall size of the button and the arrow icon.
Hide on mobile: Enable this option to hide the navigation controls on mobile screens. On mobile, swiping is often preferred over navigation buttons.
2.3. Group Product block
After open the Group Product block, you can adjust its settings using the sidebar—located on the right or left side of your screen depending on your device
Display colors by block: Enable this option to allow each individual block within this section to choose its own color scheme.
Color scheme: Select the color scheme that will be applied to this section. A color scheme typically includes settings for background color, primary text color, secondary text color, and other accent colors
2.3.1. Title block
To add Title block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Title block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Style: Select the text formatting style for this element (e.g., a heading).
None: No automatic text casing changes are applied. Text appears as entered.
Lowercase: Converts all characters to lowercase.
Capitalize: Capitalizes the first letter of each word.
Uppercase: Converts all characters to uppercase.
HTML tag: Select the semantic HTML tag that will be used for this element. Using the correct HTML tag is crucial for SEO, document structure, and accessibility.
Size: Select the visual display size of the text. These options typically map to predefined font sizes in the theme's CSS
Add product link: Enable this option to add a link to the product page for this element (typically a product title or image). When enabled, users can click on the element to navigate to the product's detail page.
2.3.2. Price block
To add Price block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Price block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
No customizable settings available.
2.3.3. Description block
To add Description block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Description block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Description mode: Select the display mode for the product description.
Short description: Displays only a truncated portion of the product description.
Full description: Displays the entire product description.
Short description: You can enter a short description for all Products or call the metafield description of each product here. (metafield description will take higher priority)
Use read more: Enable this option to display a "Read More" link that allows users to expand to view the full description and a "Read Less" link to collapse it back.
Short description length: (Set the maximum number of characters or words for the short description that is automatically truncated from the product's full description.
Read more label: Enter the text to display for the "Read More" link
Read less label: Enter the text to display for the "Read Less" link
2.3.4. Variant picker block
To add Variant picker block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Variant picker block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Color selector type (color rounded, rounded, block, dropdown...): Select the display type for the color variant selector. This directly impacts the user interface and how customers interact with color options.
Color selector size: Adjust the display size of the color swatches.
Other variants selector type: Select the display type for non-color variant selectors (e.g., size, material)
Size chart
Only show with size option.
Size chart source: Select the data source for the size chart.
Page: Uses content from an existing Shopify page as the size chart. This method is flexible for complex text and tabular content.
Image: Uses an image as the size chart.
Page size chart: Select the Shopify page that contains your size chart content
This page content will appear.
Image size chart: Upload or select the image you want to use as the size chart
2.3.5. Quantity selector block
To add Quantity selector block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Quantity selector block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
The quantity selector is automatically hidden if product are sold out.
2.3.6. Buy buttons block
To add Buy buttons block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Buy buttons block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Show dynamic checkout buttons: Enable this option to display accelerated checkout buttons (e.g., Shop Pay, Google Pay, Apple Pay, PayPal)
Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. Learn more
Show recipient information form for gift cards: Enable this option to display a recipient information form when the product is a gift card.
Allows buyers to send gift cards on a scheduled date along with a personal message. Learn more
Show icon wishlist: Enable this option to display a Wishlist icon in this section
Show icon compare: Enable this option to display a Product Compare icon on this section.
2.3.7. Inventory status block
To add Inventory status block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Inventory status block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Low inventory threshold: Set the low inventory threshold; when the product quantity falls below this threshold, a warning will be displayed. Choose 0 to always show "in stock" if available.
Show inventory count: Display the remaining product quantity in stock, providing customers with information about product availability.
Show progress bar: Display a progress bar indicating the remaining product quantity, helping customers visualize the stock status.
Progress bar max value: Set the maximum value for the progress bar, defining the display range of the progress bar.
For pre-order products, the inventory will appear in yellow and will not show a quantity.
For low stock threshold products, the inventory status will be displayed in red and include the quantity.
For Out of stock products, the inventory will appear in red and will not show a quantity.
For In stock products, the inventory status will be displayed in green and include the quantity.
2.3.8. Shipping information block
To add Shipping information block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Shipping information block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
No customizable settings available.
2.3.9. Vendor block
To add Vendor block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Vendor block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Image vendor custom: Upload image to replace vendor of product added in shopify store
2.3.10. Trust badge block
To add Trust badge block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Trust badge block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Message: Enter the content of the message you want to display. This is the main text that will appear alongside the chosen icon.
Font size: Select the font size for the message text
Source: Select the source of the icon that accompanies the message
Image: Allows you to upload or select an image file (.jpg, .png, .gif) from your library to use as the icon.
SVG Payment: Provides a list of standard Shopify payment icons (e.g., Visa, Mastercard, American Express, PayPal) rendered as SVGs
Image
Trust seal image: Upload or select the trust seal image you want to display
Width image: Select the display width of the trust seal image
SVG Payment
SVG list: Enter the SVG payment list you want to display here
2.3.11. Social block
To add Social block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Social block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
To display your social media accounts, link them in your theme settings
Social style: Select the visual style for social media icons (default, outline, simple, border & background)
Social size: Select the overall size of the social media icons. Options are typically predefined (e.g.,
Small,Medium,Large) mapping to pixel orremsizes in CSS.Border radius: Adjust the roundness of the corners of the icon's container. A value of 0% will result in square corners, while 50% will create a perfect circle (if width and height are equal).
Space item: Adjust the spacing between individual social media icons. This value is typically measured in pixels
2.3.12. Delivery time block
To add Delivery time block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Delivery time block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Hide with 'pre-order': When enabled, this component will automatically be hidden if the product is in a 'pre-order' state. This helps prevent customer confusion when the item isn't immediately available for purchase.
Icon: Select the icon to be displayed. Options are typically a predefined list of icons available within the theme
Custom SVG icon: You can paste the raw SVG code directly into this field (Line Awesome)
Custom image icon: Upload or select the image file (.jpg, .png, .gif) you want to use as the icon.
ICON / IMG animation: Select the animation effect to be applied to the icon (or image). Animations can make the icon stand out and grab user attention.
Delivery text: Enter the delivery or supplementary text message that will appear alongside the icon.
Order in the next [hour] to get this to you between [date_start] and [date_end], Order in the next [hour] to get it by [date_end], Order in the next [hour] to get it soon
Delivery start date: Select the earliest possible start date for delivery. This could be the current date plus your minimum processing time.
From current date
Delivery end date: Select the latest possible end date for delivery. Together with the start date, this creates an estimated delivery window
Delivery end date
Exclude days from: Select the start date of a period from which you want to exclude specific days from delivery calculations
Exclude days: Select the days of the week on which you do not make deliveries
Use the 'MON','TUE','WED','THU','FRI','SAT' and 'SUN'. Separate exclude days with a comma (,).
Exclude Holidays: Select specific dates (holidays) on which you will not make deliveries. You might need to add multiple dates for various holidays throughout the year.
Date delivery format: Select the display format for the delivery date shown to customers
Delivery cut off: Set the daily delivery cut-off time. If a customer places an order after this time, their order will be processed on the next business day.
Number Only(24 Hours Format - 16:00:00 Means 4PM)
2.3.13. Line item property block
To add Line item property block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Line item property block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Line item properties are used to collect customization information for an item added to the cart.
Label: Enter the label text for the data field, providing a clear description of the field's purpose.
Type: Select the data entry type for the field (text, checkbox, options), defining how users interact with the field.
Required: If you use required, then the customer must write a text (for text property) or tick the box (for checkbox property and options radio) to add to the cart.
Show at checkout and cart page: Uncheck this if you don't want the captured information to be shown in the order summary on the cart, checkout page.
Text
Only applicable for line item property of type Text.
Text type: Select the text input type (short or long), defining the size of the text input area and its intended use.
Maximum number of characters: Set the maximum number of characters allowed in the text field, controlling the length of the input content.
Checkbox
Only applicable for line item property of type Checkbox
Value: Appears on the order when checked.
Options
Only applicable for line item property of type options.
Option type: Select the display style for the options (dropdown select or radio buttons), customizing how users select options.
Options: Enter the options, each option on a separate line, defining the available choices for the user.
Each option must be in its own line.
Set your visibility
Visibility (All, Collection based, Type based, Tag based, Product based, Metafield based): Select the method to control the visibility of this element.
All: The element will always be visible (no specific conditions).
Collection based: The element will be visible only if the current product belongs to one or more specified collections.
Type based: The element will be visible only if the current product has one or more specified product types.
Tag based: The element will be visible only if the current product has one or more specified product tags.
Product based: The element will be visible only if the current product is one of the specifically designated products.
Metafield based: The element will be visible based on the value of a specific metafield of the current product. This allows for very granular and flexible control over visibility.
Collection list: Select one or more collections that the product must belong to for this element to be visible.
Maximum choose: 50 collections
Product types: Enter one or more product types
Separate your types with a comma.
Product tags: Enter one or more product tags, separated by commas
Product list: Select one or more specific products. The element will be visible only if the current product matches one of the selected products.
2.3.14. Total sold flash block
To add Total sold flash block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Total sold flash block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Icon: Select the icon to be displayed. Options are typically a predefined list of icons available within the theme
Custom SVG icon: You can paste the raw SVG code directly into this field (Line Awesome)
Custom image icon: Upload or select the image file (.jpg, .png, .gif) you want to use as the icon.
ICON / IMG animation: Select the animation effect to be applied to the icon (or image). Animations can make the icon stand out and grab user attention.
Min quantity: Set the minimum quantity a customer can purchase for this product. If a customer tries to order less than this amount,
Max quantity: Set the maximum quantity a customer can purchase for this product in a single order. This helps control inventory or prevent excessively large orders.
Min Time: Set the minimum time (e.g., number of days, hours) required for a service or for the product to be ready
Max Time: Set the maximum time (e.g., number of days, hours) a service can last or a product can be completed
Text: Enter the custom text that will be displayed alongside this quantity or time information.
[sold] sold in last [hour] hours
