/
How can I show "Pre-Order" button instead of "Add to Cart" on the collection page(s)?

How can I show "Pre-Order" button instead of "Add to Cart" on the collection page(s)?

05.12.2017

Attention! Basic HTML & Liquid skills are required to provide this customization.

  • Open Themes section on the admin panel of your web store (Online Store → Themes);

  • Find Theme from the list which will be used with our installed app.

  • Click Actions → Edit Code.

  • First of all make sure that your theme has the snippet spurit_po-collection-list-snippet.liquid under the Snippets folder.

  • Open the collection template, where you wish to have Pre-Order button in the grid (usually it is Templates/collection.liquid) and replace the block:

<!-- spurit_po-added -->
{% include 'spurit_po-collection-snippet' %}
<!-- /spurit_po-added →

with the block:

<!-- spurit_po-added -->
{% include 'spurit_po-product-snippet' %}
<!-- /spurit_po-added -->
{% include 'spurit_po-collection-list-snippet', pageProducts: collection.products %}

  • You will also need to add the class to the product's container in the grid. The class name is "spo-product-{{product.id}}". As you can see, product liquid object should be available there, that's why the element has to be inside of the loop by products.

(click to enlarge)

  • Save the template file.

Please note, Pre-Order button will work for the first variant of each product. If the grid products in your theme have variant selects, then please contact us for advanced instructions.



Looking for labels? They can now be found in the details panel on the floating action bar.

Related content