About Vitals App
What Is Vitals App?
Vitals is an all-in-one sales and marketing platform designed to help online merchants optimize and grow their stores. The platform brings together 40+ Shopify apps to build trust, capture leads, increase conversion rate, and boost average order value.
Some features work automatically to the whole store such as Pre-order; Sticky Add To Cart; Pop-ups. Some require integration in order to showcase content in pages built by PageFly.
Install Vitals App
Before using these elements, you have to install the Vitals app to your store and configure/enable them inside the app, then come back to PageFly to use the element(s) for the corresponding product(s) you want.
You can check the Help Documentation of Vitals for further details of the app.
How To Access Vitals Elements
From PageFly Dashboard
In the PageFly dashboard, follow these steps to access the Vitals element:
- Step 1: In the PageFly dashboard, click Extra functions on the left menu.
- Step 2: Click the Manage button on the right of the Integration.
- Step 3: Search for Vitals and hit Activate. The element will appear in the Third-party Elements menu.
From PageFly Editor
In page editor, follow these steps to access Vitals element:
- Step 1: In the PageFly editor, click Third-party elements on the left menu.
- Step 2: Click on the icon on top right of the Third-party elements tab.
- Step 3: Search for Vitals and enable it.
- Step 4: Click Done and the element will appear in the Third-party elements menu.
There are 3 elements of Vitals (along with variants) integration divided into 3 categories:
- Reviews and Rating: Vitals – Product Review Widget
- Upsell and Cross-sell: Product Bundles, Volume Discounts and Stock Scarcity
- Badges and Seals: Vitals – Trust Seals and Badges
How To Configure Vitals Elements
- The Review Widget element can be used in any page type, dragged and dropped to any position of a page.
-
- For Product Page: it can be placed in any position of your pages; the widget only shows the reviews of the assigned product in Live View.
- For other page types: it can be placed in any position of your pages; the widget only shows Featured Reviews you have set in the Vitals app in the Live View.
- The Product Bundles, Volume Discounts, Stock Scarcity must have one product that is the same as the assigned product(s) of the current page in order to showcase Bundles in the live view.
From PageFly
Step 1: Add Vitals Elements
Before starting to set up for the Vitals elements element, you will need to add this element onto your page canvas:
- Step 1: Click Third party elements on the left menu bar
- Step 2: Look for Vitals element
- Step 3: Click on the element to see its variants
- Step 4: Drag and drop the variant onto the page canvas
Step 2: Configure Vitals Elements
After adding the element, you can adjust for it by clicking on the element.
- From the “General” tab, there is a widget configuration giving you a short explanation of the Vitals app, its link to the app listing.
For more information about settings in the General tab, please read this guide.
- For styling options like margins, borders, and effects, go to the “Styling” tab. You can find more details about the available options here.
From Vitals App
Before using the Vitals element in PageFly, you’ll need to create and configure your widget in the Vitals app. Here’s how:
Step 1: Activate “Vitals” In The Theme Customize
Go to your Shopify admin, then navigate to Online Store > Theme > Current theme > Customize > App embeds. Search for “Vitals” and activate it.
Step 2: Customize Vital Widgets
Let’s configure widgets of the Vitals App available for PageFly integration:
Product Reviews Widget
From the Vitals dashboard, go to Widgets > Reviews & Trust > look for the Product Reviews widget and hit the Customize button.
If it’s deactivated, activate it.
Navigate to the Settings tab > Select Review widget to access its configurations:
General:
|
 |
Product Page Layout:
|
 |
Number of Reviews on Product Page (for Mobile, Desktop):
|
 |
Reviews Information:
|
 |
Layout Design Settings:
|
 |
Write a Review Form:
|
 |
Module filters: Display module on product pages according to filters
|
 |
Trust Seals And Badges
From the Vitals dashboard, go to Widgets > Reviews & Trust > look for the Trust Seals And Badges widget and hit the Customize button. If it’s deactivated, activate it.
Let’s start configure this widget:
| Styles: Choose your desired styles of trust seals and badges. |  |
| Badges: Hit Select badges, choose your desired badges and click Save. |  |
Settings:
|
 |
Module filters: Display module on product pages according to filters
|
 |
Product Bundles
From the Vitals dashboard, go to Widgets > Upsells & AOV and find the Product Bundles widget. Click the Create button.
Step 1: Select Products
- Products from Slot A: Choose products from any product, a specific product, or a collection.
- Products from Slot B: Choose products from any product, the same collection, a specific product, or a collection.
- Add New Slot: You can add between 2 to 5 slots for products in the bundle.
- Allow Customers to Change a Product: Enable this option to let customers swap products within the bundle.
Click the Continue to Discount button to proceed.
Step 2: Set Up Discount
- Discount Value: Choose between a percentage or a fixed amount for the discount.
- Discount Displayed As: Decide if the discount is based on the current product prices or the initial product prices.
Click the Continue to Appearance button to proceed.
Step 3: Set up Appearance
Customize the appearance of your product bundle:
- Bundle on Product Page: Toggle status, set offer title, and customize the Buy-Now button.
- Appearance: Adjust the style of the Add to Cart button and the color for crossed-out prices.
- Advanced Settings: Choose on which devices to display the “You Save” element.
- Product Details: Set the product details layout to be visible, hidden, or collapsible.
- Cart Suggestion on Cart Page
- Post Purchase on Thank You Page
- Set up post-purchase offers
- Pop-Up on Add to Cart Button
Hit the Continue to Review button.
Step 4: Review
Check all the settings and configurations you’ve made and make further settings:
- Offer Status
- Internal Name
- Cart Label
Click the Publish Product Bundle button and then Save to make the bundle live.
Volume Discounts
From the Vitals dashboard, go to Widget > Upsells & AOV, search for Volume Discounts, and click the Create button. Choose your desired layout.
Step 1: Select Products
- Select the products to be included in the offer.
- Optionally, enable the checkbox to offer the discount for any eligible product bought.
Click the Continue to Discount button.
Step 2: Set Up Discount
- Discount Type: Choose between a percentage or fixed discount.
- Set Up Discount Tiers: Define the quantity and discount amount for each tier.
- Add new tiers as needed.
Click the Continue to Appearance button.
Step 3: Set Up Appearance
- Volume Tiers on the Product Page: Configure the status, layout, offer title, Add to Cart button text, and tier format text.
- Appearance: Customize the widget’s accent color, title text color, title background color, and border radius.
- Highlight a Tier: Select a tier to highlight and set a label for it.
- Theme Settings: Adjust theme settings to ensure consistency with your store’s design.
- Additional Settings: Configure Cart Suggestions on the cart page, post-purchase offers on the Thank You page, and pop-ups on the Add to Cart and Checkout buttons.
Click the Continue to Review button.
Step 4: Review
- Review the output of your previous steps to ensure accuracy.
- Set the offer status, internal name, and cart label.
Click the Publish Volume Discount button and then Save to activate the discount.
Stock Scarcity
From the Vitals dashboard, go to Apps > Conversion and find the Stock Scarcity widget. Click the Customize button.
Navigate to Settings tab > Display to configure:
- Show Urgency Box When Variant Inventory is Below: Set the inventory threshold to display the urgency box.
- Text When Inventory is Low: Customize the low inventory message.
- Show Widget When Variant is Out of Stock but Still Purchasable: Enable this to show the widget for out-of-stock but purchasable items.
- Text When Product is Out of Stock but Still Purchasable: Customize the out-of-stock message.
- Color Settings: Adjust urgency box color, bar background color, and gradient colors.
- Margin: Set margins to control spacing around the urgency box.
Common Cases
Vitals Widgets Not Displaying in PageFly
This typically occurs if the Vitals app is not properly integrated or activated within PageFly. To resolve this, first ensure that Vitals is correctly integrated and active in your PageFly setup. Verify that the Vitals elements are properly added to the PageFly canvas.
Slow Page Load Times
Integrating multiple Vitals widgets on a PageFly page may lead to slower page load times, affecting user experience. To mitigate this, optimize the number of widgets used on a single page.
Frequently Asked Questions
1. Can I customize the appearance of Vitals widgets in PageFly?
Yes, you can customize the appearance of Vitals widgets in PageFly. Use the Styling tab to adjust fonts, colors, margins, and other visual aspects to match your store’s design. For more advanced customization, you can also apply custom CSS.
2. What are the key benefits of using the Vitals app?
The Vitals app provides over 40 integrated features designed to enhance your Shopify store’s performance. These features include product reviews, upsells, social proof, email marketing, and more, all aimed at boosting conversions, increasing average order value, and improving customer experience. By using Vitals, you can replace multiple separate apps with one, simplifying management and potentially reducing costs.
Previous article
