How to customize "Buy Now" buttons for my website?

To offer a consistent and pleasant user experience for your customers, customize the "Buy now" button to match the style of your website or blog. Notice that this article is about the buttons you would embed in your own site, not the buttons on your Sellfy store page. 

There are two ways to customize the "Buy now" buttons for your site:

Through the Customization feature:

The customization feature is primarily meant for editing the looks of your Sellfy store. However, the button editor will also change how your buttons look on your website or blog. 

1. To customize the buttons navigate to "Store settings""Customization" in your user dashboard. 

2. In the Customization editor, select "Style" and then scroll down to "Button Style".

In the "Button style" editor, you can change the color of the button and its text, as well as the shape of the button corners. 

By changing the button embed code:

This option allows you to insert any image, link, button, etc. as your "Buy now" button.

To do that, you need to add sellfy-buy-button-custom class to your link. Here are examples of how your code may look like with custom class.

<a href="https://sellfy.com/p/[PRODUCT-KEY]/" id="[PRODUCT-KEY]" class="sellfy-buy-button sellfy-buy-button-custom"><img src="https://example.com/images/button.png"></a>
<script src="https://sellfy.com/js/api_buttons.js"></script>

This is text with a simple link that will also work.

This is text with a <a href="https://sellfy.com/p/[PRODUCT-KEY]/" id="[PRODUCT-KEY]" class="sellfy-buy-button sellfy-buy-button-custom">simple link</a> that will also work.
<script src="https://sellfy.com/js/api_buttons.js"></script>

If you have multiple buttons located on your page page, we recommend including the <script src="https://sellfy.com/js/api_buttons.js"></script> script only once - it will activate all instances of sellfy-buy-button class as shown here:



<a href="https://sellfy.com/p/[PRODUCT-KEY]/" id="[PRODUCT-KEY]" class="sellfy-buy-button"></a>
<a href="https://sellfy.com/p/[PRODUCT-KEY]/" id="[PRODUCT-KEY]" class="sellfy-buy-button"></a>
<a href="https://sellfy.com/p/[PRODUCT-KEY]/" id="[PRODUCT-KEY]" class="sellfy-buy-button" data-text="Get this deal!"></a>
<script src="https://sellfy.com/js/api_buttons.js"></script>

Still need help? Contact Us Contact Us