Featured Product

The Featured Product section in the Opulence theme allows you to highlight a specific product directly on the homepage. This section helps promote important products such as best sellers, new arrivals, or promotional items by giving them greater visibility.

Customers can view the product images, price, description, variants, and purchase options directly from this section. It allows visitors to quickly explore and purchase a product without navigating to the full product page.

Featured Product Section Settings

The Featured Product section provides several customization options that allow you to control how the product appears on the homepage.

• Color Scheme – Select the color scheme used for the featured product section to match your store’s design.
• Select Product – Choose the product you want to display in this section.
• Media Display Type – Select how the product images will appear such as stacked layout or slider.
• Media Width – Control the width of the product media area such as Small, Medium, or Large.
• Media Aspect Ratio – Choose the image display ratio like portrait or square.
• Show Dots – Enable this option to show navigation dots under the product image slider.
• Show Variant Background Image – When enabled, a background image appears behind the product content area. This image changes automatically when a different product variant is selected.
• Section Spacing – Adjust the top and bottom spacing of the section to control layout spacing.

Show Variant Background Image Setup

The Show Variant Background Image feature allows you to display a background image behind the product content area in the Featured Product section. The background image changes dynamically when a different product variant is selected.

To use this feature, you must first create a Variant Metafield that stores an image for each product variant.

Steps to Create Variant Background Image Metafield

• Go to your Shopify Admin.
• Navigate to Settings → Metafields and Metaobjects.

• Click Variants because the background image will be assigned to product variants.

• Click Add Definition.

• Enter the following details:
  • Name: Background image
  • Type: Image (File)

• Click Save to create the metafield.

Adding Background Image to Product Variants

• Go to Products in Shopify Admin.
• Open the product where you want to add the background image.
• Scroll to the Variants section and select a variant.

• Find the Background image metafield.

• Upload the image that should appear as the background for that variant.
• Click Save.
• Repeat the same process and upload the appropriate background image for each variant.
• Now enable Variant Background Image in the Featured Product section from the Theme Customizer.

Featured Product Available Blocks

• Vendor: Displays the name of the product’s brand or supplier on the product page, helping customers easily identify the brand associated with the product.
  • Text Transform: Controls how the vendor name appears.
    • Default: Shows the vendor name in its original format.
    • Uppercase: Displays the vendor name in uppercase letters.
  • Color: Select the color style for the vendor text.
    • Body: Uses the default theme text color.
    • Highlight: Applies the highlight color to make the vendor name stand out.
• Title: Displays the name of the product prominently on the product page, helping customers quickly identify the product they are viewing.
  • Heading font weight: Controls the thickness of the product title text, allowing you to adjust how bold or prominent the title appears.
• Price: Displays the product’s pricing information on the product page, including the current price, compare-at price, and any discounts. This helps customers quickly see the product’s cost and any savings available.
• SKU: Displays the product’s Stock Keeping Unit (SKU) on the product page. This unique identifier helps both store owners and customers track and reference specific products efficiently.
• Description: Shows the product’s detailed description on the product page, helping customers understand the product features, benefits, and usage.
  • Number of Lines to Show by Default: Controls how many lines of the product description are visible initially. Customers can expand to see the full description if it exceeds the set limit.
• Separator: Adds a visual divider between blocks on the product page. This helps organize content and improve readability by clearly separating different elements.
• Variant Picker: Allows customers to choose between different product options such as size, color, or material.
  • Options Type: Select how product variants are displayed:
    • Button: Shows variants as clickable buttons, ideal for quick selection and visual clarity.
    • Dropdown: Displays variants in a compact dropdown list, suitable for products with many options.
  • Swatch Shape: You can change the shape of color swatches by going to Theme Settings → Swatches → Swatch Shape. This allows you to choose between round, square, or use default one.
  • For more detil about swatches click on More
  • For more details about swatches, refer to Shopify’s Option with swatches documentation .
  • You can also refer to Adding color swatches using category metafields for advanced customization.
• Inventory: Displays the product’s stock status on the product page. It shows messages like In Stock, Out of Stock, or Only 10 left, helping customers know product availability at a glance.
• Quantity Selector: Allows customers to choose the number of items they want to purchase directly on the product page, making it easy to adjust quantities before adding products to the cart.
• Add to Cart Button: Displays the primary action button on the product page, allowing customers to add products to their cart.
  • Show Dynamic Checkout Button: Enable this option to takes customers directly to the checkout page for faster purchase completion.
  • Show Dynamic Checkout Button: Enable this option to display a Dynamic Checkout button,which lets customers skip the cart and go directly to the checkout page for a faster and smoother purchase experience.
• Trust Badges: Displays payment icons, helping customers feel confident about making a purchase.
  • Heading: Set a title or heading for the trust badges section to give context, such as “Secure Payments” or “We Accept.”
  • Alignment: Choose how the trust badges are positioned on the page:
    • Left: Aligns the badges to the left side.
    • Center: Centers the badges horizontally.
    • Right: Aligns the badges to the right side.
• Share: Displays social media icons on the product page, allowing customers to easily share the product on platforms like Facebook, Twitter, Instagram, and more. This helps increase product visibility and reach.