Product page

Product page

Product recommendations

1. What is the Product Recommendations? The Product Recommendations section dynamically displays products that customers may also like, based on their browsing behavior, their orders, and the product information. 🔍 For more information, take a look at the guide about Related products.   2. How to set up the Product Recommendations? If you don’t know where to start with your Product recommendation section, simply follow these steps: Step 1: Install Search & Discovery application: Before starting with the theme, you will need to install the Shopify Search & Discovery application from the Shopify app store. By default, the app will auto-generate the recommended products based on each customer’s viewing or buying history, but you can manually add, remove, and edit this list to match your preferences within the app settings. 🔍 For more details, check out this guide from Shopify. Step 2: Show the Product Recommendations section: In Theme Editor, you need to: Click on the Home page drop-down menu, then select Product page. Under Template, find the Product Recommendations section. By default, this section is hidden, click on the Eye button to unhide it. Step 3: Adjust the numbers of products shown: Click on the Product recommendations section to open its settings panel. Then, scroll down to find and adjust the Maximum products to show (from 2-10). Step 4: Customize the overall look: Enter Heading, but some words inside a [] bracket to add the heading highlight effect. Change the Background color. Step 5: Click “Save”  when done. 3. How to make your Product recommendations carousel? Step 1: Click on the Product recommendations section to open its settings panel. Step 2: Scroll down to the Carousel setting group. Step 3: For desktop: Turn on the Enable carousel on desktop. For mobile: Turn on the Enable swipe on mobile. (Optional) Turn on "Enable next/previous arrow on mobile" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile. Step 4: Click “Save”  when done. 4. How to change the information shown for each product card? Step 1:Click on the Product recommendations section to open its settings panel. Step 2:Scroll to the Product card options group. Step 3:From here, you can customize the following: Show vendor: Toggle this option on/off to display or hide the product vendor name. Show product rating: Turn this option on/off to display star ratings for products.  ⚠️ Note: To enable product ratings, ensure you have a product rating app installed and set up in your store. Show highlighted attributes: Turn on/ off to show the icons at the bottom of the product cards. To learn how to set it up, check out this Highlighted icons on product cards guide. Show Quick View button: Turn on/off to enable or disable the Quick View function. Step 4:Click “Save”  when done. 5. How to set the number of columns for Product Recommendations? Step 1:Click on the Product recommendations section to open its settings panel. Step 2:Scroll down to the Layout settings group. Step 3:Adjust the following options to set the number of columns: Desktop columns: Use the dropdown or slider to choose the number of product columns displayed on desktop (options typically range from 2 to 5). Mobile columns: Use the dropdown or slider to select the number of product columns displayed on mobile (commonly 1 or 2). Step 4:Click “Save”  when done.

Product page

Pre-order product

1. What are Pre-order Products? Pre-order Products allow customers to purchase items that are currently out of stock or yet to be released. Instead of seeing a typical "Out of Stock" message or hiding the products from the storefront, customers can place an order in advance, securing the product once it becomes available. This feature is particularly useful for managing inventory, gauging demand, and keeping customers engaged even when a product isn't immediately available. 2. How to show the pre-order status on the product card, cart, and checkout pages Step 1: Enable Pre-order Feature: Navigate to Theme Settings > Products > Pre-order. Enable the Pre-order option by selecting from the following logic: Yes: All products will display a "Pre-order" button on the product card, product page, quick view, featured product, and in the product property. No: No product will display the "Pre-order" button in any location. When product is Out of Stock: Products that are i) out of stock and ii) have the "Track Quantity" and "Continue Selling When Out of Stock" options enabled will display the "Pre-order" button. Step 2: Apply Pre-order to Specific Products or Collections You can choose to apply the pre-order settings to specific Products or Collections: If neither is selected, the pre-order setting applies to all products meeting the above criteria. If both are selected, the pre-order setting applies only to the selected products and collections as long as they meet the above criteria. Step 3: Customize Pre-order Button Label & Cart message Add a Card Button Label configuration to customize the label of the pre-order button on product cards. The default label is "Pre-order". Add a Pre-order Cart Message configuration to display a message in the cart or mini-cart for pre-ordered products. The default message is "Ships in 2 weeks". The message will appear in the product property section in the format: Preorder: [message]. In the product page: In the product card: In the mini cart: Step 5: Add Pre-order Label Block Go to the Overlay group > Product Labels & Badges section and add the block Pre-order. This block will have similar configuration options as the Sale Label block. You can edit the label text, choose an icon to display next to the heading, and adjust the position of the label on the product cards. Only one Pre-order block can be added.

Product page

Product description

1. What is the product description? A product description provides an overview of a product's features, benefits, and key selling points. It is typically used to replace the standard description block in product information when the description is lengthy or contains rich content.  Well-crafted product descriptions can help to attract customers, increase sales, and enhance the overall shopping experience. 2. How to modify the width of the description? By default, the description will be displayed within the page width. To modify the width of the description, follow these steps: Navigate to the "Desktop layout" settings. Look for the "Content width" option. Adjust the custom width for the content block using a percentage relative to the page width. This will result in a more compact display of the description. Optionally, enable the "Make section full width" option to allow the content to span the entire width of the section. 3. How to change the text size of the description? To change the text size of the description, you can follow these steps: Add a custom heading for the section if necessary. You can configure the alignment and size of the heading according to your preference. Adjust the overall text size using the Text size configuration. This will affect the size of the text within the description. Additionally, Line spacing configuration controls the spacing between two lines of text within the description. Additionally, you can customize the padding, style, and other settings to further enhance the appearance of the description. Conclusion: By customizing text size, alignment, and padding, users can create visually appealing descriptions that effectively communicate the unique features and benefits of the product.

Product page

Product specifications

1. What is product specification? Product specifications refer to detailed information about a product's features, components, measurements, or other relevant details. This comprehensive overview is particularly suitable for products with complex structures or compositions, such as materials, dimensions, nutritional information, or any other relevant metrics.  These specifications serve as a valuable resource for consumers seeking specific details about a product before making a purchase. 2. How to show product specifications in the table? a) Using Plain Text: Within the section, add a "Specs" block. Configure the following settings in the block: Optionally add a custom icon using SVG code. Contact support for assistance with custom SVG code. Enter the title for each row of specifications. Enter the specific details or values for each row. The row titles and contents will be displayed in the table format. This method is suitable for scenarios where multiple products share the same specifications and values. b) Using Product Metafield Values: First, create a product metafield following Shopify's guideline and assign value(s) to the metafield.  Within theme editor, under the section, add a "Product Metafield Values" block. Add a row title for each specification. Add the corresponding metafield value as row content.  This method is applicable when different products have different specifications. Please note that each block can show one metafield's value(s). You can use Shopify's bulk update feature in the admin panel to mass update values for this metafield. Additionally, all types of metafields can be used here. 3. How to set up the specifications table? To set up the specifications table, you can configure the following main settings in the section settings: a) Heading & Text Enter the title for the specifications table. Adjust the size of the heading text. Choose the appropriate HTML tag for the heading. Align the heading text to the left, center, or right. Add any additional text or descriptions related to the specifications. b) Optional image Add an image to accompany the specifications table. Customize the image specifically for mobile devices. Choose the style or layout for displaying the image. c) Layout Specify whether you want the specifications table to have one column or two columns. Adjust the height of the image on desktop devices. Enable or disable the section divider to separate this section visually from others. Set padding to control the spacing around the specifications table. Choose colors in Style settings. Overall, a well-structured specifications table enhances the understanding of product attributes and aids in facilitating informed purchasing decisions for customers.

Product page

Product Information

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. This post will walk you through the steps to set up the product information section, allowing you to personalize your product page. 2. How to set up the Product information section? a) How to enable image zoom? In Theme Editor, navigate to the Product page > Product information section > toggle on Enable image zoom. Then, choose a Zoom effect you want: Option name How does it zoom? Enlarge (default value) When clicking on the image ➜ a full-screen pop-up of only that image will show, like when viewing a larger version of a product image. Magnifier When hovering over the image ➜ a zoomed-in view appears, like when using a magnifying glass to see details. Image Gallery When clicking on the image ➜ a full-screen pop-up with all product images displayed as a gallery will show.   b) How to enable video looping? To enable video looping, you first need to ensure that the video autoplay setting is enabled. Once that's done, you can activate looping by checking the "Enable video looping" option in the settings.    Note: When looping and autoplay are enabled, the video will automatically mute. Customers can manually unmute the video using the video player controls if they wish to hear the audio. c) How to show breadcrumbs on the product page? To show breadcrumbs on the product page, you can: Enable the “Show breadcrumbs” setting to display breadcrumbs. Choose whether to include borders around the breadcrumbs for a defined appearance. Expand the breadcrumbs to the full width of the desktop screen for enhanced visibility with “Make breadcrumbs full width on desktop” setting.  d) How to show a sticky add-to-cart bar?   To show a sticky add-to-cart bar, follow these simple steps: Step 1: In the “Product information” section, add the "Sticky add to cart" block to your product page. Step 2: Customize the following key settings: Choose how the add-to-cart bar appears on desktop screens by using setting “Desktop display type” (Popup/Full width) Enable the quantity selector for customers to adjust the quantity of items they want to add to their cart. Full width: Popup 3. How to show multiple images for each product variant? Want to show off multiple images for each product variant? Shopify’s one-image-per-variant rule might cramp your style. The Eurus theme 6.6.0 update lets you easily add as many images as you want. a) How It Looks on Your Store b) Setting Up the Product Step 1: Access your product in Shopify In Shopify admin, go to Products. Select an existing product or click Add Product to create a new one. For detailed instructions, check Shopify’s guidelines. Step 2: Upload images & update variants In the Media section, upload all the images you need. In the Variants section, enter the option name and option values for your product. Step 3: Edit ALT text Click the image to edit the ALT text Select Add alt text and type in the ALT text: The ATL Text is the same with Option value you set above, MUST follow this format:   #option-value #: hashtag character option-value: written in lowercase, replace spaces by hyphen “-”   Example: Inside the option name "Color", there is an option value called "Mint blue," then for all images representing this Mint blue option, enter #mint-blue for your alt tag and click "Save alt text." All images related to one Option value use the same ALT text    ❓ What about my ALT text for SEO purposes? Simply type your desired text in the ALT field before the # symbol, like this: Example: Super attractive and comfortable #mint-blue. c) Setting Up the Eurus Theme Step 1: Go to the Theme editor and navigate to the Product Page. Step 2: On the right panel, scroll down and enable "Only show media associated with the selected variant". Fill in the Option name in "Option to classify variant media" and click SAVE. Important note: The text must exactly match the Option name in Shopify admin Enter all languages available on your site, separated by semicolons (e.g. Color; Colour; Couleur) Note: ✅ Works only for Product information and Featured Product sections. ✅ If ALT tags are set up, the default variant image added in Shopify admin won’t be shown as product featured image. In this case, images which do not have any option name's alt tag will be hidden. ✅ Images display on your storefront in the same order arranged in the Shopify admin media list.   d) How to Show Variant Images on the Page First Load Make a great first impression with your customers! Learn how to immediately show the most relevant images when customers land on your product page. Step 1:In the Theme editor under the Product information section, enable the "Show variant images on page load" option. This makes sure that when a customer first visits the product page, the variant images show up according to the ALT tags you’ve set up. Step 2:Choose how you want to display variant images on the first visit: Status of  The result on first page load Enable   Only the images related to the first product variant will be shown. Disable   The Shopify default variant image will be shown.   Need Help?Contact support if you encounter any issues. 4. How to show product basic information (title, price, description, etc.)? a) Product title and Vendor name By default, the product title and vendor name are displayed in the product page. The vendor name appears above the product title.  If you want to rearrange this order, follow these steps: Disable the "Show product title" and "Show product vendor" settings in the section settings.  Then, add two separate blocks for the product title and vendor name. Additionally, you can adjust the size of the product name as needed (Vendor name cannot be resized. You can link the vendor name to a page showcasing the vendor's corresponding products on the product page. Additionally, you have the option to link to a popup page without leaving the current page, or to an external URL.  To provide more details about a product's vendor, you can set it up following the priorities below: Link Vendor to Associated Collection: When you tick the "Link vendor to associated collection" option, either in a specific section or block, depending on where vendor details are displayed or added. The vendor name on the product page will link directly to a collection of products by that vendor. This offers a seamless way for customers to explore more products from the same vendor. Show Page Content in a Popup: If you prefer not to redirect customers away from the current page, you can select a page to display its content in a popup. This is especially useful when using metafields to show vendor collection in the admin. If this option is enabled, the link to the vendor's collection is applied automatically. External Link Option: If you want to provide an external link to more information about the vendor, you can fill in a URL that will direct customers to an external website or resource. The preferred option is to link to the page containing the vendor's products, as the primary goal is to provide a direct link related to the vendor. b) Product price To display the product price, follow these steps: Add the "Price" block to your product page. This block will automatically display the price of the product. Configure Price Block: You can choose whether to include tax status and shipping policy information in the displayed price. Adjust the text size of the price to ensure it fits well with the overall design  If you need more information, please read Shopify documentation for detailed instructions on Location-based tax settings c) Product description To add the product description with an option to show it as a collapsible tab, follow these steps: Add the "Description" block to your product page.  Configure Collapsible Tab Option: Within the description block settings, enable the option to display the description as a collapsible tab. This will help optimize space on the product page, especially for products with lengthy descriptions. Note: If you want to display a long description in rich text format, you can use the Product Description section of the theme. d) Product variants and Quantity selector To include product variants and a quantity selector on your product page: Adding the "Variant Picker" block will automatically display all variants of the product. .You can configure this block to display variants either as a dropdown menu or as buttons, depending on your preference. Type: Dropdown Type: Button Add Quantity Selector Block to enable customers to specify the quantity of the product they wish to purchase. This block allows customers to adjust the quantity before adding the item to their cart, providing them with more control over their purchase. 5. How to set up Add to cart and Buy buttons? a) How to show the "Buy it now" button? The "Add to Cart" button will be shown by default when the product is available. The "Buy it Now" button is a direct route to checkout, bypassing the mini cart or cart page entirely. To display this button, follow these steps: Add "Buy Buttons" Block: First, ensure you have the "Buy Buttons" block added to the product information section of your product page. This block typically contains both the "Add to Cart" button and the "Buy it Now" button. Enable "Buy it Now": Look for the option labeled "Show dynamic checkout buttons" and turn it on. This action will not only display the "Buy it Now" button but also any other dynamic checkout buttons provided by payment methods like PayPal, Amazon Pay, and more. Keep in mind that enabling this option will allow customers to proceed directly to checkout without going through the mini cart or cart page, enhancing the shopping experience with faster transactions. b) How to show store pickup options? Pickup availability refers to the option for customers to collect their purchases directly from a store location, instead of having them delivered to their address. The benefits of offering pickup availability include: Convenience & Customer satisfaction: Customers have the flexibility to choose a pickup location and time that suits them best, avoiding the need to wait for delivery or worry about missing packages. Cost savings: Offering pickup options can help reduce shipping costs for both the merchant and the customer, particularly for local orders. To set up the store pickup feature, first follow the instructions provided here:Shopify's guide on setting up local pickup. Then, enable the store pickup option in the respective block settings to display it on your website. Additionally, you can tick the box "Hide when pre-order is enabled" which means the option will be hidden when the product is not available and can be pre-ordered. This may result in not offering the pickup option. Guide for Pre-order features can be found below. Result: 6. How to show Pre-order buttons? To read the instruction for pre-order products, please refer to this guide. 7. [Gift card] How to show gift card recipient form? This feature is applicable only for gift card products. To display the gift card recipient form, follow these steps: Navigate to the "Buy Buttons" block in the theme settings. Tick the option to show the gift card recipient form. This will allow customers to directly send the purchased gift card to the email address entered in the form, along with a personalized message. Result: In the email of recipient: 8. How to show product Inventory status? To display the inventory status of products or variants: Step 1: In Theme Editor, go to Theme Settings > Product > Inventory status, and set it up as guided in this document Step 2: Under the Product Information section, add the Inventory Status block. From here, the inventory status will show as in stock, out of stock, or low stock based on the product's availability. However, if you want to display a message for products that are out of stock but have inventory on the way: Step 3: Enable the "Notify on Incoming Inventory" setting in the Inventory Status block.  ⚠️ Note: To make this feature work, you must create the incoming inventory of the product first, check out this guide from Shopify to learn more. When enabled, the message will change depending on the product’s inventory status: Default message Shown when? How to customize the message? Back in stock soon: {date} Shown when an incoming transfer has a specific restock date  Go to the Inventory Status block and edit the text fields under "Incoming Transfer Notice" To change the text color, go to Theme settings > Product > Inventory status > change the In stock message color setting. On backorder, shipping soon  Shown when the product is out of stock but still available for purchase. Go to the Inventory Status block and edit the text fields under "Backordered Status Notice"  To change the text color, go to Theme settings > Product > Inventory status > change the Low stock message color setting. (⚠️ Note: If that product is set to be “Continue selling when out of stock”, then the text color will be the same with In stock message). Step 4: (Optional) Turn on “Hide When Pre-Order is Enabled” → If checked, the incoming inventory status won’t show when Pre-Order is active. (Since Pre-Order and On Backorder share the same display logic, this may cause confusion. You can enable this option to hide On Backorder and show only Pre-Order instead.) Step 5: Click “Save”.   9. How to show Ratings? The benefit of showing ratings is that it enhances trust and credibility for your products. To display ratings, please note that the theme itself cannot provide a built-in review feature. You'll need to use an app for this functionality. Once you've integrated the app, you can use app blocks to show ratings, stars, and the number of reviews for each product.  Check this guide for more information. Additionally, if you encounter compatibility issues with other review apps during use, please contact our support for assistance. We are happy to assist you! 10. How to show Labels and badges? Follow the instructions provided in the guide here to set up product labels and badges. 11. How to show Estimated shipping date of the product? To display the estimated shipping date of the product, under Product information section > add the Estimated delivery time block. To set up this block, go to the Theme settings and locate the Shipping and delivery section. Detailed instructions and settings for this feature can be found in the guide to Theme settings here.  By doing so, you will set up the Estimated shipping date on the cart page, mini cart, and product page. However, if you want to customize the setting of this block on the product page, you can click straight on the Estimated delivery time block and make changes. 12. How to create Collapsible tabs? To create collapsible tabs for additional content in the description section, follow these simple steps: Add the block “Collapsible tab” From here, you can customize Open this tab by default: tick the box to make the tab expand automatically when the page loads. Set up the icon: 4 options Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.) Upload a Custom icon image. Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.) Use secondary background: Tick the box to show the background for the content inside the collapsible tab. Heading: enter the title of the collapsible tab to describe the content it will contain. Tab content: Add the content you want to display when the tab is expanded.   Result: Tips: You can also utilize metafields to dynamically populate content based on the product, providing more personalized information. 13. How to show Social sharing icons? To display social sharing icons, follow these steps: Go to theme settings. Then navigate to the "Social Media" section, you can see 3 Sharing Options. Share on Facebook Tweet on Twitter Pin on Pinterest Once enabled, these options will appear on the product page for customers to share across different social media platforms. 14. How to show Trust badges? Trust badges are symbols or images displayed on your store to enhance credibility and trustworthiness. They often include security seals, payment method logos, or quality certifications. These badges reassure customers about the safety and reliability of their transactions. In the Product information Section, Add the Trust badge block. This block allows you to add badge images to your product pages. These badges can include various certificates, quality marks, or icons representing secure payment methods. Admins can customize the trust badges by adding any image they prefer. This feature enables flexibility in displaying additional visual elements that may enhance trust or convey specific messages related to the products or brand. 15. How to show a Back-in-stock alert? This feature allows customers to subscribe to notifications when a product becomes available again after being out of stock. It's handy for customers who are interested in purchasing a product that's currently unavailable. In the Eurus theme, you can choose how the back-to-stock alert behaves. It can either show by default regardless of the stock status of the product, or only appear when the product is unavailable, based on your settinguration (Use "Only show when product is unavailable" setting). Admins can customize the text and message displayed when customers subscribe to the back-to-stock alert. This allows for personalized communication with customers who are interested in the product. After customers subscribe, the store owner receives an email notification about the subscription. However, it's essential for the admin to manually send an email to customers when the product is back in stock, as the theme doesn't handle this automatically. You can integrate with email automation systems such as Klaviyo for further customization. 16. How to create Customizable options? Follow the instructions provided in the guide here to set up Customizable options. 17. How to show the Gift wrapping option? Gift wrapping is a service that involves packaging items as gifts. Admins can create a gift wrap service product and offer it for sale alongside regular products. This adds a personal touch to their orders, making them suitable for special occasions such as birthdays, anniversaries, or holidays. Additionally, it can serve as an additional revenue stream for the store, as customers may be willing to pay extra for this convenient service. ✍️ How to set up Gift wrap? Choose the product in the Theme Settings > Product additional options > Gift wrap product. ⚠️ Note: The chosen product for gift wrapping won't show up in the in-store search results. Go back to the Product page, under the Product information section, add the "Gift wrap" block to the product page. Once added, a checkbox will appear, allowing customers to opt for gift wrapping. Admins can configure the label of the heading in the block according to their preferences. When customers add a regular product to their cart on the storefront, the gift wrap service product is also added to the cart simultaneously, meaning they can buy the product and the service at the same time, or merchant can offer free gift wrapping in some occasions. 18. How to show complementary products? ✍ What are complementary products? 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. ✍ How to show? Step 1: To utilize this feature, you need to install the Shopify Search & Discovery app. Follow the guide provided by Shopify here to add complementary products to your store: Customize product recommendations or follow our video guide here. Step 2: Once completed, you can add a Complementary block to your Product information Section.  Step 3: Set up the block: For Complementary products group: Heading: Customize the title or heading for the section.  Show as collapsible tab: Choose whether to display the complementary products as a collapsible tab. Show background: Decide whether to show a secondary background for the complementary block.  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. For Product cards 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. Add as bundle: This setting will affect the result of your customers when clicking on the Add to cart (+) button: Status of “Add as bundle” For products with no variant For products with variant Turn off That complementary product will be added to the cart immediately. A quick view pop-up will show up for customers to choose the variant and add it to the cart Turn on That complementary product and the main product will be added to the cart. A quick view pop-up will show up for customers to choose the variant and add it to the cart along with the main product. 19. How to show highlighted information (optional icons)? To showcase important product information like reviews, unique selling points, or key features on the product detail page, you can utilize the highlighted information blocks available in the theme. There are two types of blocks for this purpose: Text with icon: Ideal for longer texts, this block allows you to include custom icon images, adjust icon size, style text and background, and customize the overall appearance. Featured icon: This block is suitable for listing key features using short phrases or bullet points. You can modify settings such as heading size, icon size, line and border alignment, column content alignment, and choose colors. Each block can accommodate up to 6 features, and you can customize each feature individually, including the icon, heading, and text. The "Apply to Collections" setting allows you to add multiple blocks and icons with different appearances based on selected collections without needing multiple templates. You need to select collections to show this Featured icon block. If no collection is chosen, the block will be hidden. You can select up to 50 collections to display the featured icon block. 20. How to add a collection link? The purpose of displaying product collection links is to provide a way for users to navigate from a product page to a collection page where they can see other products belonging to the same collection. Provide a label that describes the link to the collection page.  Select colors for the background and text of the collection link that are suitable for both dark and light modes Note Only one block can be added per product page to display the collection link. If a product does not belong to any collection, the block should be hidden to avoid confusion or unnecessary links. For products that belong to multiple collections: if the product is accessed from a collection page, it will use that specific collection. Otherwise, it will default to the first collection listed in the collection order 21. How to add product siblings?  Product siblings allow you to link directly to other products as product swatches. This creates a richer product detail page that includes swatches with images and information representing each variant option. This feature enhances the shopping experience by making it easier for customers to see and select different product variants.  When viewing a sibling product, only the images associated with that variant option, along with the product details and prices for the variant, are shown. For detailed instructions and visual aids, please refer to the Product Sibling documentation in the common guide. 22. How to add Size chart? a) General guide A size chart is a visual or textual guide that helps customers determine the appropriate size to order based on measurements and fit preferences. Please follow these simple steps: First, create a new page in your Shopify Admin named "Size Chart" or similar. Follow Shopify's guide on creating pages here. Select or add a block named "Size Chart" Enter a heading for the size chart block. Choose the previously created "Size Chart" page from the dropdown menu. b) Create size charts for different products: To add different size charts for various products, follow these steps: Create separate size chart pages for each product or product type. Create a metafield of type 'Page' to store the size chart page for each product. Assign the appropriate size chart page to the metafield for each product. Add the metafield to the configuration in the Theme Editor to display the correct size chart page for each product. 23. How to add a table of information? This block allows you to add a 2-column table that can be utilized across various industries (e.g., Nutritional Facts for Food & Drink, Usage for Plants and Herbs, Product Specs for Jewelry, Fashion, Technology). ✍️ How to add content to the table of information? Add a new block titled "Table of information”. From here, you can click on the block add start to customize it: Show in tab: Tick to enable the whole table content to be collapsed or expanded with one click. Open this tab by default: Make the content under the tab always expanded when the page is loaded. Icon: 4 options: Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.) Upload a Custom icon image. Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.) Use secondary background: Tick to add a background to the whole table of information. Heading: By default, it will be shown as “Additional details”, change it as you need. Left column label: The content of the first row on the left column side. Right column label: The content of the first row on the right column side. Extra details: Enter other information to put it outside and underneath the table. Details: Follow these rules to add content to your table: Separate the left and right column content with a colon : Shift + Enter to break to a new line for adding a new row. Use a dash - to indent the rows. Enter to add a new line and separate different tables. For example: Extra details: Enter other information to put it outside and underneath the table.   ✍️ How to add dynamic content to the table of information using metafields? The instructions above give you a basic understanding of adding the table information to the product page. If you want to make it more advanced by changing the table’s content dynamically based on the product. 2 ways to do it: 1. Using the “Connect dynamic sources” button: 💡 With this method, you can enter the entire table of information into a rich text metafield. Once connected, the whole table will update dynamically based on the product. Steps to Set Up: Step 1: Create a Product metafield with the Rich Text type. Step 2: In Shopify admin, go to Products tab > click on a product > find and enter values into the metafield created using the format outlined earlier. Step 3: In Theme Editor > go to the product page > add the Table of Information block to the Product Information section. Step 4: In the Table of information block setting panel, find the Details field, and click connect the metafield using the Connect dynamic source   icon.   Step 5: Save the changes. 2. Using Namespace and key of the metafield: 💡 This method lets you show dynamic content for specific parts of the table by linking each element to a separate metafield. Steps to Set Up: Step 1: Create Product or Variant metafields with the Single Line Text - One Value type. Note: The metafield names for the product and its variants must be the same. Step 2: In Shopify admin, go to Products tab > click on a product If you created a Product metafield: Scroll down to Metafields setting group > Enter a value. If you created a Variant metafield: Scroll down Variants setting group > Click on a variant > scroll to Metafields setting group > Enter a value. ⚠️ Note: Product and Variant Metafield logic for the Table of information: What you set... What shows on your website... Variant has its own metafield value Shows the variant's metafield value Variant has no metafield value, but Product does Shows the product's metafield value Neither Variant nor Product has a metafield value Shows the "Text to use for empty fields" (if you set one), or nothing Step 3: In Theme Editor > go to the product page > add the Table of Information block to the Product Information section. Step 4: In the Table of information setting panel, find the Details field: Enter the content following the content formatting rules  For dynamic content, enter the metafield keys (find the key in Setting > Custom data > click on your metafield > Namespace and key). Example: Weight: custom.weight → This will display as Weight: 100g. Step 5: (Optional) Change the text that shown when the metafield has no value in Text to use for empty fields setting. Step 6: Save the changes.   24. How to show additional details? The "Additional Details" block enhances product pages by offering a structured, collapsible area for extra information, keeping the page clean and organized. This feature allows you to add tabular information that can be utilized across various industries (e.g., Nutritional Facts for Food & Drink, Usage for Plants and Herbs, Product Specs for Jewelry, Fashion, Technology). Navigate to the Product Information section in your theme settings. Add a new block titled "Additional Details". There are configurations for the Left Column Label to set the label for the left column and the Right Column Label to set the label for the right column. How to Add Tabular Content: Fill in the Text Area configuration by following these rules: Separate the label and value with a colon : Shift + Enter to break to a new line for adding a new row. Use a dash - to indent the rows. Enter to add a new line and separate different tables. For example: 25. How to show the Payment method for each product? In Theme Editor, go to Product Page  Under the Product Information section, click on Add block. Search for the block named “Payment methods”. From here, you can change the heading, and description, add payment icons, and customize the colors in the Style area. 26. How to add a Nutrition Fact Bar? On the Product page, click on the Product Information section, then add a new block called Nutrition Fact Bar. To set it up, you need to: Click on the Nutrition Fact Bar block,  then scroll down to the Content section. In the Nutrition details field, fill in the content following this format:   Ingredient name + " : " (colon) + percentage The loading bar will be automatically updated depending on the percentage you filled in. Some other settings you can do for the Nutrition Fact Bar: Show in tab: Tick to enable the whole table content to be collapsed or expanded with one click. Open this tab by default: Make the content under the tab always expanded when the page is loaded. Icon: 4 options: Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.) Upload a Custom icon image. Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.) Use secondary background: Tick to add a background to the whole nutrition fact bar. Heading: By default, it will be shown as “Additional details”, change it as you need. Extra details: Enter other information to put it outside and underneath the Nutrition Fact bar. Colors: Change the color for the content background, and the loading bar. ✍️ How to show dynamic content for the nutrition bar? The instructions above give you a basic understanding of adding the table information to the product page. If you want to make it more advanced by changing the table’s content dynamically based on the product. 2 ways to do it: Method 1. Using the “Connect dynamic sources” button: 💡 With this method, you can enter the entire nutrition bar content into a rich text metafield. Once connected, the whole nutrition bars will update dynamically based on the product. Steps to Set Up: Create a Product metafield with the Rich Text type. In Shopify admin, go to Products tab > click on a product > find and enter values into the metafield created using the format outlined earlier. In Theme Editor > go to the product page > add the Nutrition Fact Bar block to the Product Information section. In the Nutrition Fact Bar block setting panel, find the Nutrition details field, and click connect the metafield using the Connect dynamic source   icon. Save the changes. Method 2. Using Namespace and key of the metafield: 💡 This method lets you show dynamic content for specific parts of the table by linking each element to a separate metafield. Steps to Set Up: Step 1: Create Product or Variant metafields with the Single Line Text - One Value type. Note: The metafield names for the product and its variants must be the same. Step 2: In Shopify admin, go to Products tab > click on a product If you created a Product metafield: Scroll down to Metafields setting group > Enter a value with this format: X% (X is number). If you created a Variant metafield: Scroll down Variants setting group > Click on a variant > scroll to Metafields setting group > Enter a value with this format: X% (X is number). ⚠️ Note: Product and Variant Metafield logic for the Nutrition Fact Bar: What you set... What shows on your website... Variant has its own metafield value Shows the variant's metafield value Variant has no metafield value, but Product does Shows the product's metafield value Neither Variant nor Product has a metafield value Shows the "Text to use for empty fields" (if you set one), or nothing Step 3: In Theme Editor > go to the product page > add the Nutrition Fact Bar block to the Product Information section. Step 4: In the Nutrition Fact Bar setting panel, find the Details field: Enter the content following the content formatting rules  For dynamic content, enter the metafield keys (find the key in Setting > Custom data > click on your metafield > Namespace and key). Example:Protein: custom.percentage → This will display as Protein: 20%. Step 5: (Optional) Change the text that shown when the metafield has no value in Text to use for empty fields setting. Step 6: Save the changes.   27. How to show Frequently Bought Together products? The Frequently Bought Together block helps you increase sales by suggesting related products to your customers. It displays a list of recommended items on your product pages, allowing customers to add multiple products to their cart with a single click. ✍️ How does Frequently Bought Together work in your store? As you finish setting up, the Title you set up for your Frequently Bought Together will be shown on your product page. Once your customers click, a drawer will appear. Then, your customers can select numerous products/ variants they want by clicking the “Add” button. When done choosing, they must click on “Select X item(s)” at the bottom. Now, the product they chose will be shown on the product page. Your customers must tap “Add selected to cart” button to bring them to the cart. ✍️ How to set up the Frequently Bought Together? Step 1:  In the Product Information section, click “Add section” or “+”, then choose the “Frequently Bought Together” block. Step 2: A new panel will show up for you to set up the Frequently Bought Together block, from here you can customize:  Icon: 4 options: Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.) Upload a Custom icon image. Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.) Title: Give it a different name rather than “Frequently Bought Together”. Select products: 2 ways Select product: Choose the products that will be shown when your customers click on your title. Up to 50 products. Connect to dynamic source: Use product metafields to assign products to this list. Read How to show Frequently Bought Together products using metafield below for more details. Variant type: Change the display of the variant picker to be Button or Dropdown. Step 3: Click Save when done. ✍️ How to show Frequently Bought Together products using metafield? If you don’t want to set a fixed list of Frequently Bought Together products for all products on your site, use product metafields to customize the product list for each one, here’s how: Step 1:  Create a product metafield. Name it as you want (e.g. Frequently bought together) and make sure to click on “Select Type” and choose Product - List of products. Click Save. Step 2: Back to the Shopify admin, click to open the Products tab, choose a product you want, and scroll down to the Metafields section.  Step 3: Find the product metafield you just created, click “Select products” and choose the products you want from the list. Click Save when done. Step 4: Head back to the Frequently Bought Together block. Now, when you're choosing the products, click the dynamic source button. Pick the metafield you just created. Step 5:  Click Save when done. 28. How to add the Horizontal tabs? On the Product page, click on the Product Information section, then add a new block called Horizontal tabs. You can show up to 4 different tabs which are: Type of tab Purpose How to set up? Description tab A tab that automatically shows the product description as the content. Under Description tab setting group: Turn on the Show description tab. Change the Heading of the tab. Choose the Default content height. Specification tab A tab that allows you to show information in table format. Under Specifications tab setting group: Turn on the Show specification tab. Turn on the Use secondary background setting to add a background to the table. Change the Heading of the tab. Enter the column labels into the Left column label and the Right column label. Enter the table content into Details field, using the format: Separate the left and right column content with a colon : Shift + Enter to break to a new line for adding a new row. Use a dash - to indent the rows. Enter to add a new line and separate different tables. Note: You can also use the Metafield key into the Details field for dynamic value, check out this guide to learn more. Custom tab A tab that allows you to show additional content added manually, added from an existing page or added using metafields. Under Custom tab 1 or Custom tab 2 setting group: Turn on the Show custom tab. Change the Heading of the tab. Click “Select” under Content from page to show the content of a page you set up in Online Store > Pages. Otherwise, enter your content into the Text field. (To show dynamic content, create and enter the Metafield keys) 29. How to show other blocks? To display additional information about the product, you can use three different blocks: Text: This block allows you to add custom text to provide extra details about the product. Separator: Adding a separator line helps to distinguish between different sections of the product information, making it clearer for customers. HTML: If you need more customization options, you can use the HTML block to add custom content in HTML format. This block is more advanced and provides flexibility for embedding various types of content.