1. Home
  2. Knowledge Base
  3. Platform-specific Articles
  4. Shopify Articles
  5. How to Manually Integrate Into Your Shopify Cart Page
  1. Home
  2. Knowledge Base
  3. Cart Timers
  4. How to Manually Integrate Into Your Shopify Cart Page
  1. Home
  2. Knowledge Base
  3. Manually Integrate Fera
  4. How to Manually Integrate Into Your Shopify Cart Page

How to Manually Integrate Into Your Shopify Cart Page

In order to make Banana Stand show in your shopping cart for things such as Cart Timers, you’ll need to do a manual integration to integrate the container snippet into your store’s theme. As a result you’ll also be able to decide the placement of the Cart Timer bar.

While Banana Stand usually does this integration automatically upon installation, it is sometimes unable to do it automatically because the theme files are unrecognized or are not using a standard theme layout.

You can also follow along with our YouTube video here.

Integrating Into Your Theme

Because every theme is different, you’ll also have to use your inspection skills so you can find the right theme file to edit.

First of all, you should especially be familiar with frontend engineering (HTML/CSS and Liquid) so you can follow this guide and try to integrate on your own.

If you require help with integration please reach out to our support team and we’ll be able to help.

Step 1: Edit your Theme

You can watch this video to see how to edit your theme on Shopify.

Since it seems like all themes are unique this is where your inspection skills will especially come in handy. Use the search and find the relevant file which contains your product details display.

Step 2: Locate your product cart page block template.

Some especially common files are:

    Snippets

  • snippets/bold-cart.liquid
  • snippets/cart-drawer.liquid
  • snippets/form-cart.liquid
  • snippets/header-cart.liquid
  • snippets/small-cart.liquid
  • snippets/GPO_cart.liquid
  • snippets/wh_cart.liquid
  • snippets/block-cart-top.liquid
  • snippets/cart.liquid
  • snippets/cart-header.liquid
  • snippets/cartreview.liquid
  • snippets/header-top-cart.liquid
  • snippets/cart-form.liquid
  • snippets/cart-content.liquid
  • snippets/site-cart.liquid
  • snippets/cart-summary.liquid
  • snippets/snippet-cart.liquid
  • snippets/ajax-cart-template.liquid
  • snippets/cartpage-design1.liquid
  • snippets/cartpage-design2.liquid
  • Sections

  • sections/cart-template.liquid
  • sections/template-cart.liquid
  • sections/cart.liquid
  • sections/page-cart.liquid
  • sections/static-cart.liquid
  • sections/bingo-template-cart.liquid
  • sections/cart-template-new.liquid
  • sections/cart-new.liquid
  • Templates

  • templates/cart-without-spurit_po.liquid
  • templates/cart.liquid
  • templates/cart.html.liquid
  • templates/cart.liquid

Step 3: Insert snippet into desired location.

Put the following snippet where you want the Fera content that appears at the top of the cart (such as Cart Timers):

{% include 'banana-stand-cart-top-container' %}

After you’re done hit save so we can check to make sure integration was successful. It it seems like nothing happened try moving it to a different spot, typically after a </div> tag.

Step 4: Verify integration was successful.

Finally, go to your store, add a product to the cart and verify it was integrated. In addition, you want to make sure the code<div class="banana-container ... is present. Check this by opening up your HTML code inspector skill and searching for the word ‘banana’ so you can make sure your manual integration worked.

Step 5: Going Live

After you’ve confirmed that it is integrated properly you can set up a product view counter and as a result, see it go live in your collection pages. If it seems like it isn’t integrated, this may be because you either put the snippet in the wrong place or the wrong file. Try moving it and seeing what happens-it will probably take some trial and error!

Need help?

Please reach out to our support team and someone will point you in the right direction!

Also, keep in mind that Integration is FREE with any of our paid plans. Most of all contact our team so you can have the integration done for you if the instructions above don’t work.

Was this article helpful?

Related Articles