Product information

What is the product information section?

Showcase a single highlighted product with full customization options, including layout, media settings, pricing, badges, and call-to-action buttons. This section is designed for maximum flexibility, ensuring an engaging and visually appealing product display.

This section is included by default in the product template.

General section settings

Within this section, you'll find common settings like section headers, containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.

Section Settings
‍

General

• Make Content Sticky (Desktop): Keeps the product info fixed while scrolling.
• Spacing Between Blocks: Adjust spacing between content blocks on desktop (10-50px) and mobile (5-30px).

Media Settings

• Media Position (Desktop): Display product images on the left or right.
• Media Size (Desktop): Choose small, medium, or large product images.
• Media Layout (Desktop): Configure thumbnails as left, right, bottom, hidden, or a grid layout (1 or 2 columns).
• Carousel Transition: Select slide or fade for product image transitions.
• Image Zoom: Choose between no zoom, lightbox, or an inner zoom circle.

Video Settings

• Enable Video Looping: Automatically loops product videos.
• Enable Video Autoplay: Videos play automatically (muted).

Design & Colors

• Color Scheme: Set the section’s color theme.
• Padding: Adjust top and bottom padding for desktop (0-100px) and mobile (0-100px).
• Rounded Corners: Apply rounded edges to the section.

Visibility & Layout

• Show on Desktop/Mobile: Enable or disable section visibility on specific devices.

Block Settings
‍

Countdown Timer

Create urgency by displaying a countdown for sales or promotions.

• Heading: Customizable text above the timer (e.g., "Hurry! Sale ends in:").
• Hide Timer When Date Elapses: Automatically hide the timer after expiration.
• Background Color: Customize the timer’s background.
• Gradient Background: Optionally apply a gradient effect.
• Text Color: Adjust the countdown text color.

Product Ratings

Display customer ratings from a Shopify app.

• Info: Ratings require a product review app.
• Setup: Follow Shopify’s rating setup guide.

Badges

Highlight product features using custom badges.

• Info: Use metafields to add labels like "Bestseller", "Limited Edition", or "Organic".
• Setup: Follow this custom label guide.

Collapsible Tab

Add additional product details in an expandable section.

• Tab Heading: Customize the tab title (e.g., "Care Instructions").
• Icon: Choose an icon to display next to the tab (e.g., "Info", "Truck", "Checkmark").
• Content: Add text, images, or formatted details.
• Content from Page: Pull content from an existing Shopify page.
• Open by Default: Expand the tab by default when the page loads.

Size Chart

Provide a sizing guide for customers.

• Position: Display as a separate block or next to the size selector.
• Option Name: Define the variant name related to size (e.g., "Size").
• Chart Content: Link to a Shopify page with the size chart.
• Modal Color Scheme: Customize the popup style.

Ask a Question

Add a contact button for customer inquiries.

• Position: Show as a separate block or next to social sharing icons.
• Info: The form directs messages to the store’s email.

Complementary Products

Suggest related products to encourage upselling.

• Heading: Customize the section title (e.g., "Complete the Look").
• Maximum Products to Show: Limit the number of recommended products (1-10).
• Setup: Requires the Shopify Search & Discovery app. Learn more.

Inventory Status

Show stock levels or availability messages.

• Info: Configure rules in Theme Settings → Product Inventory.

Shipping & Policies

Provide delivery, discount, and return details.

Delivery Details

• Icon: Choose an icon (e.g., "Truck", "Checkmark", "Mail").
• Content: Add delivery time estimates (e.g., "Ships in 3-5 days.").

Discount Details

• Icon: Choose an icon (e.g., "Percent", "Dollar", "Discount").
• Content: Show promo codes (e.g., "Use code WELCOME15 for 15% off.").

Return Details

• Icon: Choose an icon (e.g., "Box", "Return", "Truck").
• Content: Describe return policies (e.g., "Free returns on orders over $150.").

Sharing Buttons 

Allow customers to share products on social media.

• Show Label: Display a text label (e.g., "Share this product").

Pickup Availability 

Show local pickup options for in-store collection.

• Background Color: Customize the section’s background.
• Drawer Color Scheme: Adjust the appearance of the pickup availability popup.
• Setup: Configure in Shopify’s local pickup settings. Learn more.

Payment Installments 

Display installment payment options like Afterpay or Klarna.

• Setup: Shopify automatically pulls installment info from payment providers.

Trust Badge 

Add a security or guarantee message (e.g., "Safe & Secure Checkout").

• Heading: Customize the title (e.g., "Secure Payments").
• Heading Size: Adjust size (small, medium, or large).
• Alignment: Choose left, center, or right alignment.
• Image: Upload a custom badge (e.g., SSL Secure Checkout).
• Image Size: Set to full or custom.
• Max Width: Define image width (100-700px).

Custom Code 

Insert HTML or Liquid code for advanced customizations.

• Custom Code Field: Enter any custom HTML, CSS, or Liquid snippets.

Rich Text 

Add custom text content to the product page.

• Content: Enter formatted text, lists, or details.

Image Block 

Display an image within the product content area.

• Image Picker: Upload an image.
• Size: Choose full or custom.
• Max Width: Adjust width (100-700px).

Button Block 

Add a call-to-action button anywhere in the section.

• Label: Customize the button text (e.g., "Learn More", "Shop Now").
• Link: Set the button URL.
• Style: Choose primary, outline, or link button styles.
• Show Icon: Add an icon inside the button.

Divider Line 

Separate elements visually with a horizontal line.

• Height: Adjust the divider thickness (1-20px).

Color: Choose the divider color.