A Shopify cart drawer app complete with upselling, rewards and announcements. Increase average order value and improve customer experiences.

After installing Slide Cart, you can get up and running in a few simple clicks.

Certain themes already has a cart drawer / popup cart built in. If your store does you will want to disable it before enabling slide cart. An option to disable it is generally found in theme settings. Head to Online Store > Themes > Customize. 

![getting started 1](https://cdn.apphq.co/apphq/slidecart/docs/getting-started/getting-started-1.jpg)

From here check in theme settings for an option to disable it. Every theme is different, on the default theme it’s under “Add to cart notification”. Disable it and save your settings.

![getting started 1](https://cdn.apphq.co/apphq/slidecart/docs/getting-started/getting-started-2.jpg)

Now that we’ve cleared the floor for Slide Cart we can head to the app settings page and enable it via the toggle switch located in the header. This will activate the cart on your live store.

![getting started 1](https://cdn.apphq.co/apphq/slidecart/docs/getting-started/getting-started-3.jpg)

Optionally you can change the settings to match your theme better. If your store has a dark color scheme use “dark mode”. We also recommend setting the accent color to your theme’s primary color.

Getting started with Slide Cart

Changing Slide Cart’s language is done the settings page. Start by navigating to the language section and clicking the button to reveal the fields. 

![enable rewards](https://cdn.apphq.co/apphq/slidecart/docs/language/language-1.jpg) 

From here you can alter all the language used in the cart. Remember to save your settings once complete.

How do I change Slide Cart’s language

Announcements are only available on our premium plan. Once upgraded adding announcements items is easy. 

From the settings page scroll down to the announcements module section. From here you will find a form where you can create announcements. You can create as many as you’d like.

![add announcement](https://cdn.apphq.co/apphq/slidecart/docs/announcements/announcements-1.jpg)

Once complete toggle the enabled checkbox and save your settings.

![add announcement](https://cdn.apphq.co/apphq/slidecart/docs/announcements/announcements-2.jpg)

If a cart has multiple announcements they will be displayed in a slider. You can reorder announcements using the drag handles in table.

How do I make cart announcements?

Uninstalling Slide Cart is as simple as deleting the app. If you preformed the fast install you will want to remove the pasted in snippet, and if you added cart count data attributes you will want to remove them as well.

How do I uninstall Slide Cart?

Upselling items is only available on our premium plan. Once upgraded adding upsell items is easy. 

From the setting page find the Upsell Module section. Once found click the empty box or add product button.

![Add upsell item](https://cdn.apphq.co/apphq/slidecart/docs/upsell/upsell-1.jpg)

A new window will pop up where you can select the product you wish to upsell. Once selected click the add button on the bottom right corner.

![Add upsell item](https://cdn.apphq.co/apphq/slidecart/docs/upsell/upsell-2.jpg)

Repeat the process if you wish to additional items (max of five). Once complete toggle the enable checkbox and save your settings.

![Add upsell item](https://cdn.apphq.co/apphq/slidecart/docs/upsell/upsell-3.jpg)

If a cart has multiple upsell items they will be displayed in a slider. You can reorder the items using the drag handles in table.

How do I upsell items in my cart?

Cart Rewards is for premium users only. Once upgraded setup is easy.

From the settings page scroll down to the rewards module section. In this section you’ll find a multitude of options to set up rewards. Let’s go over each of the fields.

- **Minimum amount** is $ amount needed for the customer to unlock the award.
- **Pre-Unlock text** is the text displayed before they unlock the reward. This should be something motivational (Example: Spend $15 more and receive free shipping!)
- **Post-Unlock text**  is the text displayed once the customer has reached the minimum. If you’re using auto discounts you can say something like “Congrats free shipping unlocked”. If Your using coupon codes you can say something like “Free shipping unlocked! Use code FREESHIP at checkout”.
- **Change shipping text when reward active** Enable this field if you want to change the shipping row once the minimum is met (Example: “Calculated at checkout” > “Free”).
- **Shipping text once reward is met** this is where you place the replacement text.

Once you’ve edited your settings toggle the enable checkbox and save your settings.

![enable rewards](https://cdn.apphq.co/apphq/slidecart/docs/rewards/rewards-1.jpg)

**Important:**

You are required to manually create an automatic discount or coupon code to match your settings. We highly recommend using automatic discounts over coupon codes.

![enable rewards](https://cdn.apphq.co/apphq/slidecart/docs/rewards/rewards-2.jpg)


How do I use the rewards module?

If you theme's cart count is out of sync you will have to preform a code edit to fix it.

The edit is simple, add attribute `data-cart-count` to any html tag you want Slide Cart to populate with the cart count.

```<span data-cart-count>{{ cart.item_count }}</span>```

Not comfortable making code edits? Please contact us at slidecart@apphq.co  and our team will be happy to perform this edit for you.

Why is my theme’s cart count wrong?

There are three reasons why an upsell item may not appear. 

1. The product is out of stock or unavailable. Verify that your product / variants are in stock and available for sale. 
2. The upsell product is already in your cart. An upsell item is only displayed when it’s not already in the users cart. 
3. The products handle has changed. The handle is a part of the url (example: mystore.com/products/<handle here>). If this is the case, delete and re-add the upsell product **(in the app not the actual product)**.

Why is my upsell item not appearing?

<div class="fluid-video">
<iframe src="https://www.youtube.com/embed/qfaKQV0zOhs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Shopify loads plugin scripts after everything else on the page. If your store uses a lot of plugins and images it can really slow things down for Slide Cart. You can dramatically speed up Slide Cart by manually pasting the “fast install” code below your <body> tag.

From the settings page copy the snippet to your clipboard.

![fast mode snippet](https://cdn.apphq.co/apphq/slidecart/docs/fast-mode/fast-mode-1.jpg)

Start by navigating to Online Store > Themes > Edit Code

![fast mode snippet](https://cdn.apphq.co/apphq/slidecart/docs/fast-mode/fast-mode-2.jpg)

From here open the layout/theme.liquid file and paste the snippet just below your `<body>` opening tag. Remember to save your changes.

![fast mode snippet](https://cdn.apphq.co/apphq/slidecart/docs/fast-mode/fast-mode-3-alt.jpg)

Installing the fast install snippet

Slide Cart checks for the variable `window.SLIDECART_FORMAT`. If it doesn’t find it Slide Cart will fallback to its own format. If you’d like Slide Cart to use your money_format preform a fast install. Alternatively you can paste the snippet below in your `<head>`. 

```<script>window.SLIDECART_FORMAT='{{shop.money_format}}';</script>``` 

Need help? Send an email to slidecart@apphq.co and we’ll be happy to assist you.

Why is Slide Cart not using my money format?

Slide Cart works with most currency converters once you install the fast install snippet. This snippet provides Slide Cart with your stores money_format and make it far more likely to work with converter apps. You can find details instructions on installing this snippet [here](https://apphq.co/documentation/why-is-slide-cart-loading-slow).

If your converter is still not working or you need help installing the snippet, don't hesitate to [reach out.](https://apphq.co/support).

__Tested and working:__
1. Auto Multi Currency Converter
2. Bold Multi‑Currency
3. Currency Converter HQ

Using Slide Cart with currency converters

<div class="fluid-video">
<iframe src="https://www.youtube.com/embed/Yiqr-AZNKxI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Slide Cart is compatible and can be used with PageFly page builder, it simply requires an additional snippet to be added to your theme.

__Pre-requisites:__
1. Make sure you've installed the fast-install snippet. Detailed instructions can be found [here](https://apphq.co/documentation/why-is-slide-cart-loading-slow).
2. Your PageFly add to cart behavior should be set to "stay on same page".

Once the pre-requisites have been met place the following snippet __below__ the fast install snippet.

    <script>
    window.onload = function() {
      window.__pagefly_helper_store__ && window.__pagefly_helper_store__.subscribe(function() {
        window.SLIDECART_UPDATE(function() {
          window.SLIDECART_OPEN()
        })
      })
    }
    </script>

If you need help or it's not working, do not hesitate to [reach out](https://apphq.co/support).

Using Slide Cart with PageFly

Slide Cart has a bunch of callbacks and methods you can use to implement custom code. The full list can be found below:

    /*
      Callbacks
    */

    window.SLIDECART_LOADED = function(cart) {
      // Fires once the cart has loaded
    }

    window.SLIDECART_UPDATED = function(cart) {
      // Fires whenevr slide cart has updated
    }

    window.SLIDECART_ADD_TO_CART = function({ id, quantity }) {
      // Fires whenever an item has been added to cart
    }

    window.SLIDECART_OPENED = function() {
      // Fires whenever Slide Cart has been opened
    }

    window.SLIDECART_CLOSED = function() {
      // Fires whenever Slide Cart has been closed
    }

    window.SLIDECART_REMOVED_FROM_CART = function({ id }) {
      // Fires whenever an item is removed from cart
    }

    window.SLIDECART_CHECKOUT = function() {
      // Fires whenever checkout is clicked
    }

    window.SLIDECART_UPSELL_ADD = function(id) {
      // Fires whenever an upsell item is added to cart
    }

    /*
      Methods
    */

    // Open slide cart
    window.SLIDECART_OPEN()

    // Close Slide Cart
    window.SLIDECART_CLOSE()

    // Update Slide Cart (refetches the cart object)
    window.SLIDECART_UPDATE(callback)

    // Manually update the cart object
    window.SLIDECART_SET_CART(cart)

    // Manually apply a coupon code
    window.SLIDECART_APPLY_DISCOUNT(coupon_code)

    // Get Slide Carts state.
    window.SLIDECART_STATE()

Slide Cart callbacks and methods

If your pixel events are not firing try enabling "compatibility mode" from the Slide Cart settings page. This setting will default the behavior to your theme and be far more likely to fire events.

![compatibility](//images.ctfassets.net/ola7x25rff97/1xHw8PhJWUi9CVQwPUrgxy/dbfc489350f18a12d4b99ca999f0ba54/compatibility.jpg)

If your events still fail to fire please [email us](https://apphq.co/support) and we will be happy to help.

Pixel tracking events and Slide Cart

Slide Cart is compatible and can be used with Gem Pages page builder, it simply requires an additional snippet to be added to your theme.

__Pre-requisites:__

1. Make sure you've installed the fast-install snippet. Detailed instructions can be found [here](https://apphq.co/documentation/why-is-slide-cart-loading-slow).

Once the pre-requisites have been met place the following snippet below the fast install snippet.

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('.gf_add-to-cart').forEach(function(el) {
          el.addEventListener('click', function() {
            setTimeout(function() {
              SLIDECART_UPDATE();
              SLIDECART_OPEN();
            },1000)
          })
        })
      })
    </script>

If you need help or it's not working, do not hesitate to <a target="_blank" href="https://apphq.co/support">reach out</a>.

Using Slide Cart with GemPages

Slide Cart is compatible and can be used with BEST Currency Converter, it simply requires an additional snippet to be added to your theme.

__Pre-requisites:__

1. Make sure you've installed the fast-install snippet. Detailed instructions can be found [here](https://apphq.co/documentation/why-is-slide-cart-loading-slow).

Once the pre-requisites have been met place the following snippet below the fast install snippet.

    <script>
      window.SLIDECART_UPDATED = function() {
        DoublyGlobalCurrency.convertAll($('[name=doubly-currencies]').val())
      }
    </script>

If you need help or it's not working, do not hesitate to <a target="_blank" href="https://apphq.co/support">reach out</a>.

Using Slide Cart with BEST Currency Converter

Slide Cart is compatible and can be used with Bold Subscriptions. It should mostly work out of the box, but an additional snippet needs to be added in order to fix the prices in cart.

__Pre-requisites:__

1. Make sure you've installed the fast-install snippet. Detailed instructions can be found [here](https://apphq.co/documentation/why-is-slide-cart-loading-slow).

Once the pre-requisites have been met place the following snippet below the fast install snippet.

    <script>
      window.SLIDECART_UPDATED = function (cart) {
        if (
          typeof window.BOLD !== "undefined" &&
          typeof window.BOLD.common !== "undefined" &&
          typeof window.BOLD.common.cartDoctor !== "undefined"
        ) {
          var c = cart
          var newCart = window.BOLD.common.cartDoctor.fix(cart)

          for (var i = 0; i < newCart.items.length; i++) {
            var item = newCart.items[i]

            c.items[i].line_price = item.line_price
            c.items[i].original_line_price = item.original_line_price
          }

          c.total_discount = c.total_discount + (cart.total_price - newCart.total_price)
          c.total_price = newCart.total_price;

          window.SLIDECART_SET_CART(c);
        }
      };
    </script>

If you need help or it's not working, do not hesitate to <a target="_blank" href="https://apphq.co/support">reach out</a>.

Using Slide Cart with Bold Subscriptions

Slide Cart is compatible and can be used with Also Bought. It should mostly work out of the box, but an additional snippet needs to be added in order to fix the prices in cart.

__Pre-requisites:__

1. Make sure you've installed the fast-install snippet. Detailed instructions can be found [here](https://apphq.co/documentation/why-is-slide-cart-loading-slow).

Once the pre-requisites have been met place the following snippet below the fast install snippet.

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        $(document).on('mouseup', '.cbb-also-bought-add-to-cart-button', function() {
          setTimeout(function() {
            window.SLIDECART_UPDATE()
            window.SLIDECART_OPEN()
          }, 500)

          setTimeout(function() {
            window.SLIDECART_UPDATE()
          }, 1000)
        })
      })
    </script>

If you need help or it's not working, do not hesitate to <a target="_blank" href="https://apphq.co/support">reach out</a>.

Using Slide Cart with Also Bought

A more automated way to use Slide Cart with Weglot is currently being worked on. In the Weglot integration is possible using a custom script.

__Pre-requisites:__

1. Set up Weglot on your store with the desired languages.

2. Make sure you've installed the fast-install snippet. Detailed instructions can be found [here](https://apphq.co/documentation/why-is-slide-cart-loading-slow).

__Step 1: Determine the two-letter language code.__

Before we add the custom script we must figure out the language code(s). A detailed list can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For example if I was translating to German the code would be "de".

____Step 2: Add the custom snippet__

Once you've determined the code copy and paste the snippet below into your theme.liquid file, just below the closing `<body>` tag.

    <script>
      window.SLIDECART_OPENED = function() {    
        var lang = document.querySelector('html').getAttribute('lang').toLowerCase()

        if (lang == "nl") {
          window.SLIDECART_STATE().settings.rewards_pre = "Spend *{{ amount }}* more for 10% off"
          window.SLIDECART_STATE().settings.rewards_post = "10% off activated!"
          window.SLIDECART_STATE().settings.rewards_amount = "100.00"
          window.SLIDECART_STATE().settings.rewards_shipping_text = "FREE"
          window.SLIDECART_STATE().settings.title_text = "Cart"
          window.SLIDECART_STATE().settings.note_text = "Add an optional note"
          window.SLIDECART_STATE().settings.note_placeholder_text = "Special instructions"
          window.SLIDECART_STATE().settings.discounts_label_text = "Discounts"
          window.SLIDECART_STATE().settings.shipping_label_text = "Shipping"
          window.SLIDECART_STATE().settings.shipping_value_text = "FREE"
          window.SLIDECART_STATE().settings.subtotal_label_text = "Subtotal"
          window.SLIDECART_STATE().settings.checkout_text = "Checkout"
          window.SLIDECART_STATE().settings.upsell_add_text = "Add"
          window.SLIDECART_STATE().settings.upsell_add_long_text = "Add to cart"
          window.SLIDECART_STATE().settings.upsell_unavailable_text = "Unavailable"
          window.SLIDECART_STATE().settings.empty_text = "Your cart is empty."
          window.SLIDECART_STATE().settings.custom_html_footer = ""
          window.SLIDECART_STATE().settings.custom_html_header = ""
          window.SLIDECART_STATE().settings.custom_html_checkout = ""
          window.SLIDECART_STATE().settings.custom_html_empty = ""
          window.SLIDECART_STATE().settings.continue_shopping_text = "Or continue shopping"
          window.SLIDECART_STATE().settings.discount_box_label = "Discount code"
          window.SLIDECART_STATE().settings.discount_box_error_text = "Invalid discount code"
          window.SLIDECART_STATE().settings.discount_box_button_text = "Apply"
          window.SLIDECART_STATE().settings.subscription_text = "Subscription"
          window.SLIDECART_STATE().settings.checkbox_text = "I agree to the terms of service."
          window.SLIDECART_STATE().settings.checkbox_note_text = "TOS accepted"
          window.SLIDECART_STATE().settings.vendor_key_text = "Vendor"
          window.SLIDECART_STATE().settings.product_type_key_text = "Product type"
          window.SLIDECART_STATE().settings.aupsell_heading = "Recommended Products"
        }
      }
    </script>

____Step 3: Add your translations__

Once the snippet is pasted in, change the language code inside of the snippet on line 5.

For example, If I was translating to spanish I would change `if (lang == "nl") {` to `if (lang == "es") {`

Afterwards translate all of the text within the quotes below and hit save.

____Step 4: Test your store__

Everything should be working at this point, give your store a test. If anything goes wrong please contact us and we'll help you get setup.

Once the pre-requisites have been met place the following snippet below the fast install snippet.

Using Slide Cart with Weglot

Upsell additional items right within your cart! Increase your average order value.

Upselling

Motivate customers to spend more by unlocking rewards when they hit minimums.

Rewards

Slide cart creates a far better user experience and was designed to convert.

Increase conversion rates

App Icon

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.

Awesome app and one of the best customer support you'll ever experience from Robert. If you need a better cart for your online store, this is the app. Very easy to use, integrate and awesome design. If you have any questions or request, Robert is very accommodating and replies very fast. Definitely, one of the best apps in Shopify.

The only Shopify app you need! Slide Cart has revolutionized my store making the user buying experiences seamless. Robert was on hand throughout the whole process making the integration easy. Cannot recommend this app enough!!

This is the App you want. I tried every single cart app in the Shopify store. Usually there is always something that doesn't work or the layout just looks cheap. This one was my last option and I just hit the jackpot with it. The App is working fast, the layout is great, it doesn't come with any unnecessary features that slow down your shop. It just works more that great. Easy to use, all important features like cross-selling and upselling modules. It also allows you to put those quick checkout buttons inside the cart so customer can checkout even quicker. Thank you so much.

screenshot-1

screenshot-2

screenshot-3

Slide Cart

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

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!


100's of design options

Interface

Super Bar

A Shopify app allowing you to build a help center or FAQ page. Increase customer satisfaction and reduce support email.

Now that you have HelpHQ installed you’re ready to start building your Help Center.

A HelpHQ help center is made of **collections** and **articles**. A collection holds groups of related questions.

### Step 1

You can create your first collection by clicking the “Create collection” button on the welcome screen.

![](https://cdn.apphq.co/apphq/helphq/docs/getting-started/1.png)

This will take you to the collection creator page. From here you can enter basic details and select an icon to represent your collection. Click the create button on the right once finished.

![](https://cdn.apphq.co/apphq/helphq/docs/getting-started/2.png)

### Step 2

Now that we have a collection created we’re ready to add our first help article. Click the big plus on the upper right and then “New article”.

![](https://cdn.apphq.co/apphq/helphq/docs/getting-started/3.png)

This we’ll take you to the article creator page. You can enter your article content on the left and additional details on the right. Click create article once finished.

![](https://cdn.apphq.co/apphq/helphq/docs/getting-started/4.png)

### Step 3

You can customize your HelpHQ page by heading to the settings page. Navigate there by clicking the link up top. Here you will find an array of settings you can customize to your liking. Click Saved when finished.

![](https://cdn.apphq.co/apphq/helphq/docs/getting-started/5.png)

### Step 4

You can view you’re newly created by clicking the help center by clicking the button on the top right.

![](https://cdn.apphq.co/apphq/helphq/docs/getting-started/6.png)

Getting started with Help Center HQ

### Step 1

You can change your help centers appearance by visiting the settings page. Get there by clicked the link located in the header.

![](https://cdn.apphq.co/apphq/helphq/docs/change-appearance/1.png)

### Step 2

From here you will find a variety of color and layout options. Make some changes then press save.

![](https://cdn.apphq.co/apphq/helphq/docs/change-appearance/2.png)

How do I change my help center's appearance?

### Step 1

Navigation to “Online Store > Pages”.

![](https://cdn.apphq.co/apphq/helphq/docs/change-url/1.png)

### Step 2

Click on the HelpHQ page.

![](https://cdn.apphq.co/apphq/helphq/docs/change-url/2.png)

### Step 3

Scroll to the bottom and click “Edit website SEO”

![](https://cdn.apphq.co/apphq/helphq/docs/change-url/3.png)

### Step 4

Edit the url and save your changes.

![](https://cdn.apphq.co/apphq/helphq/docs/change-url/4.png)

How do I change my help center url?

**Note:** This is an advanced article. If you’re not sure what you’re doing email us at [helphq@apphq.co](mailto:helphq@apphq.co) for free installation on your store.

By default HelpHQ takes over the entire page view. More commonly you’ll want to bring along you theme’s header and footer for the ride. Don't worry, HelpHQ can be plugged in where ever you’d like.

### Step 1

First we’ll need to grab the advanced installation code.

    <div id="help-hq-manual"></div><script type="text/javascript">window.HELPHQ_DOMAIN = '{{ shop.permanent_domain }}'; window.HELPHQ_SHOP = '{{ shop.name }}'; (function() { var url = 'https://d13rdz7z89sikw.cloudfront.net/helphq/helphq.js?' + new Date().getTime(); var s = document.createElement('script'); s.type = 'text/javascript'; s.src = url; var x = document.querySelector('body'); x.appendChild(s); })()</script>

Additionally, if you ever need the code again it can be found on the settings page.

### Step 2

Head to “Online Store > Theme” and click “Edit code”.

![](https://cdn.apphq.co/apphq/helphq/docs/plug-into-theme/3.png)

### Step 3

Create a new page template and paste the code wherever you’d like HelpHQ to appear. Click “Save” once complete.

![](https://cdn.apphq.co/apphq/helphq/docs/plug-into-theme/4.png)

![](https://cdn.apphq.co/apphq/helphq/docs/plug-into-theme/5.png)

### Step 4

Head to “Online Store > Pages” and select the HelpHQ Page. Select our newly created template and click save.

![](https://cdn.apphq.co/apphq/helphq/docs/plug-into-theme/6.png)

How do I plug HelpHQ into my theme body?

### Step 1 
Navigate to the articles index page by clicking the link in the header. ![](https://cdn.apphq.co/apphq/helphq/docs/rearrange-articles/1.png)

 ### Step 2
 Selct the collection you wish to rearrange on the sidebar. ![](https://cdn.apphq.co/apphq/helphq/docs/rearrange-articles/2.png) 

### Step 3 
Drag and drop reoraganize the articles. ![](https://cdn.apphq.co/apphq/helphq/docs/rearrange-articles/3.png)

How do I rearrange my articles?

### Step 1

Navigate to the collections page by clicking the link in the header.

![](https://cdn.apphq.co/apphq/helphq/docs/rearrange-collections/1.png)

### Step 2

From here you can drag and drop reorganize the articles.

![](https://cdn.apphq.co/apphq/helphq/docs/rearrange-collections/2.png)

How do I rearrange my collections?

By default the contact us block is hidden. Enabling it can be done in two simple steps. 

### Step 1 

Head to the settings page by clicking the link in the header. ![](https://cdn.apphq.co/apphq/helphq/docs/show-contact/1.png)

### Step 2 

Check the “Show contact us block?” checkbox and select a page you wish for the block to direct users to (usually this would be a contact form page). ![](https://cdn.apphq.co/apphq/helphq/docs/show-contact/2.png)

How do I show the contact us block?

Collect helpfulness feedback from users and easily discover which articles work and which don't.

User Satisfaction

Users can easily find the answer they are looking for with our powerful instant search technology.

Instant Search

 HelpHQ is built to be easily customizable and look great when plugged into any theme or design.

This App is brilliant, I used it to built my help center/FAQ page and it really works perfectly and is exactly what I needed. It has a very professional layout and design ( not like other apps out there) easy to use for customers as you can categorize you're FAQ questions in a very interactive way. It has customers feedback button (thumbs up/thumbs down) for each FAQs which is great for your store. I highly recommend it.

We needed to reduce the number of phone calls by providing self-help and general information to browsers & customers. This is so much better than dull old FAQs. we love it, Easy to set up and use. Highly recommended!

We wanted to create a professional help center page with all the faq and articles with an easy to navigate design. This is the only app that I found that does just that. Best of all it’s easy to use, (our old faq app was so slow and design terrible) so best of all, we reached out to the developer to request customizations and he implemented them for us in a day! Really great customer service!

The most professional FAQ APP you could hope for. 10/10. Worth every penny. Makes your shop very organized. Enterprise-class APP.

Help Center HQ

Add support for 168+ currencies to your Shopify store. Empower foreign visitors and increase customer sales.

You can place any custom styles within the “custom css” box located at the bottom of the settings page.

Loading custom Currency Converter HQ styles

You can alter the currency switcher’s appearance via the color selectors under design settings. For further customizations you will have to use the “custom css” box located towards the bottom of the settings page.

Customizing Currency Converter HQ to match your theme

Simply check the checkbox (within premium settings). Please note that it will not auto switch if you’ve already manually selected another currency. Clear your cookies if that happens to you.

Enabling currency auto-switching

Currency Converter HQ can be enabled via the toggle switch (located in the header). Remember to save after toggling it.

Enabling Currency Converter HQ

Getting started with Currency Converter HQ is easy as pie. After you have installed the app to your Shopify store, you will need to update your shops currency format settings. From your shopify administration panel head to the **Settings > General page**.

![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/getting-started-1.jpg)

Once on this page scroll down to the Store currency section. In this section you will find a link Change formatting, click it to open up it’s options.

![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/getting-started-2.jpg)

You will have to edit the HTML with currency and HTML without currency fields. All you have to do is paste `<span class=money>` on the left of any existing text and `</span>` on the right.

![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/getting-started-3.jpg)

Once complete, save your settings.

At this point everything else can be done through the interface of the app. Open up the Currency Converter HQ app by navigating to **Apps > Currency Converter HQ** in your Shopify admin panel. This is where you will find all our apps configuration settings.

The first thing we will want to do is add some additional currencies to our store. You can add our entire library of currencies via the **Add all** button, or add select currencies via the **Add a currency** button.

![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/getting-started-4.jpg)

Once you’ve added your desired currencies, enable the app via the toggle switch in the header. Turn the plugin on and press save.

![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/getting-started-5.jpg)

Currency Converter HQ you should now be running successfully on your store, test it out!

Getting Started With Currency Converter HQ

Our currency switcher can be placed anywhere you’d like. To manually place the switcher start by enabling “Manual placement mode”. You’ll find the checkbox under design settings. Remember to press save after. 

![manually](https://cdn.apphq.co/apphq/currencyhq/docs/manually-place-1.jpg) 

Once enabled you’ll be presented with a code snippet. Please this snippet wherever you would like the currency switcher to place itself.

Manually placing Currency Converter HQ

You can drag and drop reorganize currencies. To do so, grab a currencies by the drag handle (located on the left side) and drag it to a new location. 

![rearrange](https://cdn.apphq.co/apphq/currencyhq/docs/reorder-1.jpg)

Manually arranging currencies

Premium users have the ability to remove decimals. You’ll find this option within the premium settings section.

Remove decimals

Currencies can be removed via the trash button. These buttons are located on the right side of each row. Alternatively you can remove all currencies at once using the red “Remove all” button. 

![Removing](https://cdn.apphq.co/apphq/currencyhq/docs/remove-1.jpg)

Removing currencies

Premium users have the ability to round decimals to any number. You’ll find this option within the premium settings section.

Rounding decimals

Currency Converter HQ can be uninstalled by deleting the app and reverting your currency formatting settings. Delete the app my navigating to Apps (in the shopify dashboard) and clicking the trash can icon next to the app. ![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/uninstall-1.jpg) Revert your currency formatting settings by heading to the Settings > General page. ![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/getting-started-1.jpg) Once on this page scroll down to the Store currency section. In this section you will find a link Change formatting, click it to open up its options. ![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/getting-started-2.jpg) In both the HTML with currency and HTML without currency fields remove <span class=money> on the left and </span> on the right. ![Currency settings](https://cdn.apphq.co/apphq/currencyhq/docs/uninstall-2.jpg) Save your settings to complete uninstallation.

Uninstalling Currency Converter HQ

Start my navigating to the plan page. You’ll find the link to this page located in the header of the app settings dashboard. 

![upgrade](https://cdn.apphq.co/apphq/currencyhq/docs/upgrade-1.jpg) 

From this page click the big “Upgrade now” button and accept the charge. 

![upgrade](https://cdn.apphq.co/apphq/currencyhq/docs/upgrade-2.jpg)

Upgrading Currency Converter HQ to premium

Instantly add support for 184+ currencies to your store. Encourage and increase international sales.

168+ Currencies

Switch prices automatically based on your customers location. Create a smoother experience for customers.

Automatically Convert Prices

Showing prices in your customers local currency can increase conversion rates, decrease cart abandonment, and take your sales to the next level.

Increase sales

I've never used a better app if anyone is looking for a currency app. this is the one. This app is fast and changes the currency in an instant, it's fairly simple to use also. 10/10 recommend.

Easy to integrate into my Store and super clear the given instructions to customize and run it. I like very much the design and the colors, that I believe, will contribute a lot to my customers when my Store will be launched. It's always welcome to know how much money (in your own local currency) you're spending, in order client will be able to have the control of it, without further confusions and avoided any sort of inconvenience. I bet this App will be a wonderful contribution to my Customers and my Store.

Great app! Finally I can have the option of different currencies for my customers to choose from. Thank you guys!

It was simple to install and configure. You can place it in most areas on the store. Looks great and functional.

Currency Converter HQ

Shopify product descriptions with tabs, accordions, switchers, and more! Increase customer sales and improve SEO.

You can get up and running in just a few simple steps. After installing the first thing you will have to do is select a plan. Find the plan that best fits your needs and press the corresponding button at the bottom of the page.

![doc image](https://cdn.apphq.co/apphq/apd/docs/getting-started/getting-started-1.jpg)

Once you select a plan you’ll be directed to the installation page. Advanced product descriptions requires a minor edit to your theme to function properly. This page contains an auto-installer and manual instructions. We recommend running the auto installer. After backing up your theme, select the theme you would like to install on and press “Perform installation”.

![doc image](https://cdn.apphq.co/apphq/apd/docs/getting-started/getting-started-2.jpg)

Once the installer completes press the continue button. If the installer failed please follow the manual instructions or contact us at apd@apphq.co.

![doc image](https://cdn.apphq.co/apphq/apd/docs/getting-started/getting-started-3.jpg)

After pressing continue you’ll be directed to the main settings page. This page contains all the global settings (defaults) for your descriptions. Here you can change colors and select your description style.

![doc image](https://cdn.apphq.co/apphq/apd/docs/getting-started/getting-started-4.jpg)

Now that you’re configured lets create a description. Navigate to the product page you wish to add a description to. From here click the “more actions” button and find “Edit advanced description”.

![doc image](https://cdn.apphq.co/apphq/apd/docs/getting-started/getting-started-5.jpg)

This will take you to the description editor page where you can manage your advanced description. On the left you’ll find product level settings as well as a reordering too. On the right you’ll see editors for your different sections.

![doc image](https://cdn.apphq.co/apphq/apd/docs/getting-started/getting-started-6.jpg)

Once completed press the save button on the top right. That’s it! You’ve just created your first advanced description. Visit your product page to see it in action.

Getting started with Advanced Product Descriptions

There are two options to create an advanced description. The first option is to navigate to the default shopify product admin page and click the “Edit advanced description” link inside of “more actions”.

![doc image](https://cdn.apphq.co/apphq/apd/docs/create/create-1.jpg)

The second option is to go to the products page (located in the header) and click on the product you wish to edit.

![doc image](https://cdn.apphq.co/apphq/apd/docs/create/create-2.jpg)

Both options will take you to the description editor page where you can create sections and configure your advanced descriptions.

How do I create an advanced description?

Deleting an advanced description is done through the editor page. The best way to find your description is to visit the descriptions page available through the header.

![doc image](https://cdn.apphq.co/apphq/apd/docs/delete/delete-1.jpg)

The descriptions page lists all your products which have advanced descriptions. Click the one you wish to delete. Inside the editor you’ll find an option to delete the description located in the header.

![doc image](https://cdn.apphq.co/apphq/apd/docs/delete/delete-2.jpg)


How do I delete an advanced description?

Description sections can be reordered via the reorder box found on the description editor page. Simply drag and drop the handle to reorder. Don’t forget to save once finished.

![doc image](https://cdn.apphq.co/apphq/apd/docs/uninstall/uninstall-1.jpg)

How do I reorder my description sections?

If you to uninstall advanced product descriptions please follow the steps below.

**Step 1**

Just in case, back up the theme you’re uninstalling on. Head to Online store > Themes and duplicate the theme you’ll be uninstalling on.

![doc image](https://cdn.apphq.co/apphq/apd/docs/uninstall/uninstall-1.jpg)

**Step 2**

Head to the uninstall page. The link is placed in the header.

![doc image](https://cdn.apphq.co/apphq/apd/docs/uninstall/uninstall-2.jpg)

**Step 3**

Select the theme you’re uninstalling on and run the uninstalled. Alternatively you’ll see manual instructions you can follow.

![doc image](https://cdn.apphq.co/apphq/apd/docs/uninstall/uninstall-3.jpg)

**Step 4**

Once the uninstaller finished press the continue button.

![doc image](https://cdn.apphq.co/apphq/apd/docs/uninstall/uninstall-4.jpg)

**Step 5**

Disable the app using the master switch on the settings page.

![doc image](https://cdn.apphq.co/apphq/apd/docs/uninstall/uninstall-5.jpg)

**Step 6 (optional)**

You have the option to store your advanced descriptions (in case you come back). If you’re sure you’ll never be back you’ll want to delete all your advanced descriptions.

![doc image](https://cdn.apphq.co/apphq/apd/docs/uninstall/uninstall-6.jpg)

**Step 7**

Uninstall the app. 

![doc image](https://cdn.apphq.co/apphq/apd/docs/uninstall/uninstall-7.jpg)


Uninstalling Advanced Product Descriptions

Increase the SEO on product pages with server rendered content-rich advanced product descriptions.

Increase seo

Increase SEO

No restrictions, create as many description sections as needed on a product to product level.

Unlimited sections

Unlimited Sections

All the customization options needed to create the perfect descriptions that match your theme.

Excellent app is LOVE IT! help me to make my descriptions so much organized and well presented, the best of all, THE SUPPORT I was having some challenges for my lack of knowledge and I got answers very quickly.

This app is great! It makes the product descriptions so much sleeker and best of all, since we're just starting out, we're taking advantage of the free plan. Originally, our product descriptions were long and scrolling, but now with the accordion, they improve the user experience, creating a more manageable product page. Additionally, customer service is 5-star. I had trouble getting the app installed because of an issue with our theme, and Robert was a great help. He had it fixed within a day, and we started to see our conversion rates climb. Thank you to the team that made this app possible and for great customer service!!

I used this app to better layout my description into easy to manage sections and i must say it is fantastic. it saves taking up alot of screen space. again a++++++++.

Very helpful and useful, the majority of these apps cost $50-$60 per month. With this app you can just get the same options a lot cheaper. Highly recommended.

Elevate your
Shopify store.

Trusted by top brands

Our apps

Slide Cart

Super Bar

Help Center HQ

Currency Converter HQ

Advanced Product Descriptions

The AppHQ Way

Plug in play

Match your brand

Built to scale

Fully customizable

Top-notch support

High performance

Elevate yourShopify store.

Trusted by top brands

Our apps

Slide Cart

Super Bar

Help Center HQ

Currency Converter HQ

Advanced Product Descriptions

Plug in play

Match your brand

Built to scale

Fully customizable

Top-notch support

High performance

Elevate your
Shopify store.