Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Dawn theme : pre-orders when product inventory reaches 0

Dawn theme : pre-orders when product inventory reaches 0

aciel
Shopify Partner
17 1 10

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.

Replies 5 (5)

SpotterJ
Shopify Partner
67 1 17

DId you solve this?

Learning something new every day

Parasoul
Shopify Partner
15 1 6

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.

SKRASTS
Excursionist
32 0 5

Hi, did you figure it out?

Parasoul
Shopify Partner
15 1 6

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.

SKRASTS
Excursionist
32 0 5

Actually last night I found this and I was able to make it work!