implement Shop Pay on a Product Page

Online Store and Theme Development
,
1

Hi - I’m trying to implement Shop Pay on a Product Page where the price isn’t in a {% form ....%} with this code (found on Shopify docs)

<!-- product price -->

{% form 'product', product %}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  {{ form | payment_terms }}
{% endform %}

I have js that updates the hidden input’s value with variant id’s when a customer clicks a different variant but the Shop Pay installment text doesn’t update.
I assume it is supposed to automatically update with a change of the variant id, right? What am I missing?

Shop Pay installment text not updating
image

2

Hi Becky,

Which theme are you looking to set this up on? If the price isn’t being rendered inside a form tag you’re best option for adding Shop Pay may be to ask the theme dev for their recommendation.

3

Hi Liam,

We have our own theme (based on Dawn I believe) and I’m part of the dev team.

Are the UI(payment_terms) being rendered STATIC? as in when the customer chooses a different variant, it doesn’t update the Shop Pay installment text or is that something we need to update by dedicated logic to change DOM values

4

Ahh figured it out - my form tag was in the wrong spot - once I moved it, the text now changes when a different variant is clicked/selected automagically :slightly_smiling_face:.
I moved the form tag to be wrapped around the whole for loop.

1 Like
5

Great to hear you figured this out Becky and thanks for letting us know your solution, I’m sure it will help other devs who encounter the same issue.