Convert +26% more website visitors into new trade customers with The Sellar Button
Installing The Sellar Button on your website
The Sellar button works with all websites and will use your own website fonts.
Want to stock our beers?
Trade customers can access our full product range, directly from us through Sellar. Click on the button below to view our availability.
- Full product availability
- Local direct delivery
- Nationwide delivery
- Pay by bank or card
- Invoice history
- Instant messaging
Step 1) Get your link from Sellar
Steps below or Watch video ▶️
1) Login to your dashboard and navigate to Share Availability in the menu bar
2) Configure your link. We would recommend the settings on the right where ‘Full availability’ is selected and ‘Large audience’, without Pricing. However if you wish to make pricing available for anyone with the link to see, you can enable this option.
3) Click ‘Copy Link’ to get your link.
Note
Orders from prospects that click on your link will be protected from incurring Opening Order Fees, even if they are not in your Sellar Customer List.
Step 2) Enter your Sellar availability link here then copy the code
✔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
text-align: center;
padding: 0;
margin: 0;
background-color: #ffffff; /* Ensure background color is set */
}
.sellar-wrapper {
text-align: center;
background-color: #ffffff; /* Ensure background color adapts if needed */
padding: 20px; /* Add padding to ensure component is centered nicely */
border-radius: 8px; /* Ensure wrapper has rounded corners */
}
.sellar-component {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9; /* Component background color with border-radius */
color: #000000; /* Always use black text color */
}
.sellar-component h3, .sellar-component p, .sellar-info h4 {
margin-bottom: 20px;
color: #000000; /* Always use black text color */
}
.sellar-component p {
font-size: 16px;
margin-bottom: 5px;
max-width: 90%;
margin: 0 auto 5px;
color: #000000; /* Always use black text color */
}
.sellar-button {
display: block;
margin: 20px auto;
}
.sellar-button img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.sellar-info {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.sellar-info ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #000000; /* Always use black text color */
}
.sellar-info li {
padding: 10px 20px;
border: 1px solid #ddd;
border-radius: 20px;
box-sizing: border-box;
background-color: #ffffff;
color: #000000; /* Always use black text color */
}
@media (max-width: 1024px) { /* Hide the pills on mobile and tablet devices */
.sellar-info {
display: none;
}
.sellar-component p {
max-width: 95%;
}
}
</style>
<title>Sellar Component</title>
</head>
<body>
<div class="sellar-wrapper">
<div class="sellar-component">
<h3>Want to stock our beers?</h3>
<p>Trade customers can access our full product range, directly from us through Sellar. Click on the button below to view our availability.</p>
<!-- Insert your custom Sellar availability link in the href attribute below -->
<a href="https://app.sellar.io/discover?utm_source=supplier-website&utm_medium=button&utm_campaign=sellar-button-supplier-website" class="sellar-button" target="_blank">
<img src="https://i.ibb.co/hCPQfwP/sellar-button.png" alt="Sellar Button">
</a>
<div class="sellar-info">
<ul>
<li>Full product availability</li>
<li>Local direct delivery</li>
<li>Nationwide delivery</li>
</ul>
<ul>
<li>Pay by bank or card</li>
<li>Invoice history</li>
<li>Instant messaging</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Instructions for adding the code snippet to your website
Shopify
1. Login to your Shopify admin panel.
2. Go to "Online Store" > "Themes".
3. Click on "Actions" > "Edit code".
4. Find the appropriate template file where you want to add the Sellar button.
5. Paste the code snippet into the desired location.
6. Save the changes and preview your store.
Squarespace
1. Login to your Squarespace account.
2. Go to the page where you want to add the Sellar button.
3. Click on "Edit" and then "+" to add a new block.
4. Select the "Code" block and paste the code snippet into it.
5. Save the changes and refresh the page.
Wix
1. Login to your Wix account.
2. Go to the editor of the page where you want to add the Sellar button.
3. Click on "Add" > "Embed" > "Embed a Widget".
4. Paste the code snippet into the HTML box.
5. Adjust the size and position as needed, then save the changes.
WooCommerce
1. Login to your WordPress admin panel.
2. Go to "Appearance" > "Editor".
3. Find the appropriate template file where you want to add the Sellar button.
4. Paste the code snippet into the desired location.
5. Save the changes and preview your site.
WordPress
1. Login to your WordPress admin panel.
2. Go to the page or post where you want to add the Sellar button.
3. Switch to the "Text" editor and paste the code snippet.
4. Save or update the page/post and preview it.