Product Page

What Makes Emoll-Apario's Product Page Stand Out?

• Flexible Media Layouts: Choose from multiple media layouts like thumbnails on the left, right, or bottom.
  • Option to use stacked or slider layout.
• Rich Product Media Support: Showcase products with images, videos, and 3D media.
• Built-In Conversion Boosters:
  • Sticky Add to Cart bar (optional)
  • Dynamic Checkout Button (Buy it Now)
  • Stock indicators for urgency
  • Trust badges and delivery messages
• Interactive Features: Lightbox images, variant swatches, and quantity pickers.
• Pickup Availability: Display pickup options for local availability.

Customize Your Product Page

On the Product Page, you can configure how your product details are displayed, helping customers interact and purchase easily.

• Go to Online Store ? Themes
• Click Customize on Emoll-Apario theme
• Select Products ? Default product
• Adjust layouts, media, badges, and features
• Click Save

Settings Provided to Edit the Product Page

• Color Scheme: Control background, text, and accent colors.
• Enable Sticky Media/Content: Keep content visible while scrolling.
• Media Width:
  • Small
  • Medium
  • Large
• Media Layout:
  • Slider
  • Stack
• Hide Thumbnails on Mobile: Cleaner mobile UI.
• Hide Arrows on Mobile: Reduce clutter.
• Enable Sticky Add to Cart: Improve conversions.

Product Information Blocks

Product blocks help structure content clearly and improve the shopping experience.

• Vendor: Display brand name
• Title: Show product title
• Price: Dynamic price updates
• Separator: Add spacing
• Description: Product details
• Variant Picker:
  • Options Layout:
    • Inline
    • Stack
  • Variant Picker Type:
    • Button
    • Dropdown
  • Show Variant Image Instead of Color

• Size Chart:
  • Title
  • Icon
  • Desktop & Mobile images
  • Link to page
  • Attach to product option

• Quantity: Quantity selector
• Inventory:
  • In stock color
  • Threshold color
  • Out of stock color
  • Inventory threshold
• Pickup Availability
• Add to Cart:
  • Dynamic payment button
  • Gift card form

• Collapsible Tab:
  • Title
  • Description
  • Content

• Complementary Products: Show related or recommended items to increase average order value.

This is a great way to increase sales using Shopify Search & Discovery app.

• Step 1: Go to Shopify Admin.
• Step 2: Navigate to Apps ? Search & Discovery.
• Step 3: Click on Complementary Products.
• Step 4: Use the Search Bar to find the product for which you want to add complementary items.
• Step 5: Click on the product and select Add Complementary Products.
• Step 6: Search and select the products you want to recommend.
• Step 7: Click Save to apply the changes.
• Step 8: Open the Theme Editor and ensure the Complementary Products block is enabled in the Product Page.

Product Siblings Feature

The Product Siblings feature allows you to connect related products such as colors or styles and display them as swatches on the product page.

How to Set Up

• Go to Content ? Metaobjects
• Create "Product siblings"
• Add fields (Product, Color name, Color value)
• Create metafield and link it
• Assign to products

Enable in Theme

• Go to Theme Customizer
• Add Product Siblings block
• Adjust settings

Related Products (Product Recommendations)

The Related Products section displays product recommendations that are relevant to the current product being viewed. These recommendations help customers discover additional items and increase the chances of completing a purchase.

Related products are managed through Shopify's Search & Discovery app. You can manually choose complementary or related products for each product from the app dashboard.

Steps to Add Related Products

• Step 1: Go to Shopify Admin.
• Step 2: Open Apps ? Search & Discovery.
• Step 3: Click on Related Products.
• Step 4: Search for the product you want to configure.
• Step 5: Click Add Related Products.
• Step 6: Select the products you want to recommend.
• Step 7: Click Save.

Section Settings

• Color Scheme: Select the color style used for the section.
• Heading: Customize the section title displayed above the products.
• Heading Size: Control the size of the section heading.
• Number of Products to Load: Set how many recommended products should appear.
• Columns Per Row: Adjust how many products appear in a single row.
• Product Card Style: Choose the layout style used for product cards.
• Image Aspect Ratio: Control how product images are displayed.
• Show Vendor: Toggle vendor name visibility.
• Show Product Options: Enable quick variant options on product cards.
• Mobile Layout: Choose how products appear on mobile devices.

Recently Viewed Products

The Recently Viewed section automatically displays products that a customer has previously visited in the store. This helps users quickly return to items they were interested in and improves the overall shopping experience.

This section works dynamically using the customer's browsing history. The products displayed will change automatically depending on the products the customer has viewed during their visit.

Section Settings

• Color Scheme: Choose the color style used for the section.
• Heading: Customize the title displayed for the section.
• Heading Size: Adjust the size of the section heading.
• Image Aspect Ratio: Control the shape of product images.
• Number of Columns Per Row: Define how many products appear in each row.
• Mobile Layout: Set the number of columns displayed on mobile devices.
• Section Spacing: Adjust top and bottom spacing of the section.

How It Works

• Products are tracked automatically based on customer browsing activity.
• The section dynamically updates for each user.
• Only products viewed by the customer during their session will appear.
• If no products have been viewed, the section may remain hidden.