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.

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 in the home, cart, and collection pages.

Home page apps:

Cart page apps:

Collection page apps:

Review Star Snippets

Here's how you can use the Editor.

Once logged in to your Vitals dashboard, you will be able to access the Editor here.

Choose the page type (Product page or Homepage).
Choose which app you want to move.
Select the position based on your page's elements:

Add to Cart Button
Add to Cart Form
Product Description
Product End Section - the section that we automatically insert after the main section contains the product pictures, the add to cart form, and product description. In this section, you'd normally want to add product reviews, product bundles, related products recently viewed.

Select where the app should be placed relative to the element - before or after?

Decide how you want to display the app relative to the container, inside or outside? This allows for a better fine-tuning of the positioning between various elements.

And you're done! Don't forget to save the changes you have just made using the Save button at the top of the page. Make sure to check your live store page afterward to see the 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 one you'll be able to re-enable the password.

Adding the HTML Snippet in a Theme's Code

You can also inject the app’s HTML Snippet in your theme files, 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.

If you are inexperienced with HTML or liquid code, you can always contact our Customer Support team to have the HTML Snippet injected for you or help with custom placement.