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 on the home, cart, and collection pages.
Home page apps:
- Featured Product Reviews
- Social Media Buttons
- Announcement Bars
- All-in-One Chat
- Facebook Messenger Chat
- Recent Sales Notifications
- Payment Logos
- Trust Seals & Badges
- Shoppable Instagram Feed
- Recently Viewed app
Cart page apps:
Collection page apps:
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.
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.
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.