Maximize - Product page

on Oct 03, 2025

1. What is Product information? Product information is the essential content displayed on a product page, providing customers with details about the product's features, specifications, dimensions, materials, and more. It helps shoppers understand what the product is, what it offers, and whether it meets their needs or preferences. Additionally, Product information may include images, videos, reviews, and other media to offer a comprehensive view of the item. This information is crucial for customers to make informed decisions and feel confident about their purchases. 2. Section Components Section Displays essential product information. Available blocks Displays the name of the product. Shows the product's price. Displays the name of the product vendor. Shows the average customer rating and review stars. Indicates if the product is in stock, low stock, or out of stock. Displays the product's unique identifier code. Shows tags like “Sale”, “New”, or “Featured”. Allows customer to shop for sibling products in the same page. Allows customer to shop for complementary products in the same page. Displays a tab with icon and text for additional information. Allows you to add custom text content, such as promotional messages or additional product details. Displays a hyperlink that, upon clicking, opens a popup with customizable text or a linked page’s content. Inserts a horizontal line to visually separate content. Adds an empty space or adjusts padding to control spacing. Allows advanced customization by inserting your own HTML code. Displays a titled image. Displays additional product customizations (e.g., engraving). Highlights a key feature with an icon (e.g., “Free Shipping”). Presents short information points with accompanying icons. Displays accepted payment icons (e.g., Visa, PayPal). Allows customers to subscribe to your email address. Displays a collapsible table with up to 2 columns for detailed info (e.g., components or ingredients). Displays a video that can be uploaded or embedded from a URL. Displays a link to a connected collection. Offers an option for gift wrapping service. Display non-selectable product variations (size, color, etc.). Displays the estimated product’s arrival time. Allows customers to choose the amount of product to be added to cart. Allows customers to sign up for notifications when an out-of-stock product is available again. Enables customers to add the product directly to cart. Allows for flexible fee charging, including options for extra services like installation and assembly. 3. Location & Setup Go to “Online Store” > “Themes” > ”Customize”. Click on the Homepage dropdown menu > Collection > Default product. Enable Product information section to display it (this section is enabled by default). 4. Highlight features Customizable Information Display: Choose exactly which product details to show (title, price, rating, inventory status, etc.) by toggling blocks on/off. Direct Purchase Option: Enable Buy buttons to allow instant adding to cart without navigating to the product page. Back-in-Stock Alerts: Increase conversion by allowing customers to sign up for notifications when out-of-stock items are replenished. 5. Common Use Cases 🤔 How to customize the Product information section's overall look? STEP 1: Click on the Product information section to open its settings panel. STEP 2: Choose how the main contents are shown Enable Sticky content on desktop. Enable Make primary content center. STEP 3: Set up the media settings In the Media setting group: Media setting What to configure Image ratio Choose Square (1:1), Landscape (4:3), Portrait (2:3), Wide (16:9), or Standard (3:4). Navigation buttons style Set the style for media navigation buttons. Zoom effect Enlarge (default): Opens a full-screen pop-up of the image. Magnifier: Shows a zoomed-in view on hover. None: No zoom effect. STEP 3: Setup the section layout In the Section layout setting group: Choose Section width: Full Width, Page Width, or Full Width Padded. Drag to adjust Top Padding and Bottom Padding (0–100px). STEP 4: Setup the other settings SEO: Enable Enable microdata schema for SEO. Breadcrumbs: Enable Show breadcrumbs to improve navigation. Sticky add-to-cart: Enable Show quantity selector and choose a style. STEP 5: Click “Save” when done. 🤔 How to set up a block in the Product information section? The section contains over 20 blocks. Here are the simple steps to set them up: STEP 1: Search for Product information (this section is enabled by default). STEP 2: Add the blocks to show the information you want — Click on “Add”. Here’s how to set up each of the block: Block name How to set it up? Product title Adjust Heading size (Small, Medium, Large). Price Show tax/shipping info, adjust text size. Configure sale label with dynamic codes like sale, sale_amount, qty, or price. Vendor name Link vendor to collection or select a page to open in a popup Paste a custom link and choose to open in a new window. Product rating Install a product rating app to display ratings. Inventory status Automatically displays stock status (no settings). SKU/Barcode Automatically displays the product’s SKU or barcode (no settings). Labels and badges Set label position (inline or on product media). Gift wrap Add gift wrapping label and set light/dark color icons. Variant picker Choose Type (Dropdown, Button). Enable color swatches to display color swatches for color variants. Customize size chart with an option to link to a page. Buy buttons Toggle quantity selector, dynamic checkout, pickup availability. Customize pre-order labels/messages and button style. Description Choose tab or inline layout; add product description; Customize icon and expandable text labels. Text Enter text; use [brackets] for highlights. Set text transform, default content height, and “Read more” labels. Separator Inserts a dividing line (no settings). Space Adjust spacing. Custom HTML Insert custom code for advanced features. Back in stock alert Set heading, text, button label, and success message. Toggle shows only when product is unavailable. Customizable options Add text field, dropdown, file upload, date, etc. Set customizable options according to the chosen option type. Featured icon Add up to 5 feature points with icon, heading, and text. Configure display rules, sizes, borders, color schemes, and alignment. Each feature can include custom icons, headings with optional links, and descriptive text. Text with icon Choose icon, set icon size, enter text (with highlight options). Customize colors for light/dark modes. Payment methods Add heading and descriptive text. Enter payment method codes (e.g., apple_pay, google_pay) to custom payment icons. Sibling products See the “How to set up the Sibling products block?” use case below. Complementary products See the “How to set up the Complementary products block?” use case below. Collapsible tab Show a tab with custom contents. Can include icons/headings Can enable Show in tab to be always opened. Pop-up link Show a clickable text that opens a pop-up with custom contents or linked page contents. Choose a style between Primary, Secondary and Text link. Image Upload/select Image or connect via Link; can include an Image Title. Newsletter signup Add heading and descriptive text. Table of information Show a table with details; optional extra details at the bottom; Can be shown as a tab by enabling Show in tab with an option to be always opened. Can include custom icons, headings and descriptive text. Video Upload a video in Video with an option to Show sound control. Embed a video by providing URL (only shown if there is no uploaded video). Set the video to autoplay and mute by enabling Enable video autoplay. Can include Video alt text, Heading and Caption. Collection link Add label; customize light/dark mode in Color. Estimated delivery time See the “How to set up the Estimated delivery time block?” use case below. Quantity selector Display a quantity selector. Additional fee See the “How to set up the Additional fee block?” use case below. STEP 3: Click “Save” when done. 🤔 How to set up the Sibling Products block? The Sibling product block lets you group related products and display them as swatches on the product page. Unlike Shopify’s default variants, each sibling product has its own images, details, and price. This also helps with inventory management, cross-selling, and using custom product templates for each variation. Here are simple steps to set it up: STEP 1: Create individual products In Shopify admin, click on the Products tab > “Add product” to create new products. STEP 2: Put those products into a collection Still in Shopify admin, go to Products > Collections Click the “Create collection” button and add all sibling products you created in Step 1. STEP 3: Create 2 product metafields Still in Shopify admin, click on Settings > Metafields and metaobjects > Products > Add definition to create product metafields. You will need to do this process twice to create 2 different product metafields: # Name Namespace and key Select type Why do you need this metafield? 1 Sibling type custom.sibling_type Must be Single line text exactly. This defines what options customers use to switch between siblings, serving as a “variant picker”. 2 Sibling collection handle custom.sibling_collection_handle Must be Single line text exactly. This helps to identify the individual products that are a part of the sibling. STEP 4: Copy the collection’s URL handle Go back to the collection that you created at Step 2 (Products > Collections > click on your collection). Scroll all the way down, and find the Search engine listing group. Click on the pencil icon. Then, copy the URL handle. STEP 5: Enter the collection’s URL handle into the “Sibling collection handle” metafield Now, remember the individual products you created in Step 1? Again, go to Products. Check the boxes of the products you want to be in the sibling. Choose “Bulk edit”. Click on “Columns” in the top right corner. Scroll to find Metafields, tick on “Sibling collection handle” (or search Sibling collection handle). Paste the URL handle you copied in Step 4 above into the Sibling collection handle column. Click “Save”. STEP 6: Enter the type into the “Sibling type” metafield Just like Step 5 above, you need to: Go to Products. Check the boxes of the products. Choose “Bulk edit”. Click on “Columns” in the top right corner. Scroll to find Metafields, tick on “Sibling type” (or search Sibling type). Enter the text into the metafields. Click “Save”. For example, your products are shoes with the same design but made in different countries such as UK, USA and Belgium. So here, this “Sibling type” metafield is where you enter the UK, USA, and Belgium text. STEP 7: Add the Sibling products block in Theme Editor In Shopify admin, go to Theme Editor by clicking on Online Store > Themes > “Customize”. Go to the Product page (click on the Homepage dropdown > Products > Default products). Under the Product Information section, click “Add block”. Find and add the Sibling products block. STEP 8: Set up important settings of the Sibling products block in Theme Editor Still on that page at step 6, you can see the Sibling products block setting panel, and there are 3 most important information to fill in: Option name: Enter any texts you want to show as the labels for the type. For example: color, and pattern. Collection handle metafield: Enter “custom.sibling_collection_handle” (which is the Namespace and key of the Sibling collection handle metafield). Option value metafield: Enter “custom.sibling_type” (which is the Namespace and key of the Sibling type metafield). Don’t forget to click “Save” when you finished! STEP 9: Set up other settings of the “Sibling products” block in Theme Editor Still in the Sibling products block setting panel, these settings may be useful to you: Linking option: Load sibling products' content only: Choose when the siblings are of the same template, and the template content is mostly static. Redirect to sibling product pages: Choose when each sibling has distinct rich content (e.g. product reviews) to navigate users directly to the sibling product page. Option display type: Choose to show the type picker as a Button or a Dropdown. STEP 10: Click “Save” when done. 🤔 How to set up the Complementary products block? Complementary products are items that go well together with a customer's main purchase. This can lead to increased sales and higher customer satisfaction as it helps shoppers discover related products they may be interested in. STEP 1: Install the Shopify Search & Discovery app and follow Shopify’s guide to add complementary products. STEP 2: Add the block in Theme EditorTheme Editor > Product page > Product Information section > Add block > Add Complementary products. STEP 3: Set up the first part of the block Click on the Complementary products block, navigate and set up these settings in the first part of its setting panel: Heading: Customize the title or heading for the section. Maximum products to show: Set the maximum number of complementary products to display. Specify the number of products shown per page if pagination is enabled. Number of products per page: Additional settings that apply when using a carousel. Enable carousel on desktop: Turn on or off the carousel mode for this block on the desktop. Enable swipe on mobile: Let customers swipe through this block on mobile. STEP 4: Set up Product card group Still in the Complementary products block setting panel, navigate and set up these settings in the Product card setting group: Image ratio: Adjust the aspect ratio of the product images. Show vendor: Choose whether to display the vendor name for each complementary product. Show product rating: Decide whether to show the product ratings alongside the complementary products. STEP 5: Click “Save”. 🤔 How to set up the Estimated delivery time block? Estimated delivery time (EDT) is a block designed to enhance the shopping experience by providing customers with an estimated timeframe for order delivery. Thanks to this, admins can establish delivery time parameters for all orders and all products. It also considers cut-off times for daily shipping operations, ensuring real-time updates based on the current time. Here are simple steps to set up this block: STEP 1: Setup EDT in general or for specific productsFollow this guide. STEP 2: Add the block in Theme EditorTheme Editor > Product page > Product Information section > "Add block" > Choose Estimated delivery time. STEP 3: Set up the message Click on the Estimated delivery time block, navigate and set up these settings in the setting panel: Customize the EDT notification message for customers in the Message field. ⚠️ Note: To customize the message for each product in this block, you can create a metafield with the key 'custom.delivery_date_message' and type 'Rich text'. Enable Enable tooltip setting and customize the Tooltip content field to provide additional information with a tooltip. STEP 4: Set up colorsCustomize text and background color for light and dark mode. STEP 5: Click “Save”. 🤔 How to set up the Additional fee block? The Additional fee block lets you charge flexible fee, including options for extra services like installation and assembly. STEP 1: Create a product to represent the feeShopify admin > Products > "Add product". Do not track inventory. STEP 2: Add the block in Theme EditorTheme Editor > Product page > Product Information section > Add block > Choose Additional fee block. STEP 3: Set up the product Select the product created in Step 1 in Fee charging product setting. Optionally apply to a collection, or add alternative title. Enable Show price to display the selected product’s original price. STEP 4: Set up options & button In the Option 1 setting group, choose an Option style and fill the Option note if necessary. Repeat for Option 2 and Option 3. In the Button setting group, choose an Button style and fill the Button label. STEP 5: Click “Save”. Need help? Contact our support team at Omni Themes Support.

Product recommendations

on Oct 03, 2025

1. What is Product recommendations section? The Product recommendations section suggests items tailored to users based on browsing history, past orders, and product data. It enhances user experience with personalized suggestions, driving engagement and increasing sales. 2. Section Components Section Suggest items for users based on their shopping behavior. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Click on the Homepage dropdown menu > Product > Default template. Search for Product recommendations. Enable to display it. 4. Core Features Personalized suggestions: Display items tailored to each user's interests based on their recent activity. Customizable layout: Freely customize the section elements to fit your store's branding. 5. Common Use Cases 🤔 How to set up Product recommendations section? Want to add and set up Product recommendations section? Here's how: STEP 1: Enable the section Enable to display the Product recommendations section. STEP 2: Customize the general display Click on the Product recommendations section to open its settings panel and customize: Add a Heading to the section (default: You may also like). Set the Maximum products to show in the section (2 to 10). STEP 3: Customize the product card's display Scroll down to Product card setting group, and you can customize these: Show vendor: Toggle to show the product's brand or supplier name. Show product rating: Toggle to show product star ratings, but this requires integration with a rating app. Show Quick View button: Toggle to allow customers to preview product details without leaving the page. STEP 4: Click "Save". 🤔 How to enable Carousel for the Product recommendations? Carousel is a great way to showcase multiple recommended items in a scrollable, space-saving format. To enable it, here's how: STEP 1: Open the settings Click on the Product recommendations section. STEP 2: Enable carousel Find the Carousel setting group, then: For desktop 🖥️: Turn on Enable carousel on desktop. For mobile 📱: Turn on Enable swipe on mobile. Set the time for each slide to automatically change: Adjust Auto-play. STEP 3: Click "Save" when done. 🤔 What customization options can you give your Product recommendations? Option How to set it up? ✨ Change color scheme Click on the Product recommendations section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the heading size Click on the Product recommendations section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Product recommendations section, find and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Product recommendations section, find and choose the Heading alignment to be Left, Right, or Center. ✨ Change the number of columns and block spacing Click on the Product recommendations section, scroll down to Desktop layout 🖥️ and Mobile layout 📱, and customize your preferred settings. ✨ Change the section width, add padding, or add a divider Click on the Product recommendations section and scroll down to the Section layout group, and you will be able to change those settings. Need help? Contact our support team at Omni Themes Support.

Maximize - Product page