Product page
Product page
Product page
Oops, this guide isn’t quite ready 🚧 This is a new feature of our latest version. We’re still working on the documentation. If you need help right now, our team is happy to assist. ✉️ Contact Our Support Team
Product page
1. What is Buttons block? The Buttons block allows you to add call-to-action buttons to key product areas, helping customers navigate or take action more easily. The Buttons block helps you: Add navigational buttons to Product information / Quick view / Featured product section. Link buttons to a specific section on the same page (for example, jump to product details or FAQs). Link products or product variants to external pages using metafields, which is especially useful if you need to direct customers to another shopping platform or external resource. 2. How to link buttons to a section on the same page? If you want to link buttons to a section on the same page like this: 👉 Then follow this video guide: 2. How to link products / product variants to an external page using metafields? STEP 1: Create a Product metafield Go to Shopify admin > Settings > Metafields and metaobjects > Products. Click Add definition and create a new metafield. Set the metafield Type to URL. Save the metafield. If you need more detailed guidance, check this out 👉 How to create Product metafields. ⚠️ Note: If you want your button to link dynamically for each product variant, just create a Variant metafield in this step. And other steps remain the same. STEP 2: Input Metafield Values Go to Shopify Admin > Products. Click on a product you want to add a label for. Scroll to the Metafields section and enter the URL for the created metafield. Save the product. ⚠️ Note: If you want to attach separate links for each product variant, remember to enter URLs for each product variant. STEP 3: Set up in Theme editor In the Theme editor > Product information section > Buttons block. In the First button link using metafields/Second button link using metafields field, fill in the metafield key you've created, using this format: metafield_key Example: custom.button_link STEP 4: Click "Save" when done 3. Support Information Need help? Contact our support team at Omni Themes Support.
Product page
1. What is Video shopping block? Video shopping block allows you to showcase videos and optionally integrate products in those videos. This block enhances storytelling and also promotes cross-selling for your store. 2. How to set up Video shopping block? STEP 1: Add the block Go to Product page where you want to add the block, under Product information section, add Video shopping block. STEP 2: Set up the block Click on the Video shopping block to open its settings panel. You can add up to 5 videos to the block. At the Video 1 settings group: Click "Select" to add your Video. (Optional) Enable Show sound control to show a button for customers to control the sound of the video. (Optional) Enable video autoplay if you want (Optional) Provide Video alt text to support SEO practices. Feature a Product in the video. Repeat this step for setting up Video 2, Video 3,.. STEP 3: (Optional) Enable carousel Tick Enable carousel on desktop to display the videos in a carousel format on desktop devices. Select Enable swipe on mobile to allow users to swipe through the carousel on mobile devices for improved navigation. Enable auto-play to rotate carousel items automatically, and use Change slides every to set the rotation interval. STEP 4: Refine the block Edit the Heading if you want to. Choose the ratio you want for your video in the Video layout. STEP 5: Click "Save" when done 3. Support Information Need help? Contact support@omnithemes.com or visit omnithemes.com.
Product page
1. What is Product score? The Product score block lets you display product attributes using a bar or icon scale, helping customers quickly understand a product’s quality, performance level, or suitability. 2. How to set up Product score? STEP 1: Add Product score block to the product page Go to Product page where you want to add product score, under Product information section, add Product score block. STEP 2: Add block heading Click on the block to open its settings panel, then enter a Heading for the block. STEP 3: Customize how the block displays At Maximum score, set the total possible score. At Active score, enter a number to highlight the product’s actual score (e.g., 2 out of 5). Note that only integers are accepted. 👉 If you want to customize the score for each product, use a metafield with type ‘Integer’. Refer to the metafield setup guide for more details. Enable Fill up to active score to fill the bar or icons up to the active score. Choose Score color. At Display type, choose how the product score is displayed: Bar Enable to Show labels below the bar. If enabled, you can set left/middle and right label. Icon 4 ways to define the icon style: Choose Icon from the drop-down list. Use theme icon list. Insert SVG code. Upload Custom icon image. STEP 4: Click “Save” when done.
Product page
1. Overview 1.1. What is the Discount Progress Bar? The Discount Progress Bar is a dynamic visual element that guides customers through quantity-based discount tiers. It updates in real-time to show customers how close they are to unlocking the next discount based on their cart quantity. Key characteristics: 🎯 When to use: Guide customers through quantity-based or subtotal-based discount tiers. ⚙️ How it works: Updates in real time to show customers how close they are to unlocking the next discount based on quantity or subtotal. 📍 Setup location: A block under Product information/Featured product/Quick view section. 1.2. Supported discount types The Discount progress bar feature supports two types of discount codes: ✅ Quantity-based Discounts Discounts are triggered when customers buy a certain number of items. Example: Buy 10+ items → Get $5 off, Buy 20+ items → Get $10 off Best for: Wholesale offers, bundle deals, “buy more, save more” campaigns. → Go to 3.1. How to set up a Discount progress bar using QUANTITY OFF DISCOUNT? to learn more ✅ Purchase Amount Off Discounts Discounts are triggered when customers spend a certain amount of money. Example: Spend $100 → Get $10 off, Spend $200 → Get $25 off Best for: Cart-value upsell strategies, free gift thresholds, or tiered BFCM promotions. → Go to 3.2. How to set up a Discount progress bar using PURCHASE AMOUNT OFF DISCOUNT? to learn more 2. 🚨 CRITICAL: Before you start Setting up the Discount progress bar requires TWO ESSENTIAL PROCESSES: Process 1: Create discount codes in Shopify Admin (the actual discounts customers can use) Process 2: Configure the progress bar in Theme Editor (the visual display showing discount tiers) ⚠️ IMPORTANT: The discount values in Shopify Admin MUST EXACTLY MATCH the goal values in Theme Editor, or buyers might be confused. 3. Step-by-step setup 3.1. How to set up a Discount progress bar using QUANTITY OFF DISCOUNT? Process 1: Create discount codes in Shopify Admin STEP 1: Go to Shopify Admin → Discounts → Create discount STEP 2: Choose the "Amount off products" discount type. If you want to offer free shipping as a discount goal, choose Free shipping discount type. STEP 3: Make sure you choose "Automatic discount". STEP 4: Set the Discount value (this will be displayed in your progress bar), and the Eligibility of the discount. STEP 5: Set the Minimum purchase requirements > tick Minimum quantity of items > fill in the required number (this will be displayed in your progress bar as well). STEP 6: Click "Save". STEP 7: Repeat for each tier (create a separate discount for each goal) Example setup: If you want 5 discount tiers, create 5 automatic discounts: Discount 1: $5 off when buying 10+ items Discount 2: $10 off when buying 20+ items Discount 3: $15 off when buying 30+ items Discount 4: $20 off when buying 40+ items Discount 5: $25 off when buying 50+ items Process 2: Set up the Progress Bar in Theme Editor STEP 1: Add the Discount progress bar block Navigate to the Product page, under the Product information section, add the Discount progress bar block STEP 2: Choose the discount type At Discount type, choose the Items quantity option. STEP 3: Match the goals Click on the Discount progress bar to open the settings panel. Scroll down to the Goal 1 section and fill in the values: Field name What to fill in? How it appears Goal 1 Enter the exact threshold you set earlier in Shopify admin (e.g., 10) Goal 1 label Enter discount description for the tiers table (e.g., "$5 off each") Goal 1 pre-goal message - Message shown BEFORE goal is reached. - Use these placeholders to add dynamic value: [x] = automatically shows the remaining quantity needed. [goal_label] = automatically shows the goal label you entered How it works for customers: Goal condition: 10 items needed for $5 off each Current cart: 5 items Pre-goal message displayed Goal 1 post-goal message Message shown AFTER reaching goal. Use [goal_label] placeholder How it works for customers: Goal condition: 10 items needed for $5 off each Current cart: 10 items Post-goal message displayed STEP 4: Repeat these steps for goals 2,3,4,5. ⚠️ Note: If you enter a smaller goal after a larger one, the system will automatically reorder the goals on the bar to ensure they are displayed in the correct sequence. STEP 5: Click "Save" when done. Process 3: Final refinements After finishing the two most important processes above, just a few works are left to make your Discount progress bar “glorious”: STEP 1: Add a Heading (e.g., "Buy more get more!") STEP 2: Decide where the block applies: For specific products → select products under Apply to products. For specific collections → select collections under Apply to collections. For all products and collections → leave both fields empty. STEP 3: Choose how the discount progress is tracked At Progress calculation method, choose among: Per product: Customers must reach the discount threshold within a single product for the bar to move forward. 👉For example: If the discount requires buying 5 items, and the customer adds 3 product A and 2 product B, the bar won’t move. But if they add 5 product A, the bar will progress. Combined total: Progress is tracked based on the total quantity across all selected products/collections in the cart. 👉For example: If the discount requires 5 items, the customer can add 3 product A + 2 product B. Since the total quantity is 5, the bar will progress. STEP 4: Save your settings 3.2. How to set up a Discount progress bar using PURCHASE AMOUNT OFF DISCOUNT? Process 1: Create discount codes in Shopify Admin STEP 1: Go to Shopify Admin → Discounts → Create discount STEP 2: Choose the "Amount off products" discount type. If you want to offer free shipping as a discount goal, choose Free shipping discount type. STEP 3: Make sure you choose "Automatic discount". STEP 4: Set the Discount value (this will be displayed in your progress bar), and the Eligibility of the discount. STEP 5: Set the Minimum purchase requirements > tick Minimum purchase amount > fill in the required number (this will be displayed in your progress bar as well). STEP 6: Click "Save". STEP 7: Repeat for each tier (create a separate discount for each goal) Example setup: If you want 5 discount tiers, create 5 automatic discounts: Discount 1: 5% off when spending $100 Discount 2: 10% off when spending $200 Discount 3: 15% off when spending $300 Discount 4: 20% off when spending $400 Discount 5: 25% off when spending $500 Process 2: Set up the Progress Bar in Theme Editor STEP 1: Add the Discount progress bar block Navigate to the Product page, under the Product information section, add the Discount progress bar block STEP 2: Choose the discount type At Discount type, choose the Items purchase amount option. STEP 3: Match the goals Click on the Discount progress bar to open the settings panel. Scroll down to the Goal 1 section and fill in the values: Field name What to fill in? How it appears Goal 1 Enter the exact threshold you set earlier in Shopify admin (e.g., 100) Amount entry formats: Amount only (e.g., 100) - Applies to all countries and currencies universally Currency code with amount (e.g., USD:100) - Applies to any country that uses the specified currency (USD in this example) Country code with currency and amount (e.g., US:USD:100) - Applies only to the specific country with the specified currency (United States with USD in this example) 👉Add one rule per line only. Goal 1 label Enter discount description for the tiers table (e.g., "5% off") Goal 1 pre-goal message - Enter the message shown BEFORE the goal is reached. - Use these placeholders to add dynamic value: [x] = automatically shows the remaining quantity needed [goal_label] = automatically shows the goal label you entered How it works for customers: Goal condition: Spend 100đ to get 5% off Current cart: 94đ subtotal Pre-goal message displayed Goal 1 post-goal message - Enter the message shown after reaching the goal - Use these placeholders to add dynamic value: [goal_label] = automatically shows the goal label you entered How it works for customers: Goal condition: Spend 100đ to get 5% off Current cart: 100đ subtotal Post-goal message displayed STEP 4: Repeat these steps for goals 2,3,4,5. ⚠️ Note: If you enter a smaller goal after a larger one, the system will automatically reorder the goals on the bar to ensure they are displayed in the correct sequence. STEP 5: Click "Save" when done. Process 3: Final refinements After finishing the two most important processes above, just a few works are left to refine your Discount progress bar: STEP 1: Add a Heading (e.g., "Buy more get more!") STEP 2: Decide where the block applies: For specific products → select products under Apply to products. For specific collections → select collections under Apply to collections. For all products and collections → leave both fields empty. STEP 3: Choose how the discount progress is tracked At Progress calculation method, choose among: Per product: Customers must reach the discount threshold within a single product for the bar to move forward. 👉For example: If the discount gives $10 off when spending $100 on the same item, spending $50 on Product A and $50 on Product B won't count. However, if customers spend $100 on Product A alone, the bar will progress. Combined total: Progress is tracked based on the total quantity across all selected products/collections in the cart. 👉For example: If the discount gives $10 off when spending $100, customers can spend $50 on Product A + $50 on Product B. Since the combined subtotal reaches $100, the bar will progress. STEP 4: Save your settings 4. Advanced customizations 📂 Icon STEP 1: Toggle "Show progress bar icons" to show icons STEP 2: Adjust Icon size STEP 3: For each goal, customize: Goal icon: Choose from dropdown, upload image, or enter SVG code Goal reached icon: Icon displayed after reaching the goal ✅ As a result, you have a discount progress bar with each goal and its separate icon 📂 Discount Tiers Table STEP 1: Toggle "Show discount tiers table" STEP 2: The table displays: Left column shows Goal value Right column shows Goal label STEP 3: Customize column labels as needed 📂 Color Customization Customize colors for various elements: Heading Text Background Available for both light and dark theme modes 5. Support Information Need help? Contact our support team at Omni Themes Support.
Product page
1. What is Coupon code block? The Coupon code block appears on the Product page, allowing customers to copy the coupon code and apply it manually in the checkout process. 2. How to set up Coupon code block? Want to display coupon codes on the product page but don’t know how to start? Here’s how: STEP 1: Add the Coupon code block In the Theme editor, go to the product page, and in the Product information section, add the Coupon code block to your product page. STEP 2: Add the Coupon code content Scroll to Coupon code 1, Coupon code 2 setting group, and enter: Text to show along with the coupon code. Coupon code (make sure the code works in your admin). STEP 3: Style the block Choose edge styles for the block and the coupon codes. In the Heading setting group: Choose an available Icon, use an icon from the icon list, or upload your own icon (image or SVG code) Edit Icon size. Enter Text for the block heading. Choose Colors for block elements in light and dark theme modes. STEP 4: Click “Save” when done. 3. How to add a Countdown timer to the Coupon code block? If you want to add a countdown timer to Coupon code block to create urgency among customers and encourage immediate purchases, here’s how: STEP 1: Open the settings Click on Coupon code block, and scroll down to Countdown timer settings group. STEP 2: Enable countdown timer At Countdown timer, choose between:; Standard timer: Count down to a set end time. Evergreen timer: Create continuous urgency by automatically restarting, perfect for ongoing promotions that don't have a fixed end date. STEP 3: Set up the countdown timer For Standard timer For Evergreen timer Set end date, timezone Choose what happens to the countdown timer When the expiration date and time has passed Set your Start date – this determines when the timer begins counting Future Start Date: Timer shows 0h0m0s until the start date arrives Current Start Date: Timer begins counting down immediately Past Start Date: Timer calculates where it should be in the current loop cycle Set your desired Duration (per loop) and Unit – e.g., 7 days Set the right Time zone for your store STEP 4: Customize the layout of the countdown timer At Timer style settings group, choose Text position, Timer style, Line and border for the countdown timer. STEP 5: Click "Save" to apply changes.
Product page
1. What is the Quick Order List Section? The Quick Order List section is designed for B2B and volume-focused stores. It displays product variant details (like price and quantity) in a table format directly on the product page. This allows customers to quickly review their selected variants, adjust quantities, and proceed to checkout—ideal for wholesale or multi-item buyers. 2. How to set up the quick order list Step 1: Add the Quick Order List Section to the Product Page In your Shopify admin, go to Online Store > Themes > Customize. Navigate to the Product Page template. Click Add section > Quick Order List. The settings panel will appear on the right side. Step 2: Customizing the quick order list section 🖥️ Desktop Layout: Choose between Horizontal or Sidebar (default table style). Horizontal Sidebar 🖼️ Show Images / Show SKUs: Toggle product images or SKUs on or off to show the corresponding information. 🔎 Quantity selector style: Adjust the border style of the picker. ✍️ Text Customization Heading: Edit the section title (e.g. “Quick order list”). Marker: Add visual emphasis (Underline, Circle, Box, etc.). Subheading & Text: Optional. Use for short instructions or notes.Heading Tag & Size: Adjust size and HTML tag (H1–H6). Alignment: Align heading left, center, or right. 🖼️ Product Variant Display Variants per page: Decide how many product variants are displayed on one page within the Quick Order List section. 💡 Tip: Set a number that keeps your list easy to scroll through and fits well with your page design. Pagination type: Choose how the page navigation appears when there are multiple pages of variants. 🧾 Order List Summary Customize everything about the order summary box: Button label: Enter a label for the button (e.g., “View cart”). Background color, text color, button colors, and border styles for both light and dark modes. Need Help? Contact the Omni Themes Support Team at support.omnithemes.com – we’re always here to help.
Product page
1. What is the Volume Pricing Table Block? The Volume Pricing Table is a block inside the Product information section on the product page. It displays tiered pricing based on quantity for B2B customers. ⚠️ Note: This feature is only visible to customers who are logged in as B2B and are assigned to a catalog with quantity pricing configured. It will not appear for regular storefront visitors or non-B2B accounts. 2. How to set up the volume pricing table block? Process 1: Set Up Quantity Pricing in Shopify catalog Before adding the block, you must configure the quantity pricing in your Shopify admin: STEP 1: In your Shopify admin, go to Markets > Catalogs. STEP 2: Create a new catalog or open an existing one. STEP 3: Choose markets, or assign the relevant products and companies to the catalog. Click "Save" first. STEP 4: Under Products section: Find the product you want to set quantity pricing rule Click the Plus (+) sign under the Rules column Set up the rules for Volume Pricing. STEP 5: Click "Save" when done. 📘 For more detailed guidance, follow the full setup steps in Shopify’s official guide: 👉 Set up quantity pricing in Shopify B2B Catalogs Process 2: Add the Volume Pricing Table Block to the theme ❗ Reminder: This block only shows for stores using Shopify plus plan. Go to Online Store > Themes > Customize. Open your Product page template. In the left sidebar, click on the Product information section. Click Add block and select Volume pricing table. Drag the block to your desired position (e.g., below the product price). Click Save. The block will automatically show the price breaks to B2B customers assigned to a catalog with quantity pricing. Process 3: Choose the layout for the Volume pricing table Open the Volume pricing table settings panel > Layout, choose how the pricing tiers are displayed: Table (Default): Displays pricing tiers in a structured table format. When selected, the Use Shopify default design toggle appears - enable it to apply Shopify's native table styling. Label: Displays pricing tiers as labels. Then choose how the Discount summary layout is arranged: Vertical: Stacks the discount summary content vertically. Horizontal: Displays the discount summary content side by side. Process 4: (Optional) Enable the Progress bar (Available only when Layout = Table) The Progress Bar enhances the Volume Pricing Table by showing customers their progress toward unlocking the next pricing tier — encouraging higher order quantities. STEP 1: Click on the Volume pricing table block to open its settings panel. STEP 2: Toggle “Show progress bar” to activate it. STEP 3: Customize before/after goal reached message Message Type When It Appears Example Template Example in Action Pre-goal message Before the customer reaches the next pricing tier Add [x] more to get [goal_label] [x] = remaining quantity [goal_label] = upcoming price label Goal: Buy 4+ to get $40 each Current cart: 2 items → "Add 2 more to get $40/ea pricing." Post-goal message After the customer reaches the goal Congrats! You've just unlocked [goal_label] pricing. Goal: Buy 4+ to get $40 each Current cart: 4 items → "Congrats! You've just unlocked $40/ea pricing." STEP 4: Choose icons to show on the progress bar You can choose icons to show on the bar before/after the goal is reached. At Goal icon/Goal reached icon, choose icon from a dropdown list or upload custom icon using SVG code. Adjust Icon size. STEP 5: Click “Save” when done.
Product page
1. What is the Engraving block? The Engraving Option allows customers to add a personalized engraving to their product, such as a name, initials, or a special message. This feature is commonly used for: Jewelry & Accessories – Adding initials or meaningful dates. Gifts & Keepsakes – Engraving a special message on items like watches, pens, or keychains. Custom Products – Personalizing phone cases, wooden crafts, or leather goods. This option helps stores offer a personalized shopping experience, making products feel more special and unique. 2. How to set up the Engraving? Step 1: Create a product as the Engraving option In Shopify admin, click on Products tab > Add product, and create your new engraving product with its price & inventory quantity. ⚠️ Note: The engraving product CANNOT be out-of-stock to make it shown on site. We recommend setting this product to Untrack quantity or, if tracking stock, enabling Continue selling when out of stock to ensure availability. Step 2: Enable Engraving in Theme Settings Go to Theme Settings > Product Additional Options > under Engraving Option, select a product to apply the engraving charge. Note: If you want to hide the engraving product from customer discovery while keeping it available for purchase, Shopify now supports the Unlisted product status. To set up Unlisted product status, go to Shopify admin > Products > Choose the engraving product (created in Step 1) > Change Status to Unlisted. Step 3: Add the Engraving block Still in the theme editor, navigate to the Product page > under Product Information section, click Add block > choose Engraving. Step 4: Set up the Engraving block Option Label: The default text: “Personalize by adding your name (+$10)”): The title for this option shown to customers. Mark as Required: If enabled, customers must fill in this field before checkout. Maximum Character Length: Limits the number of characters allowed. Leave blank for no limit. Option Note: Add an explanation or instructions (e.g., “Engraving is case-sensitive”). Step 5: Click “Save” when done. 3. How Engraving works in the cart? When a customer adds an engraved product to the cart: The main product is added with an engraving property. The engraving charge product is added automatically. If no engraving product is selected in Theme Settings or the engraving product is out-of–stock, this option will not appear. ⚠️ Note: If you want to offer a free engraving service, you may not need this option. Instead, using the theme’s built-in customizable option feature can be a simpler solution.
Product page
To display additional information about the product, you can use these 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.
Product page
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)
Product page
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.
Product page
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 number value (For example: 18) If you created a Variant metafield: Scroll down Variants setting group > Click on a variant > scroll to Metafields setting group > Enter a number value (For example: 18) ⚠️ 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 Metafield key list field, enter all the metafield keys you want to use for this block, one per line. Note: Find the key in Setting > Metafields and metaobjects > click on your metafield > Namespace and key (like the below image shown). Step 5: In the Nutrition Fact Bar setting panel, find the Details field, enter the content following this format: Ingredient name + " : " (colon) + [metafield key] + % Example: Protein: [custom.percentage]% → This will display as Protein: 20%. Step 6: (Optional) Change the text that shown when the metafield has no value in Text to use for empty fields setting. Step 7: Save the changes.
Product page
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.
Product page
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 > Metafields and metaobjects > 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.
Product page
1. What is Size chart? A size chart is a visual or textual guide that helps customers determine the appropriate size to order based on measurements and fit preferences. 2. How to set up Size chart? To set up size chart, 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. At the Select page, choose the previously created "Size Chart" page from the dropdown menu. Choose the style of the size chart: Drawer style Popup style 2. How to 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.
Product page
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
Product page
Featured icon & Text with icon
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.
Product page
✍ 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.
Product page
1. Overview 1.1. What is Gift wrapping? Gift wrapping is a service that involves packaging items as gifts. Admins can create a gift wrapping service product and offer it for sale alongside regular products. It adds a personal touch for occasions like birthdays, anniversaries, or holidays, while also generating extra revenue from customers willing to pay for the convenience. 1.2. How does Gift wrapping work? 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 the merchant can offer free gift wrapping on some occasions. 2. How to set up Gift wrapping? STEP 1: First, you need to create a product in Shopify Admin to act as Gift wrapping product, like this: STEP 2: Choose the gift wrapping product in the Theme settings In Theme Editor, go to Theme Settings > Product additional options > Gift wrapping product, choose the Gift wrapping product created in the Shopify Admin. 👉 If you want to hide the gift wrapping product from search page, suggest search, product grid, product recommendations, cart upsell -> toggle “Hide product from catalogue”. Note: If you want to hide the gift wrapping product from customer discovery while keeping it available for purchase, Shopify now supports the Unlisted product status. To set up Unlisted product status, go to Shopify admin > Products > Choose the gift wrapping product (created in STEP 1) > Change Status to Unlisted. STEP 3: Add Gift wrap block to the product page Go to the product page you want to add gift wrapping option, under Product information section, add Gift wrap block. Once added, a checkbox will appear, allowing customers to opt for gift wrapping. STEP 4: Click “Save” when done.
