1. Home
  2. Knowledge Base
  3. Platform-specific Articles
  4. Shopify Articles
  5. Hypervisual Integration
  1. Home
  2. Knowledge Base
  3. FAQ
  4. Hypervisual Integration
  1. Home
  2. Knowledge Base
  3. Troubleshooting Articles
  4. Hypervisual Integration
  1. Home
  2. Knowledge Base
  3. Manually Integrate Fera
  4. Hypervisual Integration

Hypervisual Integration

Integration with Hypervisual App on Shopify

If you use other apps on shopify or theme/page builders you’re in luck, Fera.ai integrates with them! One such app is called Hypervisual Page Builder. This app lets you create beautiful, custom-designed landing and product pages without having to know anything about coding. They make it easy to customize and create your eCommerce store the way you want.

Using Fera.ai with Hypervisual

The Hypervisual support team is great, as is ours. So if you cannot figure out how to do something you can always reach out to either of us and we can work together to make sure everything is working. Basically, if you’re using the product.hypervisual template (you can see this in your theme code) you need to add some special code to get things working. This code is a “hook” to enable the Fera code to run after the product embed. This chunk of code will be added to the theme.liquid template file before the </head> code.

Code to add for the Product Detail Counter


<script>
window.HYPERVISUAL_CALLBACKS = {
afterProductEmbed: function() {
var data = $(this).data('productJson');
//$(this).append('<div class="banana-container banana-view-container" data-product_id="' + data.id + '" data-container_type="view"></div>');
$(this).append('<div class="banana-container banana-product-page-container" data-product_id="' + data.id + '" data-container_type="view"></div>');
}
}
</script>

Code to add for the Product List Counter


<script>
window.HYPERVISUAL_CALLBACKS = {
afterProductEmbed: function() {
var data = $(this).data('productJson');
//$(this).append('<div class="banana-container banana-view-container" data-product_id="' + data.id + '" data-container_type="view"></div>');
$(this).append('<div class="banana-container banana-list-container" data-product_id="' + data.id + '" data-container_type="list"></div>');
}
}
</script>

An Example

It should appear kind of like this in the code (for Product List snippet):

Hypervisual Code Snippet

Ask us for help!

If you need still need help getting things running just .

Was this article helpful?

Related Articles