Changing text of "Add to cart" button on a single product page

Deutsch Diskussion Shopify Design
1

Hello,

I am using the Concept Theme of Roar for our online shop.

Our main product is now sold out and I would like to use the text “Pre-order now” instead of the classic “Add to cart” button on this product page as well as on our home page.

I have already tried to adapt this part of the main-product.liquid file with adding and endif that checks if the template name is “bevi-bag” (the template name I am using for the sold out product) and adapting stock accordingly that the product is again available in Shopify, but it is not working. Here is the original part of the liquid file:

{%- liquid
                    if product.selected_or_first_available_variant.available == false or quantity_rule_soldout
                      echo 'products.product.sold_out' | t
                    elsif product.template_suffix == 'cleaning-kit'
                      echo "products.product.sold_out"
                    elsif product.template_suffix != 'pre-order'
                      echo 'products.product.add_to_cart' | t
                    else
                      echo 'products.product.pre_order' | t
                    endif
                  -%}

Maybe someone here can guide me into the right direction :slightly_smiling_face: Thanks!

2

This is what I currently see with no ATC button:

image.png
image.png1441×755 107 KB

The concept theme has a pre-order template included, acc. to the documentation.

3

Hi @Ben310 ,

correct, this is because our stock is currently 0 and no pre-order is activated.

You can see an active ATC button at one of our other product pages like https://bevi-bag.com/products/bevi-cleaning-kit.

Regarding the Concept theme: Could you share the link to the information about the pre-order template, unfortunately I can’t find it.

Thanks, Max

4

It’s here:

image.png
image.png1632×816 124 KB

image.png
image.png1228×501 57.6 KB

Coding a pre-order button is not so straightforward per se, as you need to use tags, metafields, the Storefront API, and potentially the Admin API for accessing product data and inventory, etc. Pre-order Apps can do all that for you.

5

Thanks, I just tested it but unfortunately it only provides a “Coming soon – Notify me when it’s available” button as well as a little form. This is great, but not for my use case.

I actually want to let customers perform a full purchasing flow, only with a different text on the “Add to cart” button. So basically collecting full orders while only starting shipment for those in 3-4 weeks.

Any idea how to achieve this?

6
  • Any idea how to achieve this?

Pretty much what I say in my last sentence above.