Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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-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.

Filter by label (Content by label)
showLabelsfalse
max5
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@1422e
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel in ("pre","preorder","collections","collection","cart","to","pre-order","pages","page","add-to-cart","add","order","instead") and type = "page" and space = "SUP"
labelspre-order preorder pre order instead add-to-cart add to cart collection collections page pages

...