You can instead use the "Custom" location option to append the call-to-action to a particular element in your product page template. Follow the steps below to append our prompt to either an existing element in your HTML, or to create a new element to append to:

  1. Navigate to the Customize tab of our app. Under "Location", note the new option, "Custom" with an input field. This is where you'll put the HTML id of the element on your product page you want to append the call to action to.
  2. If you have an existing element in your theme you want to use, simply input the id to this field and hit "Save". You should then see the prompt loading on your website.
  3. To find or create an element in your theme to append to:
  • Go to your Shopify admin page.
  • Click "Online Store" on the left-hand side.
  • Click "Customize" in the top-right.
  • Click "Theme actions" -> "Edit code".
  • Search in the top left for "product". Your code will be in either "product.liquid" or "product-template.liquid".
  • Locate an element in your template that you want the call to action appended to. If such an element exists in your theme, choose some id (e.g. "clyde-id") and set it on the element by adding " id='clyde-id' " to the element. For example:
<div class="form-submit-button">Submit</div>

becomes

<div id="clyde-id" class="form-submit-button">Submit</div>
  • If you'd like to create a new element to hold the call to action, just add the following somewhere in your code:
<div id="clyde-id"></div>
  • Finally, if you haven't already done so, return to step 1: Input the id (in this example, "clyde-id") into the field on the Customize page of our app, and hit save.
Did this answer your question?