How to add a Vanta.js background to an ELLA 5.2 theme?

Store Design
1

Hello This í my First time posting on the boards here. My store is not open yet , but its published so you can see , I am using the ELLA 5.2 theme and I am trying to add a Vanta.js background to my page and I just can not seem to get it to work at all,And there is nothing anywhere online and im being serious on how to get this to work with shopify liquid. I need help really bad and I appreciate any help I do get, to make this work and make my store that much more incredible ! thank you x 100000. Oh also I took the vanta code out of my body , because my menu bar is all messed up now and squished to the left side

-Christopher

So here is the Vanta code [ im sure I messed it up] I also was using XO code app

{{ “shttps://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.21/vanta.fog.min.js” | | asset_url }}


<integrity;“sha512-JTc9bhBipYk+RaHC2q7ZIlC5lLOjgfxRltKQqmVDPUiDpCJp7RK+PTqlBKhCRFm+ICP9w9fUKl9ZKuRfV+GpbQ==”> <crossorigin;“anonymous”> <referrerpolicy;“no-referrer”>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js”>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js”>
var setVanta = (FOG)
{;
if (window.VANTA); window.VANTA.FOG;{{
el: “#vantajs”;
mouseControls: true;
touchControls: true;
gyroControls: false;
minHeight: 200.00;
minWidth: 200.00;
highlightColor: 0xb37bff;
midtoneColor: 0xf06199;
lowlightColor: 0x2693ff;
baseColor: 0xe3d4e3;
blurFactor: 0.52;
speed: 2.40;
zoom: 0.60;
}};

{% endif %}

{% if content_for_header contains “hga.helloshopowner.com” %}

{% render ‘hso-hello-google-analytics’ %}

{% endif %}


{{ ‘sca_affiliate.js’ | asset_url | script_tag }}

{% include “xo-insertcode-header” %}

{% if settings.layout_body == ‘full’ %}
{%- assign layout_class = ‘body-full’ -%}
{% elsif settings.layout_body == ‘boxed’ %}
{%- assign layout_class = ‘body-boxed’ -%}
{% endif %}

{% if settings.header_layout == ‘vertical’ %}
{%- assign header_class = ‘header-vertical-tpl’ -%}
{% elsif settings.header_layout == ‘parallax’ %}
{%- assign header_class = ‘header-parallax-tpl’ -%}
{% endif %}

{% if settings.layout_home == ‘layout_home_4’ %}
{%- assign home_class = ‘layout_home_4’ -%}
{% elsif settings.layout_home == ‘layout_home_5’ %}
{%- assign home_class = ‘layout_home_5’ -%}
{% elsif settings.layout_home == ‘layout_home_6’ %}
{%- assign home_class = ‘layout_home_6’ -%}
{% endif %}



{% include “xo-insertcode-body” %}

{% if template contains ‘index’ %}

{{ page_title | split: ‘|’ | first }}


{% endif %}
{% render ‘wrapper-header’ %}

{% if settings.header_layout == ‘vertical’ %}


{% endif %}

{% if settings.header_layout == ‘vertical’ %}
{% section ‘navigation-vertical-menu’ %}
{% endif %}
{% render ‘scheme’ %}



{{ content_for_layout }}

{% if settings.layout_style == ‘layout_style_surfup’ %}
{% section ‘home-brands’ %}
{% endif %}

{% if settings.enable_ask_an_expert %}
{% if settings.enable_ask_an_expert_sticky %}


{% endif %}
{% endif %}

{% if settings.footer_layout == ‘default’ %}
{% section ‘footer’ %}
{% elsif settings.footer_layout == ‘parallax’ %}
{% section ‘footer-parallax’ %}
{% elsif settings.footer_layout == ‘02’ %}
{% section ‘footer-2’ %}
{% elsif settings.footer_layout == ‘03’ %}
{% section ‘footer-3’ %}
{% elsif settings.footer_layout == ‘04’ %}
{% section ‘footer-4’ %}
{% elsif settings.footer_layout == ‘05’ %}
{% section ‘footer-5’ %}
{% elsif settings.footer_layout == ‘06’ %}
{% section ‘footer-6’ %}
{% elsif settings.footer_layout == ‘07’ %}
{% section ‘footer-7’ %}
{% elsif settings.footer_layout == ‘08’ %}
{% section ‘footer-8’ %}
{% elsif settings.footer_layout == ‘09’ %}
{% section ‘footer-9’ %}
{% endif %}


{% section ‘someone-purchased’ %}
{% section ‘GDPR-modal’ %}
{% if template contains ‘product’ %}
{% if settings.display_sticky %}
{% render ‘sticky-add-to-cart’ with product as product %}
{% endif %}
{% endif %}

{% if settings.enable_backtotop %}


{% endif %}

{% if settings.header_layout == ‘vertical’ %}


{% endif %}

{% if settings.enable_compare_product and template == ‘collection’ %}



<span class=“compare-text” {% if settings.enable_multilang %}data-translate=“collections.general.compare_selected”{% endif %}>{{ ‘collections.general.compare_selected’ | t }}



{% endif %}

{% render ‘footer_scripts’ %}

{% render ‘sweettooth-widgets’ %}

{% render ‘search-autocomplete’ %}

{% if settings.header_layout == ‘default’ %}
{% render ‘customer_links’ %}
{% else %}


{% render ‘customer_links’ %}
{% render ‘wrapper-top-cart’ %}

{% endif %}

{% render ‘size-chart’ %}

{% render ‘size-chart-quickview’ %}

{% render ‘message-modal’ %}

{% render ‘newsletter’ %}

{% if template contains ‘product’ or settings.enable_ask_an_expert_sticky %}
{% render ‘ask_an_expert’ %}
{% endif %}

{% if template contains ‘product’%}
{% render ‘compareColor-popup’ %}
{% endif %}

{% render ‘recently-viewed-products’%}



{% include “xo-insertcode-footer” %}

// any CSS you import will output into a single css file (app.css in this case)
import ‘../css/app.scss’;


body {
margin: 0;
width: 100%;
height: 100%;
font-family: ‘Poppins’, sans-serif
body {;
background-repeat: no-repeat;
background-attachment: fixed;
};
}
body {

}