Changing the position of an app

Keeping to our promise that no coding is required to use and customize the Vitals apps, we offer a simple yet intuitive custom Editor with which you can easily move any apps on your product page.

How to Use the Vitals Editor.

🔥 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 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

Once logged in to your Vitals dashboard, you will be able to access the Vitals Editor under My Vitals:

This should open up the Vitals Editor like below. Let's explore the three basic sections:

1
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 as a placeholder. Any app placements you change here will be the same for all of your theme's product pages.
💡 If you select Homepage here, you would 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
2
Save or Discard Changes
  • These are the final controls you would use if you would like to save any changes you made here (by pressing Save), or if you would like to disregard your recent changes (by pressing Discard).
3
App location Controls
  • This is the main section of the Vitals editor that you will interact with.
  • This will contain the different Vitals apps that you have currently enabled on your store.
    • If you don't see a Vitals app here listed, you may need to go back to the Vitals Dashboard and enable the specific app.
  • Select the app that you would like its placement to be changed, and it will provide you with its specific placement controls:
  • The given controls will provide you with two options:
    • Place Near: This will contain a list of the most common Shopify store elements that you can choose from, where you would like this app to be near with. You can choose from the following store elements:
      • Add to Cart Form - The section starting from your product's variant options (when visitors are choosing a variant) down to the Add-to-Cart button.
      • Add to Cart Button - The Add-to-Cart button of the product page itself.
      • Product Description - The section where your product's description is located.
      • Product End Section - The section where your product page's footer is located.
    • Direction: Here you can select a combination of the location relative to the chosen store element above:
      • Above and Below - Determines where you would like the chosen app to appear relative to the store element (above the store element or below)
      • Inside and Outside - Depending on what you chose above, how the Vitals app will behave, relative to the store element's container (either inside that store element, or outside).
  • As you make your choices, a placeholder of that app will be seen on the Editor Preview, showing you its expected location on the.

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. Here's a quick list of the available apps on the home, cart, and collection pages.

Home page apps:

Cart page apps:

Collection page apps:

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?

First off, our Vitals apps may not behave optimally on pages created by Page Builders. 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:

1. Scroll to the bottom of the settings page of the app.

2. Click Read more under the HTML Snippet description.

3. Copy the HTML Snippet by clicking on the highlighted code.

4. Add this code in your theme's files directly into the code.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.