Customizable sticky add to cart bar with upselling, countdown, and analytics and more.

### Step 1: Select a plan

After clicking the install button you'll be prompted to select a plan. The free plan gives you the basic functionality and the premium gives you access to design settings, upselling, countdown timers, analytics and more.

![select-plan](//images.ctfassets.net/ola7x25rff97/7GQOxdarVAMDi9UAE0SyXx/53075a7864eaed5aca129d14a627ca10/select-plan.png)

### Step 2: Create a backup

After selecting a plan you'll be taken to the snippet installer page. Before we install the app we'll want to create a backup theme.

In a new tab head to Online Store > Themes. Find the theme you plan to install on and click Actions > Duplicate theme. 

![create-duplicate](//images.ctfassets.net/ola7x25rff97/7d0g1qDWGXDJuVnDjhE5Rp/11f37125d062e0800a18a0d843493fbd/create-duplicate.png)

This should create a backup theme for us to use in case something goes wrong (highly unlikely).

### Step 3: Run the snippet installer

In order for Super Bar to work a small code snippet had to be placed within your theme.liquid file. The auto installer should work for 99% of cases. Select your target theme and click install.

![run installer](//images.ctfassets.net/ola7x25rff97/706NCNS4kzR1taXja8iK08/3f4299be64ae602e9b3f85b6ed3416a8/run_installer.png)

It will make you confirm that you've made a backup before proceeding. It should then only take 20 seconds to install. Once complete click the continue button:

![continue](//images.ctfassets.net/ola7x25rff97/7mzjbvLVQUUhR5BRebfikG/02b11434a65aa36fc7227c5be77877b6/continue.png)

If the auto-installer fails we have detailed manual installation instructions available [here](https://apphq.co/documentation/how-to-manually-install-super-bar-on-a-theme). You can also contact us at __superbar@apphq.co__ if you need assistance.

### Step 4: Enable the app

By default, Super Bar will be disabled. You can toggle the app on and off via the toggle switch locted on the top right. Enable the app.

![enable](//images.ctfassets.net/ola7x25rff97/vIzvhSQFf85vn7ihSSadf/6476e3ce7f7bcde8b27992fb91a671c6/enable.png)

### Step 5: Test that it's working

At this point the sticky add to cart bar should be active on your product pages. Head to your online store and verify that it is working.

### Step 6: Configure

Now that the app is working the last step is to configure it to your liking. You will find tons of configuration options. It should mostly be self explanatory. If you have any questions please check the rest of the documentation or contact us at superbar@apphq.co . 


Getting Started with Super Bar

In some rare cases Super Bar will not be able to automatically add the snippet to your theme. Not to worry though, manual installation is a breeze.

### Step 1: Copy the snippet

Start by coping the manual installation snippet found on the installation page.

![copy-snippet](//images.ctfassets.net/ola7x25rff97/7gJ1yZr9CWxY5utTYugYbz/609530e3956d32d4c8f03f7d014ac09c/copy-snippet.png)

### Step 2: Duplicate your theme

Next you'll want to head to Online Store > Themes and make a duplicate of your theme. This is done as a precaution in case anything goes wrong. 

![create-duplicate](//images.ctfassets.net/ola7x25rff97/7d0g1qDWGXDJuVnDjhE5Rp/11f37125d062e0800a18a0d843493fbd/create-duplicate.png)

### Step 3: Open the code editor

Open the code editor on your theme by going to Actions > Edit Code.

![edit-code](//images.ctfassets.net/ola7x25rff97/4WyQ7mRXhu3guaYj4U4DTb/5a6af5df954dbd18c4dde946f9a46370/edit-code.png)

### Step 4: Open the theme.liquid file

On the left sidebar you'll see a big list of all the files that make up your theme. Open the __theme.liquid__ file located in the layout section.

![open-theme](//images.ctfassets.net/ola7x25rff97/6Go91C7C0XeN3Tonm5jfqi/ca88a3c8dbd5f339b7b860df8ab9500d/open-theme.png)

### Step 5: Paste in the snippet before the closing body

Scroll to the bottom of the file and locate the closing __`</body>`__ tag. __Make sure it is `</body>` exactly and NOT `<body>`__. Paste the copied snippet on a new line above.

![paste-snippet](//images.ctfassets.net/ola7x25rff97/1MlrNQRIoPl8J0NgfNSTpu/1a48fe7f7f616b4c61b3bb45d653aa72/paste-snippet.png)

How to manually install Super Bar on a theme

On the Super Bar settings page you will find the "__Trigger point__" setting. This setting controllers how many pixels down the page Super Bar should reveal itself. The lower the number the sooner it will display.

To show Super Bar at all times you'll want to set this number to zero.

![trigger-point-zero](//images.ctfassets.net/ola7x25rff97/4lw2DC1Czs4Xv25D6Ieqjt/c0398a408e51755fa06488187be03fc9/trigger-point-zero.png)

How do I show Super Bar at all times

On the Super Bar settings page you will find the "__Trigger point__" setting. This setting controllers how many pixels down the page Super Bar should reveal itself. The lower the number the sooner it will display.

![trigger-point](//images.ctfassets.net/ola7x25rff97/4xWOYxYDuMHxvlXU7nN0R9/7273fd72a2ab7ecfedad95d9f11dc7b0/trigger-point.png)


How do I control when Super Bar displays

### Built in Slide Cart support

We are actually the developers behind the #1 cart drawer app on Shopify [Slide Cart](https://apphq.co/apps/slide-cart). Slide Cart works with Super Bar out of the box, and I'd highly recommend checking it out.

### Using another app or a theme's cart drawer

Using a third party cart drawer will be a little more difficult. __If you're not familiar with your cart drawers workings you'll have to contact its developers__, but the basic steps go like this...

#### Change the add behavior

Start by changing your add to cart behavior to nothing. This will stop any cart/checkout redirects that may be happening from Super Bar.

![nothing](//images.ctfassets.net/ola7x25rff97/oO20B8UG3B2gSUWPp9e58/a71739fc25c19fda4b805269c291c5e5/nothing.png)

#### Custom javascript

Next click the "reveal advanced settings" button. This will reveal the add to cart javascript field.

![js](//images.ctfassets.net/ola7x25rff97/3BY9QUurPu3ZOHKPlhTeCP/0b566b4ebc47286fdce4fbb29a7d0fa8/js.png)

In this field you can place any javascript you wish to run upon add to cart. The javascript will have the product and variant variables available to them. __Most cart drawers should have a function you can run here, but you'll have to check with the developers.__


How do I open my cart drawer upon add to cart

If something else on the page is overlapping Super Bar you will want to increase Super Bar's z-index value. This variable controls the apps vertical position on the page. The higher the value the more "on top" the app will be.

### Reveal advanced options

The z-index setting is behind the advanced settings button. Start by clicking the button.

![reveal](//images.ctfassets.net/ola7x25rff97/73GtPXs1NBXu9TZeP2PmYH/abc7ecc0767a31ea0d1094e7c6e29226/reveal.png)

### Increase the value

From here you'll see the z-index field. The highest possible value is __2147483647__ . A lot of other apps put their z-index very high by default.  We recommend using the max 2147483647 and only lowering it if problems arise.

![z-index](//images.ctfassets.net/ola7x25rff97/48nxXvfhQGWOGhFnaYUGK1/e9fdf1fdee3d474b2184839c26126dea/z-index.png)


What to do when other elements are overlapping Super Bar

### Kinds of upselling

Super Bar offers three different kinds of upselling. Here's a quick break down of each one.

#### Add to cart upselling

Add to cart upselling is the most specific and takes preference over all other kinds. Within the app interface you'll be able to create a table of rules "when X is added to cart sell Y". Super Bar will search the table of rules and if a match is found it will upsell that item. This kind of upselling only works on the product page.

![add-upsells](//images.ctfassets.net/ola7x25rff97/2ALhWJC8ifdmN4KULSKS5O/1acf4968a767be2a10bf865302d7f4f8/add-upsells.png)

#### Recommended product upselling

Recommended product upselling makes use of Shopify's [recommended product api](https://shopify.dev/docs/themes/ajax-api/reference/product-recommendations). Upon page load Super Bar will send the contents of your cart to this api and upsell whatever products come back. This is not customizable. If enabled this will be used if add to cart upselling comes up blank or is disabled.

#### Fallback upselling

Fallback upselling allows you to select products you wish to upsell if the methods above come up blank or are disabled.

![fallback](//images.ctfassets.net/ola7x25rff97/4UQEktG8WJZHFgCy8Z4gWn/d71440162812612a0e0560e67093e653/fallback.png)

### Offpage upselling

Offpage upselling allows you to sell upsell additional products while your customers are browsing other parts of your store (non-product pages). It works by showing Super Bar on page with the upsell methods above (excluding add to cart upselling). 


Upselling items with Super Bar

Keep your product form visible at all times to increase your conversion rates.

increase conversion rates

Increase conversion rates

Match any theme or design with powerful design customization options.

Tons of design options which will allow you to match any theme or design.

customizable

Customizable

Allow customers to skip the cart page and complete their purchase quicker.

Faster checkout

app icon

This is exactly what i was looking for. Excellent app. If you need reviews, look no further than this.

Very impressed with Super Bar. Easy to setup and customer service was super fast, responsive, and professional. Very satisfied thus far!

Amazing app and brilliant customer services! Highly recommended! Got my store setup in no time and this app improved the website a lot.


App works very well for me, and also to mention the great assistance I've got from Robert who got a tech issue resolved quickly and efficiently for me too, much appreciated!


The app is exactly what we looked for. Very easy and quick to set up. The design is clear and enhanced customer's experience. There is an option to offer more products at the checkout which is great to increase sales. The technical support is excellent and very prompt. Fully recommended.

Super Bar

Key Features

Increase conversion rates

Customizable

Faster checkout

What people are saying

LeeJay stores

Tasty Cookies Inc.

Smartech Virtual Store

Dead Eye Club

Mon Petit Café

What are you waiting for