Editing Themes

If you are using one of Big Commerce's theme, then here are the steps to follow to inject the widgets:

Cornerstone Theme

Step 1

Open the navigation.html file in the theme files editor. File editor can be found at Bigcommerce store’s admin dashboard at Storefront > Themes > Current Theme > Advanced > Edit Theme Files. If you can not see the Edit Theme Files option in Current Theme > Advanced, then you need to make a copy of the theme and use the copy instead. Due to how the BigCommerce theme works, you can only edit the copy of the theme1.

Step 2

Once file editor is open in your browser, locate navigation.html at templates > components > common

Copy and paste the below code in navigation.html before the cart item <li>.

<style scoped>
@media(max-width: 480px) {
    .shoptoken-account-icon {
        display: block; 
        position: absolute; 
        right: 40px
    }   
}
</style>

<li class="navUser-item shoptoken-account-icon">
    <a class="navUser-action" id="shoptoken-account-icon">
        <span></span>
    </a>
</li>

Step 3

Save the file by clicking on “Save and Apply file” button and verify the new icon is added next to the cart icon.

For Mobile: The above code will automatically work for mobile devices as well. In case the positioning of the icon is incorrect, you could override it by changing the right, left, top or bottom properties of the element. Note that the element is absolutely positioned for mobile devices.

Other Themes

Step 1

Find the file where the top navigation containing the cart icon is rendered. If you can not see the Edit Theme Files option in Current Theme > Advanced, then you need to make a copy of the theme and use the copy instead. Due to how the BigCommerce theme works, you can only edit the copy of the theme.

Step 2

Locate the code which renders the cart icon. In most themes it will be a <li> element with a “navUser-item” class. Copy and paste the code which renders the cart icon and remove everything except for the <li> element and its immediate child <a> element. Set the id of the <li> element to “shoptoken-account-icon”. Your newly added code should look something like:

<li class="navUser-item" id="shoptoken-account-icon">
    <a class="navUser-action" part=”foo”>
        <span>ST</span>
    </a>
</li>

LTV.AI App will automatically inject a dynamic element based on the provided id.

For Mobile: The above code will automatically work for mobile devices as well. In case the positioning of the icon is incorrect, your developer can easily add custom styling to the <li> element. Eg. check below code which applied style only for mobile:

<style scoped>
@media(max-width: 480px) {
    .shoptoken-account-icon {
        display: block; 
        position: absolute; 
        right: 40px
    }   
}
</style>
<li class="navUser-item shoptoken-account-icon" id="shoptoken-account-icon">
    <a class="navUser-action" data-options="align:right">
        <span>ST</span>
    </a>
</li>

Disclaimer: If the theme is updated either by installing a new theme or modifying the files of the existing theme, then the code snippets added for the LTV.AI app may get overwritten. In that case the widgets will stop displaying in the storefront but the web-js will still work as expected.

Make sure to add back the above code snippets in such a scenario.

Reference Edit Theme Files