How to customize embedded Buy Now buttons for my website?

In this article:

About embedded Buy Now button customization?

Customize button color and shape (simple)

Create a custom Buy Now button (advanced)

Recommended adjustments for multiple buttons on a single webpage 

Note: this article is about the buttons you may embed in your own website or blog, not the buttons on your Sellfy store page.


About embedded Buy Now button customization?

You can customize the Buy Now buttons to match your website or blog, thus offering a consistent experience to your customers. 

There are two levels of customization for the Sellfy embedded Buy now buttons:

  1. Matching them to your Sellfy.com storefront by adjusting their color and corner shape
  2. Creating a custom button using the HTML embed code 

A button that's customized to match your Sellfy.com store may look like so:

An example of a button that's entirely customized (custom-made and used by the seller Salt in Our Hair on their custom website):


Customize button color and shape to match your Sellfy store

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
  2. In the Customization editor, select Style and then scroll down to Button Style
  3. Change the button color, text color, and corner shape
  4. Click Save at the top


Create a custom Buy Now button

You can insert any image, link, button, etc. as a Buy now button on your website or blog.

To do that, you need to add the  sellfy-buy-button-custom class to the generated HTML embed code. 

Custom button or image

Here's an example of how your button and code may look like with custom class. In the code below, the link to the button image is https://example.com/images/button.png, which is just an illustration of what the image link can be. 

You can generate such a link for your custom buttons by uploading the button image onto a server. You may also use a reliable online button generator that will produce such a link for you.

<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>

Hyperlink in a text

You can also 'embed' the product checkout into a simple link, and then it may look something like this:

Buy the newest Photography preset now.

<a href="https://sellfy.com/p/[PRODUCT-KEY]/" id="[PRODUCT-KEY]" class="sellfy-buy-button sellfy-buy-button-custom">Buy the newest Photography preset now</a>
<script src="https://sellfy.com/js/api_buttons.js"></script>

As you can see in this HTML code snippet, the custom class is added and the text Buy the newest Photography preset now is also included, similar to how the button image source code (<img src="https://example.com/images/button.png">)is added in the example above. This is just one example and the wording is entirely up to you. 

This link is different from the regular link to your product page because, by clicking on it, the checkout pop-up for that specific product appears, whereas the regular link will take your customers to the product page.


Recommended adjustments for multiple buttons on a single webpage

If you have multiple buttons located on your 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 below. You can see that the first lines of code don't include the script, while the third one does.

<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>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us