Using the Vitals Editor
Keeping to our promise that no coding is required to use and customize the Vitals apps, we offer a simple yet intuitive custom Editor where you can change locations of some of our Vitals apps and also customize some of the apps' visual settings.
🔥 If your store's theme is OS 2.0 Compatible (almost all Shopify themes from the Shopify theme store are compatible with this), we're glad to let you know that our Vitals apps can also be inserted normally using your store theme's own editor! For more information, you may refer to this Help Center article: Using the Shopify Theme Editor to change Vitals app locations
How to Use the Vitals Editor
To access the Vitals Editor, you can simply go to the Placement section of any Vitals app that has it:
This should open up the Vitals Editor like below. Let's explore the basic sections:
- Page Type
In this section, you can determine what section of your store you would like our Vitals apps to be placed.
There are two options you can choose here: Product pages or Homepage
- For the Product Pages type, it will show you the basic layout of your theme's product page using the first product on your store as its representation. Any app placements you change here will be the same for all of your theme's product pages.
💡 If you select Homepage, you will only see a selected number of Vitals apps that can be placed, as not all Vitals apps can be placed on the homepage. For more information about this, refer to the Frequently Asked Questions section below.
- List of Active apps
Any visual apps that are currently enabled on your store that is available to be placed on the page will be shown here. Click on an app to see where it's currently located on the page and to start changing their locations and/or settings using the right sidebar that appears.
- Inactive Apps
If there are other visual apps that are disabled on your store, you can activate them in this list conveniently and change their location.
- Properties Sidebar
This right sidebar automatically changes depending on the app that is clicked on the left sidebar. This properties sidebar will show two sections: The Placement section and the app's visual settings section (if there are available):
Using the Placement section inside the Properties sidebar, you can then change the location of the app with the given controls.
Some Vitals apps also have easily accessible visual settings that you can use.
✅ We are currently migrating all frequently used visual settings like margins, paddings, and colors to all apps to the Vitals Editor to add more convenience, so stay tuned for it!
💡 Looking for more locations for your apps? The Vitals Editor provides the recommended locations of the apps like around the Add-to-cart button, around your product description, or your store's footer. If you are looking for a more precise location, you can use your Shopify Theme Editor as our apps can also be inserted from there. For more information, you may refer here: Using the Shopify Theme Editor to change Vitals app locations
- Desktop or Mobile View and Save button
You can use the given Desktop or Mobile view buttons to have a preview of how the apps will look on your store's Desktop and Mobile layouts.
This is also where the Save button is conveniently saved. Always save your changes first before checking your live store.
- App Placeholder
Active apps that you place on your page will be represented by a placeholder within the Vitals Editor. To know how it exactly looks, always check your live store after saving your changes.
Please keep in mind that the sections might be different for your store, depending on how the pages were constructed. If you encounter any difficulties in positioning the apps, please contact our Customer Support team for further assistance.
💡 If your store is password-protected, it can block the Vitals Editor's ability to properly see the sections on your page, especially for the homepage. If you can't see the sections when trying to move an app, please disable your store's password. Then, you'll be able to reposition the various apps using the Editor, and later on, you'll be able to re-enable the password.
Frequently Asked Questions (FAQs)
I'm trying to place the XX Vitals app on the homepage, but I cannot find it in the editor. What should I do?
While all apps will work on your product page, not all of them can be rendered on the homepage. Adding Vitals apps to your homepage is a popular way of making our store look as professional as possible. Due to how the homepage is constructed at the HTML/code level, many critical elements that our apps need are missing, even if the layout might be similar to the product page.
The Shopify standard (guideline) is focused on the product page, which does all the heavy lifting. In other words, the product page contains all the core elements such as product details, price, photos, description, buttons, and most importantly, runs the apps. On the other hand, the homepage is intended to be just a landing (welcome) page for customers, funneling them to the product page itself.
To see a list of Vitals apps and where they are available to be rendered, you may refer here: Want to know if a Vitals app works on a specific page?
My product pages are created using a Page Builder, and therefore the layouts of each page are different. How can I specify the location of the Vitals apps?
Our Vitals apps may not behave optimally on pages created by Page Builders (Gempages, PageFly, EComposer, etc). This is because of how highly customized the pages are rendered. For more information on how our Vitals apps behave on pages created by Page Builders, you may refer to this Help Center article: Vitals - Page Builder Support.
However, if you know your way of inserting custom code on your Page Builder platform, most of our Vitals apps have their respective HTML code snippet that you can insert on your pages.
Adding the HTML Snippet in a Theme's Code
You can also inject the app’s HTML Snippet in your theme files or on your page builder platform, directly into the code, in the desired location, by following these steps:
- Scroll to the bottom of the settings page of the app and go to the Placements section.
- One of the Placement options that you can see there is the insertion of that app's HTML snippet to your page builder:
I'm trying to use the Vitals Editor but the Placement section is not available. It's telling me that the app is inserted via the Shopify Theme Editor. How can I resolve this?
While using the Vitals Editor, there may be instances where the Placement section is not available, and it will show you the reason:
To resolve this issue, there are two options:
- Go to your Shopify Theme Editor and change the location of the app from there. (Shopify Theme Editors provide greater flexibility as the regions are provided by your theme directly).
- Go to your Shopify Theme Editor and look for that Vitals app inserted in your theme, specifically in your Shopify Theme Editor's left sidebar, then remove it. Once you removed it and saved the change, refresh the Vitals Editor and the Placement section of that app will become available.