How to set up back in stock button on collection/search pages
This tutorial requires the technical skill. If you feel difficult to do the following, don't hesitate to contact us. If you feel that's okay, let do it.
Open your theme
Open the snippet
Open the product card snippet. For example, we use the theme Dawn, we open snippets/card-product.liquid
You can do the same with themes:
Add the back in stock liquid code
<span data-osf-type="oos" data-osf-id="{{ card_product.id }}"></span>
If you have a custom product, you can use the HTML tag attribute
<span data-osf-type="oos" data-osf-product="{{ card_product | json }}"></span>
Note that: if the collection page uses the liquid variable product, please replace card_product to product
<span data-osf-type="oos" data-osf-id="{{ product.id }}"></span>
We have 3 options to display the back-instock button for collection pages: data-osf-oos-type="all|first|one". Let explain more:
1. If you want to show the button if all variants are sold-out, use the below:
<span data-osf-type="oos" data-osf-oos-type="all" data-osf-id="{{ card_product.id }}"></span>
2. If you want to show the button if the first variant is sold-out:
<span data-osf-type="oos" data-osf-oos-type="first" data-osf-id="{{ card_product.id }}"></span>
3. If you want to show the button if one of the product variants is sold out (This option is default)
<span data-osf-type="oos" data-osf-oos-type="one" data-osf-id="{{ card_product.id }}"></span>
In the demo, we use the theme Dawn, we add the liquid code to here:
Save your the snippet
After editing the theme snippet, don't forget to save the snippet file.
Congratulations
