Add a custom button to the product page
The standard installation of the app adds a bright green button to your product page of your shop. The button is intended to be easily visible by your customers, but to avoid obscuring product information or site navigation it’s added to the edge of the page.
In some cases you may prefer a link or button embedded in the product page for serveral reasons.
- It can be easier for the customer to see
- If you have multiple product variants, you only want the button to appear when an out of stock variant is selected
- You want to maintain the aesthetic of the theme
There are three steps to doing this. First, you need to edit the product template and add your link or button. Secondly, edit update your app preferences to turn off the default button. Finally, test that everything is working.
Example: adding a custom link to a store product page
Let’s walkthrough this process.
Note: This simple tutorial only focuses on adding a link to a product page. If you're looking to setup a link or button on a another page, such as a product Collection page, take a look at the Collection page button tutorial.
1. Edit the product template
From the Shopify admin, open Template Editor and select product.liquid
Identify where in the page you want the link to appear. Often you can identify the correct place by the out of stock message the template shows to the user.
Add the link to your product template:
<a href="#" id="BIS_trigger">Notify me when available</a>
When the customer clicks this link I want the notification form to popup. This link won’t actually take the customer anywhere so I’ve set the href to
id of the link is important and lets the app identify this link as a trigger.
Save your template and check you can see it on an out of stock product.
2. Update app preferences
Now there is a custom link in the product page you probably don’t need the standard green button appearing on the edge of the page.
From the Back in Stock dashboard click Customize, Product page button. Switch the button to off and hit Save button settings.
3. Test the product page
Everything should now be wired up and ready to go. Visit your product page, click your link, and register a notification.
Check the default button is no longer visible and your link is working correctly.
I've added the link to a product that supports back order (or pre-ordering), but when I click the link the form doesn't appear.
Back in Stock defaults to ignoring variants that are are sold out, but available to order. It's easy to change this behavior. Open up Customize, Product page button. Under behavior ensure the Enable for pre-order is turned on, and hit Save.
If you have any problems or questions, or want to provide feedback on this guide, please get in touch by email at firstname.lastname@example.org