A space to discuss online store customization, theme development, and Liquid templating.
Hi, I'm using the Dawn theme and I'm trying to change the "add to cart" button to a "pre-order" button when product inventory reaches 0.
I've followed this tutorial : https://preproduct.io/2021/08/19/adding-pre-orders-to-shopify-dawn/?utm_campaign=Guru+Ask&utm_medium...,
so replacing this code in the "main-product.liquid" :
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
with this :
{%- if product.variants.first.inventory_policy == "continue" and product.variants.first.inventory_quantity == 0 -%}
pre-order
{%- elsif product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
It's working, but when I select another variant and select again the pre-order variant, the "pre-order" button isn't showing anymore but the ''add to cart" button is showing instead.
Here's a preview link of my store : https://phz1qp14hs872fi7-61112385754.shopifypreview.com
password: xclusive
Is there a code I can add so the ''pre-order" button always show for the variant with 0 inventory even when I select another variant and select the pre-order variant again?
Thank you.
DId you solve this?
You need to add some Javascript code in order for the button to update when changing variants. It's easy to do on older themes, currently looking into how Dawn them works.
Hi, did you figure it out?
Hi, yes we did it for a number of clients. You need to add some custom code to the global.js file and the product template. The procedure's similar to what this article explains, but you'll have to change the "Add to cart" button's text instead of adding an inventory notice.