How can I alter the Add To Cart button based on pre-order date metafield?

Store Design
, , , , ,

Topic summary

A user is working on customizing product pages to automatically update based on a pre-order date metafield. They have successfully implemented code that displays different messages by comparing the current date to the pre-order metadata.

Current Challenge:

  • Need to modify the Add to Cart button dynamically (change color and text) based on the pre-order date
  • Uncertain how to target and manipulate the button element from the page template

Working Code:
The existing implementation compares dates and displays conditional messages like “Available [pre-order date]” with a note that orders will ship once the product becomes available.

Seeking Help:
Looking for guidance on how to call and alter the Add to Cart button element within their Shopify theme template to reflect pre-order status.

The discussion remains open with no responses yet.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I’m trying to use a pre-order date metafield to automatically update our product pages. I have the bones of the code (pasted below) working and displaying messages based on the date compared to the metadata.

I’d like to have this also affect our add-to-cart button, changing it’s colour value and text, but I haven’t worked out how to interact with the button element from the page template. Does anyone know how to call and alter the button’s elements?

{% assign today_date = 'now' | date: '%s' %}
{% assign pre_date = product.metafields.custom.preorder | date: '%s | times: 1' %}

{% if today_date < pre_date %}<b>
Available {{product.metafields.custom.preorder}}.

Please note that any orders including this product will ship once it becomes available.
</b>

{% comment %}
  CHANGE THE ADD-TO-CART BUTTON COLOUR, BACKGROUND, FRAME, TEXT ETC. HERE
{% endcomment %}

{% endif %}