> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/collections-and-products-pages/product-page/product-information.md). # Product Information The Product Information section is the main area where customers view and interact with your product details. This section displays everything customers need to make a purchase decision, including product images, title, price, description, variant options, and add-to-cart buttons. You can customize the layout, add additional information blocks, and control how product media is displayed to create the perfect shopping experience for your customers.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. In the **page/template** selector, choose a **product page** (e.g., Default product) 3. Open **Sections** > **Product information**. 4. Make your changes, preview live, then click **Save**. {% endhint %} *** ### Settings #### Layout * **Sticky content**: When enabled, the product information stays visible at the top of the screen as customers scroll down the page. This helps customers always see important details like price and add-to-cart buttons. * **Full width**: When enabled, the section spans the full width of the browser window instead of being contained within the page width. This gives your product page a more immersive look. * **Colors**: Choose a color scheme for the section background and text. This affects the overall appearance of the product information area. #### Media * **Position**: Choose whether product images appear on the left or right side of the product information. This helps you balance the visual layout of your product page. * **Image ratio**: Control the shape of your product images. Options include landscape (wide), portrait (tall), square, or tall (extra tall). Choose the ratio that best showcases your products. {% hint style="info" %} For the best visual results, we recommend using product images with **consistent aspect ratios**.\ Using images that match (or are close to) the aspect ratios used in the product page gallery ensures that your product grid and gallery look clean and aligned. This prevents unwanted cropping, uneven spacing, or layout shifts, and gives your store a more professional appearance. {% endhint %} * **Width**: Set how much space the product images take up on the page. Options include small, medium, or large. Larger images give customers a better view of your products. * **Constrain to screen height**: When enabled, product images are limited to the height of the customer's screen. This prevents very tall images from making the page too long to scroll. * **Fit**: Control how product images fill their container. "Original" shows the full image without cropping, while "Fill" crops the image to completely fill the space. * **Media background color**: Set a background color for the area behind product images. This is useful if your images have transparent areas or if you want to create a specific visual effect. #### Gallery layout * **Layout**: Choose how product images are displayed. Options include stacked images, columns, thumbnails grid, or thumbnails slider. Each layout offers a different way for customers to browse through your product photos. * **Thumbnail slider position**: When using the thumbnail slider layout, choose where the thumbnail navigation appears. Options include left, bottom, or right of the main image. * **Place thumbnail slider over media**: When enabled, the thumbnail slider appears on top of the main product image instead of beside it. This saves space and creates a more compact layout. * **Slider buttons position**: Control where the navigation arrows appear on the thumbnail slider. Options include at the bottom of the slider or overlaid on top of the slider. #### Media interaction * **Zoom**: Choose how customers can zoom in on product images. Options include opening images in a lightbox popup, clicking and hovering to zoom, or no zoom functionality. * **Hide other variant media after one is selected**: When enabled, only images for the selected product variant are shown. This helps customers focus on the specific product option they're interested in. * **Loop video**: When enabled, product videos automatically restart when they finish playing. This keeps your videos playing continuously for customers viewing them. #### Product information * **Content width**: Control how wide the product information text area is. Options include large (more space) or small (more compact). This affects how much text fits on each line. #### Mobile settings * **Mobile layout**: Choose how product images appear on mobile devices. Options include 2 columns, media slider with thumbnails, or media slider only. This ensures your products look great on phones and tablets. * **Place thumbnail slider over media**: When enabled on mobile, thumbnails appear over the main image instead of below it. This creates a more compact mobile experience. * **Content width**: Set the width of product information text on mobile devices. Options include large or small to match your design preferences. #### Collapsible content settings * **Card style**: Choose the visual style for collapsible content sections like product details or specifications. Options include flat (no border), elevated (with shadow), or underline (with bottom border). * **Border width**: Set the thickness of borders around collapsible content sections. Higher values create more prominent borders. * **Border radius**: Control how rounded the corners are on collapsible content sections. Higher values create more rounded corners. * **Text style**: Choose whether collapsible section headings use body text style or heading text style. This affects the font size and weight of section titles. * **Content alignment**: Control how text is aligned within collapsible content sections. Options include left, center, or right alignment. *** ### Blocks The Product Information section includes many blocks that you can add, remove, and reorder to customize what information appears on your product pages. #### **Text** Add custom text anywhere on the product page to display promotional messages, disclaimers, or any additional information you want to highlight. * **Text**: Enter the text content you want to display on the product page. This can be plain text or formatted with basic styling. * **Style**: Choose how the text appears. Options include Body (regular text), Subtitle (slightly emphasized), or Uppercase (all capital letters for emphasis). #### **Title** Display the product title with optional styling and social sharing options. This helps customers identify the product and share it with others. * **Heading size**: Control the size of the product title. Choose from h5 (smallest) to h1 (largest) to match your design preferences. * **Heading underline**: When enabled, adds a decorative underline beneath the product title for visual emphasis. * **Show share button**: When enabled, displays a share button next to the product title so customers can easily share the product on social media. * **Share links**: Choose which social media platforms customers can use to share your product. Options include Facebook, WhatsApp, LinkedIn, SMS, Twitter, Email, Pinterest, and Link (copy link). #### **Price** Show the product price with options to display it in a styled container. This is essential information customers need to make a purchase decision. * **Container**: When enabled, displays the price inside a styled container box for better visual emphasis and separation from other content. * **Colors**: Choose a color scheme for the price block to match your design or create visual emphasis. #### **Inventory status** Display real-time stock information to customers to create urgency and help them make informed purchasing decisions. * **Text style**: Choose how the inventory text appears. Options include Body (regular text), Subtitle (slightly emphasized), or Uppercase (all capital letters). * **Low inventory threshold**: Set the number below which inventory is considered "low stock." When stock falls below this number, the low stock message will be displayed. * **Inventory count**: When enabled, shows the exact number of items available in stock alongside the status message. * **Use custom text**: When enabled, allows you to create custom messages for different inventory states instead of using the default messages. * **Inventory low stock custom text**: Enter a custom message to display when stock is low. Use "QUANTITY" in your text to automatically insert the inventory number (e.g., "Only QUANTITY left" becomes "Only 10 left"). * **Inventory in stock custom text**: Enter a custom message to display when items are in stock. Use "QUANTITY" to show the inventory count if desired. * **Inventory out of stock custom text**: Enter a custom message to display when items are out of stock. Use "QUANTITY" to show the inventory count if desired. {% hint style="info" %} Use `QUANTITY` to display the inventory quantity. For example, '*Only QUANTITY left*' will display '*Only 10 left*'. Inventory count settings will be ignored if custom text is used. {% endhint %} #### **Quantity selector** Allow customers to choose how many items they want to purchase. This block automatically respects quantity rules you've set for your products, including minimum, maximum, and increment requirements. This block has no additional settings. It automatically displays based on your product's quantity rules. #### **Variant picker** Let customers select product options like size, color, or style. This is essential for products with multiple variants and helps customers find the exact product they want. * **Style**: Choose how variant options are displayed. Options include Dropdown (traditional select menu) or Pills (button-style options that are more visual and easier to use). * **Swatch**: Control the shape of color swatches for variant options. Options include Circle (round swatches), Square (square swatches), or None (text only, no swatches). This setting only applies when you've configured swatches in your theme settings. * **Display in container**: When enabled, places the variant picker inside a styled container box for better visual organization. * **Display in collapsible content**: When enabled, places the variant picker inside a collapsible section that customers can expand or collapse. This helps save space on the page. * **Hide unavailable variants**: When enabled, variant options that are sold out or unavailable are completely hidden instead of shown as disabled. This creates a cleaner interface but may confuse customers if options suddenly disappear. * **Colors**: Choose a color scheme for the variant picker container to match your design. #### **Buy buttons** Display the add-to-cart button and optional dynamic checkout buttons. This is where customers complete their purchase, so it's one of the most important elements on your product page. * **Dynamic checkout buttons**: When enabled, displays quick checkout buttons like Apple Pay, Google Pay, or Shop Pay for customers who have saved payment methods. This can significantly speed up the checkout process and reduce cart abandonment. * **Gift card sending options**: When enabled, allows customers to send the product as a gift by adding recipient information, a personal message, and scheduling a send date. This is useful for gift card products. * **Buy buttons row**: When enabled, displays the add-to-cart and dynamic checkout buttons side by side in a row instead of stacked vertically. * **Show price in buy button**: When enabled, displays the product price inside the add-to-cart button for better visibility. * **Show icon in buy button**: When enabled, adds a shopping cart icon to the add-to-cart button for better visual recognition. #### **Description** Show the full product description from your product details in Shopify. This automatically displays the description you've entered in your product settings, giving customers detailed information about the product. This block has no additional settings. It automatically displays your product description from Shopify. #### **Custom liquid** Add custom Liquid code to create advanced customizations or integrate with third-party services. This is for advanced users who need to add custom functionality that isn't available through other blocks. * **Custom liquid**: Enter your custom Liquid code here. This code will be executed and displayed on the product page. Use this for advanced customizations, custom calculations, or integrating with external services. #### **Apps** Display content from installed Shopify apps. This block automatically appears when you have apps installed that can add content to product pages, such as product reviews apps, size guides, or other app integrations. This block has no additional settings. It automatically displays content from your installed apps. #### **SKU** Display the product SKU (stock keeping unit) for reference. This is useful for customers who need the product code for orders, returns, or customer service inquiries. * **Text style**: Choose how the SKU text appears. Options include Body (regular text), Subtitle (slightly emphasized), or Uppercase (all capital letters). #### **Collapsible row** Create expandable sections for additional product information like specifications, care instructions, shipping details, or FAQs. This keeps your page clean while still providing all necessary information. * **Heading**: Enter the title that appears on the collapsible section. Customers click this to expand or collapse the content. * **Row content**: Enter the detailed content that appears when the section is expanded. You can use rich text formatting including bold, italic, lists, and links. * **Row content from page**: Alternatively, select a page from your Shopify store to pull content from. The page content will override the heading and content settings above. * **Icon**: Choose an icon to display next to the heading. Icons help customers quickly identify different types of information. Options include various icons like check mark, truck, heart, lock, and many more, or None to display no icon. #### **Pop-up** Add a link that opens additional information in a pop-up window. Use this for detailed information that doesn't need to be visible all the time, like size guides, ingredient lists, or detailed specifications. * **Link label**: Enter the text that appears as the clickable link to open the pop-up. This is what customers will see and click. * **Heading**: Enter the title that appears at the top of the pop-up window. * **Content**: Enter the detailed content that appears inside the pop-up. You can use rich text formatting. * **Page**: Alternatively, select a page from your Shopify store to pull content from. The page content will override the heading and content settings above. * **Full width**: When enabled, the pop-up link spans the full width of the product information area instead of being inline with other content. * **Link style**: Choose how the pop-up link appears. Options include Link (text link only) or Text + icon (text link with a plus icon). * **Heading size**: Control the size of the heading inside the pop-up. Options range from h2 (smaller) to hxl (extra large). * **Text size**: Control the size of the body text inside the pop-up. Options include text-body-s (small), text-body (regular), text-body-l (large), or text-body-xl (extra large). #### **Drawer** Add a link that opens a side drawer with additional content. Drawers slide in from the side and are great for detailed information that customers can access without leaving the product page. * **Link label**: Enter the text that appears as the clickable link to open the drawer. This is what customers will see and click. * **Heading**: Enter the title that appears at the top of the drawer. * **Content**: Enter the detailed content that appears inside the drawer. You can use rich text formatting. * **Page**: Alternatively, select a page from your Shopify store to pull content from. The page content will override the heading and content settings above. * **Full width**: When enabled, the drawer link spans the full width of the product information area instead of being inline with other content. * **Link style**: Choose how the drawer link appears. Options include Link (text link only) or Text + icon (text link with a plus icon). * **Heading size**: Control the size of the heading inside the drawer. Options range from h2 (smaller) to hxl (extra large). * **Text size**: Control the size of the body text inside the drawer. Options include text-body-s (small), text-body (regular), text-body-l (large), or text-body-xl (extra large). * **Drawer width**: Control how wide the drawer is when it opens. Options include Small, Medium, Large, or X-large to match the amount of content you're displaying. #### **Product rating** Display customer ratings and reviews if you have a reviews app installed. Ratings help build trust, provide social proof, and can significantly increase conversions by showing that other customers have purchased and enjoyed your products. This block requires a product reviews app to function. The block will automatically display ratings from your reviews app once installed. The rating style can be customized in your theme's Product Cards global settings. #### **Complementary products** {% hint style="info" %} To configure and use this block, make sure to install and activate the **Search & Discovery app** in your Shopify store. {% endhint %} Show products that pair well with the current product. These recommendations are managed in Shopify's Search & Discovery app and help customers discover related items, potentially increasing your average order value. * **Heading**: Enter the title for the complementary products section. The default is "Pairs well with" but you can customize it to match your brand voice. * **Collapsible row**: When enabled, displays the complementary products inside a collapsible section that customers can expand or collapse. This helps save space on the page. * **Text style**: Choose how the heading appears when not in collapsible mode. Options include Body (regular text style) or Heading (heading text style with larger, bolder font). * **Heading size**: When using heading text style, control the size of the heading. Options include h5 (smallest), h4 (medium), or h3 (larger). * **Icon**: Choose an icon to display next to the heading. Options include various icons or None to display no icon. * **Product count**: Set how many complementary products to display. You can show between 1 and 10 products. More products give customers more options but take up more space. * **Slider buttons position**: When multiple products are shown, control where the navigation arrows appear. Options include Above grid (buttons appear above the product slider) or Over grid (buttons appear overlaid on the slider). * **Image ratio**: Control the shape of product images in the complementary products section. Options include Portrait (tall images) or Square (equal width and height). * **Vendor**: When enabled, displays the product vendor name on each product card. * **Show Swatches**: When enabled, displays color or option swatches on product cards, making it easier for customers to see available variants. * **Quick add**: When enabled, adds a quick add button to product cards that allows customers to add products to their cart without visiting the product page. * **Quick view**: When enabled, adds a quick view button to product cards that opens a popup showing product details without leaving the current page. #### **Icon/Image with text** Display up to three icons or images with text to highlight key product features or benefits. Use this to showcase things like free shipping, easy returns, product certifications, or warranty information. * **Layout**: Choose how the icons/images and text are arranged. Options include Horizontal (icon and text side by side) or Vertical (icon above text). * **Icon size**: Control the size of the icons. Options range from 2rem (small) to 10rem (extra large) to match your design needs. * **Icon text font type**: Choose whether the text uses Heading font style (larger, bolder) or Body font style (regular text). * **Text size (heading)**: When using heading font type, control the size of the text. Options range from h5 (smallest) to h1 (largest). * **Text size (body)**: When using body font type, control the size of the text. Options include body-xs (extra small), body-s (small), body (regular), body-l (large), or body-xl (extra large). * **Icon/Image 1**: Configure the first icon/image pairing. Choose an icon from the available options or upload a custom image. If an image is selected, the icon will be hidden. Enter a heading for this pairing, or leave it blank to hide this pairing entirely. * **Icon/Image 2**: Configure the second icon/image pairing with the same options as the first. * **Icon/Image 3**: Configure the third icon/image pairing with the same options as the first. #### **Separator** Add a visual divider line between sections to create clear visual breaks and improve the organization of your product page. * **Separator height**: Control the thickness of the separator line. Options range from 1px (thin) to 4px (thick). * **Separator margin left**: Add space to the left of the separator. Options range from 0px (no margin) to 250px in 5px increments. * **Separator margin right**: Add space to the right of the separator. Options range from 0px (no margin) to 250px in 5px increments. #### **Spacing** Add blank space between elements to improve the layout and readability of your product page. This helps create breathing room and better visual hierarchy. * **Spacing height**: Control how much vertical space is added. Options range from 0px to 50px in 5px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. #### **Countdown Timer** Display a countdown timer for limited-time offers, sales, or special promotions. This creates urgency and can encourage customers to make a purchase decision faster. * **End date**: Enter the date when the countdown should end. Format: YYYY-MM-DD (e.g., 2026-12-01). * **End time**: Enter the time when the countdown should end. Format: HH:MM:SS in 24-hour format (e.g., 12:00:00 for noon). * **Text to show when countdown ends**: Enter the message that appears when the countdown reaches zero. This can include rich text formatting. Default: "Event has ended!" * **Number size**: Control the size of the countdown numbers (days, hours, minutes, seconds). Options range from h3 (smaller) to hxxl (extra large). * **Label size**: Control the size of the labels below the numbers (Days, Hours, Minutes, Seconds). Options range from h5 (smallest) to h2 (largest). * **Container**: When enabled, displays the countdown timer inside a styled container box for better visual emphasis. * **Colors**: Choose a color scheme for the countdown timer to match your design or create visual emphasis. *** ### Tips * Use sticky content for important product information like price and buy buttons so customers can always see them while scrolling through product images and details. * Test different gallery layouts to find the one that best showcases your products. Products with many images often work well with thumbnail sliders, while products with fewer images may look better in a stacked layout. * Add collapsible rows, pop-up or drawers for detailed information like specifications, care instructions, or shipping policies. This keeps the page clean while still providing all the information customers need. * Use the variant picker to make it easy for customers to select product options. Consider using button-style pickers with swatches for color options, as they're more visual and easier to use than dropdowns. * Enable dynamic checkout buttons to let customers check out faster using saved payment methods like Apple Pay or Google Pay. This can significantly reduce cart abandonment. * Add complementary products to encourage customers to purchase related items, which can increase your average order value. * Use inventory status to create urgency when stock is low. This can encourage customers to make a purchase decision faster. * Test your product page on mobile devices to ensure images and information display well on smaller screens. Mobile shopping is very common, so a good mobile experience is essential. * If your gallery uses portrait images (e.g., 3:4), try to upload all product images in the same ratio. Similarly, if you prefer square images (1:1), keep them consistent across your catalog. * Pair “Icon/Image with text” to quickly convey benefits (e.g., Free shipping, Easy returns).