For a limited time we are offering free professional customization and installation with our paid plans, so you don’t have to do anything to get started!
Please to schedule this free service.

Change Appearance (Style) With CSS

Customizing how Banana Stand

The Banana Stand container will always be within a container with a class of banana-container,
so any styles you customize should be either within that class selection or within the banana-statement scope.

Although it might not be best practise, we recommend that you include CSS classes within your template customization. The
reason we recommend this is because it makes it much easier for you to update the display later and it keeps all your
code in one place. Here’s how easy it becomes:

Example #1: Change Color to Red

In this example we’re adding the following code to the button of the customization:

    .banana-statement { color: red; }

Changing Text and Templates

In addition to changing the CSS styles you can customize the actual content and HTML that gets rendered.

We use Shopify’s own Liquid Template System

Example #2: Only Recent Orders Message

Let’s say you don’t want to show anything except recent orders.
You can do this other ways but if you wanted to do it by modifying the template you would simply use the following template:

The new template code is:

<span class="banana-statement">
  {% if counts.orders > options.min_order_count_to_show %}
    <span class="banana-viewers-sentence banana-sentence">
      <span class="banana-count">{{ counts.orders }}</span>
      {% if counts.orders > 1 %}people{% else %}person{% endif %} bought this recently.
  {% endif %}

The possibilities are endless!

If you need help learning how to customize templates/css
feel free to and we’ll help!

Template Variables Available

Here is a list of all the template variables that are available to you when customizing templates with Liquid:

Name Data Type Description
counts.views Integer Total number of views for the current product (within the configured lookback period).
counts.orders Integer Total number of orders for the current product (within the configured lookback period).
counts.carts Integer Total number of times someone added the current product to their cart (within the configured lookback period).
options Hash (of mixed data) This contains a hash of configured settings.
params Hash (of mixed data) Hash of pass-through parameters that came from the request for the content.

Advanced: Pass-through Variables

If you need to pass data from your system to get rendered by Banana Stand, you can do this by setting the data
attributes on the Banana Stand container.

When the Banana Stand JS fetches the HTML content for rendering it will pass along the data attributes to your template so you can
reference them and even perform logic operations on them.

For more help with how this works please .