How to Embed Trigger Button to your page

How to Embed Trigger Button to your page


In Trigger button > Select where to show trigger button > select Embed to your page content if you want to display the button in a page content.
NOTE: If you embed the button to your page, then you need to use the form as "Popup" or "Bubble" in "Display" setting.



Then you need to add this shortcode to the page content or liquid file:
<button contactform-trigger='FORM_ID'></button>
Replace FORM_ID with the number of your form, which you can find in the Preview section.


NOTE: You must click the "Save" button to create the form first, then the Form ID will appear.

In our example, the shortcode will be: <button contactform-trigger='20244'></button>
There are some ways to add this shortcode:

Method 1: Add to the page content using the app block

  1. Go to your theme editor (Theme > Customize)
  2. Go to the page you want to add the button (e.g. product page)
  3. Click on "Add block" > APP BLOCKS > Contact Form Embed

  4. Select form type as "Trigger button" > add the Form ID
  5. Save > The button is embedded to your page successfully.

Method 2: Add to the page content using the Custom block

  1. Go to your theme editor (Theme > Customize)
  2. Go to the page you want to add the form (e.g. product page)
  3. Click on "Add section" (or "Add block")
    Here you can select the Custom block such as "Custom Liquid", "Custom HTML", etc.
  4. Add the whole shortcode with the form ID
  5. Save > Then the button will be embedded to your page.

Method 3: Add to the page content through Pages

  1. Go to your page in Shopify admin → Edit your page.
    (In our example, we will add the button to a product page)
  2. In the Content editor, click on the </> button to show HTML editor
  3. Paste the shortcode to the position you want in the description
  4. Save and Done.
Result:


Contact us if you need help.

Method 4: Add to liquid file

This method requires coding experience.
  1. Go to your Shopify admin → Themes → Edit code
  2. Find the template liquid that your page is using.
    For example, if you want to add to the product page (below the buy buttons), the template may be "main-product.liquid"
    The page's template is different on different themes. If you are unsure which your template's page is, please Contact Us for help
  3. Paste the shortcode to the position you want
  4. Save and Done.
Result:



NOTE:
Your button may not show up if you set a filter for display on page.
Please ensure the Display on page is set to "All pages", or exactly the page you're adding the button.



Contact us if you need help.



    • Related Articles

    • Trigger Button

      Select where to show trigger button  Fixed sticky button: the button stick to the page's borders (you can change the position in options below) Embed to your page content: turn trigger button to a clickable button on your page (read full ...

    • How to Embed Form to a page

      In Display > Open form in > select Embed Form if you want to display Contact Form in the page content, don't want to trigger form with a button. If you use the form as Embed Form, you do NOT need to configure the Trigger Button settings The Embed ...

    • Design Quick View Button

      Icon Enable 'Show button icon' mode to display Quick View button icon. Choose the icon you want to display from the list. Button on Desktop Text To show text on button, switch 'Show button text' on. When button text is shown, the default text is ...

    • [Version 2] How to enable embed offer?

      Step 1: Open Theme Editor Step 2: Enable theme app extension Open product detail page of item you want to embed the created offer Note: To preview the embed offer, you should open the detail page of the trigger product in the offer that you created ...

    • [Version 2] How to manually embed the "Product Bundle" offer to the product pages from pagebuilder apps (Gempages, Pagefly, etc.)?

      This article is for "Product Bundle" offer only Step 1: Add the embed file to the theme Firstly, you need to add the file to embed the offer to your theme. 1. Open your theme > Edit code 2. Add a new file under Snippets 3. Name the file as: ...