Featured Product
The Featured Product section allows you to highlight a single product in a clean and engaging layout. Customers can view product images, pricing, variants, quantity selector, and purchase buttons directly from the section, making it perfect for showcasing trending, featured, or best-selling products.
Customize Your Featured Product
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Velocity theme.
- In the left-hand editor sidebar, click Add section and select Featured Product.
- Adjust the settings, blocks, and layout options according to your preferences.
- Click Save to apply your changes.
How to Edit the Featured Product
Follow these steps to customize and manage the Featured Product section in your Shopify theme.
- Select Color: Choose a color scheme for the overall product section background and text styling.
-
Media Width:
Control the display width of product media.
- Small: Displays compact product media for more visible product information.
- Medium: Creates a balanced layout between media and content.
- Large: Expands product media for a more immersive shopping experience.
-
Media Aspect Ratio:
Define how product images are displayed.
- Adapt to Image: Maintains the original uploaded image proportions.
- Square: Displays product images in a consistent square format.
- Portrait: Displays taller images for a premium product presentation.
- Border Radius: Adjust the corner roundness applied to product media (e.g., 10px) for a softer and modern appearance.
- Enable Sticky Media: Keep product media visible while customers scroll through product details for easier product exploration.
- Mobile Layout: Control how product media is displayed on mobile devices to optimize the shopping experience across smaller screens.
- Show Arrows: Enable navigation arrows to allow customers to move between product images manually.
- Show Thumbnails: Display thumbnail previews below or beside the main product image for quicker media navigation and product browsing.
Available Product Blocks
The Featured Product section includes multiple customizable blocks that help you display product information in a structured and visually appealing way. You can add, remove, and rearrange blocks according to your store requirements.
- Vendor: Display the product vendor or brand name.
- Title: Show the product title prominently.
- Price: Display product pricing and compare-at pricing.
-
Inventory:
Display real-time product stock availability to help customers understand whether an
item
is available, running low, or out of stock.
- Inventory Low Stock Threshold: Set the quantity limit at which the low stock warning should appear.
- In Stock Color: Choose the color used for the “In Stock” status label.
- Out Of Stock Color: Select the color used for products that are unavailable.
- Low Stock Color: Choose the color displayed when product inventory reaches the low stock threshold.
-
Variant Picker:
Allow customers to select product variants such as size, color, style, or other
available
options directly from the product page.
-
Picker Type:
Control how product variants are displayed.
- Button: Display variant options as clickable buttons or swatches for faster selection and a more visual shopping experience.
- Dropdown: Display variant options inside a compact dropdown selector to keep the layout clean when products contain many choices.
-
Label Style:
Customize the appearance of variant option labels.
- Uppercase: Displays all option labels in uppercase letters for a bold appearance.
- Lowercase: Displays all option labels in lowercase letters for a softer look.
- Default: Uses the original capitalization entered in Shopify product options.
-
Options Layout:
Control how variant selections are arranged.
- Inline: Displays all variant options in a horizontal row for quick selection.
- Stack: Displays each option group vertically for improved readability.
-
Picker Type:
Control how product variants are displayed.
- Pickup Availability:Show local pickup availability information.
-
Quantity Selector:
Allow customers to adjust product quantity before adding items to the cart, creating a
smoother and more flexible purchasing experience.
-
Label Style:
Control the text appearance used for the quantity label.
- Uppercase: Displays labels in all capital letters for a bold and prominent look.
- Lowercase: Displays labels in lowercase for a softer appearance.
- Default: Uses the theme’s default typography styling.
-
Quantity Layout:
Control how the quantity selector is positioned within the product information
area.
- Inline: Displays the quantity selector in a horizontal row for a compact layout.
- Stack: Places quantity controls vertically for better spacing and readability.
- Background Color: Choose the background color for the increment and decrement buttons (e.g., #0F3201) to match your store design.
- Icon Color: Set the icon color used inside the quantity buttons (e.g., #FFFFFF) for proper visibility and contrast.
- Border Radius: Adjust the roundness of the quantity selector buttons (e.g., 50px) to create either a sharp or rounded appearance.
-
Label Style:
Control the text appearance used for the quantity label.
-
Add to Cart Button:
Configure the purchase action area to create a faster and smoother buying experience
for
customers directly from the product page.
-
Layout Style:
Control how purchase actions are displayed on the product page.
- Inline: Displays the quantity selector and add to cart actions side by side for a compact and modern layout.
- Stack: Displays purchase actions vertically for improved spacing and better visibility.
- Show Dynamic Checkout Button: Enable accelerated checkout options such as Buy It Now so customers can skip the cart and proceed directly to checkout for faster conversions.
- Enable Gift Recipient Form: Display recipient details fields for gift-enabled products, allowing customers to send purchases directly to another recipient with personalized information.
-
Layout Style:
Control how purchase actions are displayed on the product page.
Pro Tips:
Use high-quality product images to create a strong visual impact.
Keep important product details above the Add to Cart button for better
conversions.
Use collapsible tabs to organize additional product information neatly.