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="{{ }}"></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="{{ }}"></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="{{ }}"></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="{{ }}"></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="{{ }}"></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.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.