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

Owned by Artem Kuprin
Last updated: 05.12.2017
1 min read

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.