How to replace the dynamic checkout button when out of stock?

empiricalarby · ‎07-30-2024

https://empiricalwater.com/products/bundle

On the above page, I have the dynamic checkout button enabled. I also have a "Notify me when available" button enabled. How do I replace the dynamic checkout button with the "Notify me when available" button when an item is out of stock? I need it to stay sticky in the exact same way as it is now.

Dawn theme.

Thanks!

Dan-From-Ryviu · ‎07-30-2024

Hi @empiricalarby

You can add this code to theme.liquid file after <head> in Sale channels > Online Store > Themes > Edit code to hide Buy now button when an item is out of code

<style>
    .product-form__buttons:has(.product-form__submit[disabled]) .shopify-payment-button { display: none; }
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎07-31-2024

That button is there, but you guys add a javascript code to hide it when open on browser URL, and it wont work when you open the product page using Instagram popup window

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎07-31-2024

If you want to hide that button, please update previous code to this

<style>
    .product-form__buttons .product-form__submit[disabled],
    .product-form__buttons:has(.product-form__submit[disabled]) .shopify-payment-button { display: none; }
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎07-30-2024

Hi @empiricalarby

You can add this code to theme.liquid file after <head> in Sale channels > Online Store > Themes > Edit code to hide Buy now button when an item is out of code

<style>
    .product-form__buttons:has(.product-form__submit[disabled]) .shopify-payment-button { display: none; }
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

empiricalarby · ‎07-31-2024

Nicely done!! Exactly what I needed. Thanks.

Dan-From-Ryviu · ‎07-31-2024

You are very welcome!

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

empiricalarby · ‎07-31-2024

I noticed one weird issue: When I click to that webpage through my own instagram profile (see the link in my profile here: https://www.instagram.com/empiricalwater/), that same page loads a bit differently in instagram's built-in browser on my phone. This doesn't seem to be an issue on desktop at all.

The issue is that the add to cart button is present, when it should not be there on this one particular product page. For example in your own screenshot, the add to cart button is not present, and that's exactly the way it should be.

Any idea how to fix this issue as it appears on instagram's built-in browser? I would like to mark that as solution as well. Thanks.

Dan-From-Ryviu · ‎07-31-2024

That button is there, but you guys add a javascript code to hide it when open on browser URL, and it wont work when you open the product page using Instagram popup window

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu · ‎07-31-2024

If you want to hide that button, please update previous code to this

<style>
    .product-form__buttons .product-form__submit[disabled],
    .product-form__buttons:has(.product-form__submit[disabled]) .shopify-payment-button { display: none; }
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

empiricalarby · ‎08-02-2024

Awesome!

How to replace the dynamic checkout button when out of stock?

How to replace the dynamic checkout button when out of stock?

Community Blog Articles