How to customize embedded Buy Now buttons for my website?
In this article:
What options are there to customize an embedded Buy Now button?
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.
What options are there to customize an embedded Buy Now button?
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:
- Matching them to your Sellfy.com storefront by adjusting their color and corner shape
- 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 embedded button code paired with a button that's entirely customized by a seller:
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.
- Go to the Store customizer
- Scroll down to Button styles
- Change the button color, text color, and corner shape and outline
- Press Publish
Note: If you're using Sellfy's embed method, the changes you make to the button styles in the store customizer will also affect the embed options.
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:
<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>