Want to display a Customer Fields form inside a product's description? Or perhaps in the middle of a blog post? Or maybe within a custom popup, or some other location on your storefront?
You're in luck -- shortcodes have got you covered!
With the power of Customer Fields' app embed and shortcodes, you can easily display forms in all sorts of places on your storefront. This option is great for themes that do not support app blocks or other unique cases that require a form to be displayed alongside other content.
How to use a shortcode
Step 1: Enable the app embed for Customer FIelds
For shortcodes to work, you'll first need to enable the app embed for Customer Fields. Once enabled, the app embed for Customer Fields will automatically display a form anywhere a shortcode has been used.
Please refer to this help article for details on how to find and enable the Customer Fields app embed inside Shopify's theme editor.
Step 2: Copy a form's shortcode
Launch the app admin for Customer Fields and navigate to the Forms page. Find the form you wish to display and click the 'Edit' button to launch the form builder.
Once the form builder is launched, click on the 'Installation' tab. From here you'll need to select the theme you're working on, and upon doing so the app will run a quick check to see if the app embed is enabled on the selected theme.
After the theme check has been completed, you'll need to click on the section for 'Other locations'. Inside this section you'll see the form's shortcode, like so:
Simply click the 'Copy' button to copy the shortcode to your computer's clipboard.
Note: The syntax for shortcodes is the same for all forms, but each shortcode includes a reference to a unique form ID. This means you can use the same shortcode to display a single form in multiple places, but if you wish to display multiple forms via shortcode, then you'll need to make sure to copy the shortcode for each form separately.
Step 3: Paste the shortcode wherever you'd like
Once you've copied a form's shortcode, you can paste it into all sorts of places in the Shopify admin. Essentially any place in Shopify that allows you to define content for your Online Store can be used with form shortcodes, including:
Page content
Product descriptions, collection descriptions
Blog post content
Theme code
HTML blocks in the theme editor
After pasting a shortcode, make sure to save your changes. Once your changes are saved, test and confirm that the form is working by viewing the page on the storefront.