fbpx
Override Ekoma’s launcher

Override Ekoma’s launcher

Override Ekoma’s launcher

Created On
byekomaio
← All Topics
ekoma's widget

Override Ekoma's launcher

Ekoma’s widget is composed of two key elements for your store. The launcher is the button opening the second key element: the card. The card is what displays to your customers their point balance, loyalty, referral and VIP program information.

The design integration of your program onto your store is crucial. Sometimes, the two versions of the launcher Ekoma offers are not enough and you may want to overwrite the CSS attributes or perhaps even create your very own launcher. In this article, we’ll explain to you how to override Ekoma’s launcher.

With this tutorial you will be able to create menu items to open the card or even place custom CTA in your store to engage with your customers

Launcher's CSS attributes

In order to customize the css attributes of your launcher from your store, you will need some very basic understanding of CSS and knowing how it is handled on the platform hosting your online store.

Using Shopify? Checkout this article.
Using WooCommerce? Checkout this article.

 

CSS Attributes to overwrite

All CSS attributes of Ekoma are overwritable which gives store owners a lot of flexibility. In order to overwrite the launcher, here are the two selector you want to modify:

 

# Ekoma's Button attributes
.ekoma-launcher .ekoma-btn {
    font-size: 00px;
    padding: 00px 00px 00px 00px;
    margin: 00px 00px 00px 00px;
}

# Logo attributes
.ekoma-launcher .ekoma-btn img{
    max-height: 00px;
    max-width: 00px;
}

Note: Replace 00px by the value needed.

design

Touching code when we are not used to it can be overwhelming. But adding these lines to your CSS are Ekoma specific and non-breaking.

referral

Create your own launcher

Some the position of the launcher is just not ideal for your design and you may want to hide the original launcher and create your very own.

With a simple OnClick javascript event, you can programmatically toggle Ekoma’s card using the following:

window.ekoma_toggle();

Callling this Javascript method will toggle Ekoma’s card (If it’s closed, it will open it, and vice-versa).