About
Globo is the company specializing in website design and development in Vietnam.
45C, 210 Hoang Quoc Viet Street, HN
globosoftware
contact@globosoftware.net
Follow Us

Display a form on Shopify front store

You are here:
Estimated reading time: 1 min

Please follow our below instruction to publish your form on your front store

Displaying form on a specific page

  1. From the admin page, select a particular form that you want to display
  2. Edit the form as your desire by adding elements
  3. Save the form to update the change
  4. Copy the shortcode of the form
  5. From the admin site, click ” Themes
  6. Click “Pages
  7. Access to the page that you want to publish the form
  8. Paste the shortcode in the page description
  9. Save the page to apply the change

 

 

 

In case you don’t want the shortcode to be displayed while loading a form, please use this code snippet instead <div class="globo-formbuilder" data-id=324 ></div>

Note: 324 is form id from your shortcode above {formbuilder:324}

Please refer to this video to visualize clearly:

Displaying form on a specific product

  1. From the admin page, click to ” Products
  2. Select a product page that you want to show the form on
  3. Add the shortcode of form to the product description
  4. Save the form to update the change


Please refer to this video to visualize clearly:

Displaying form to a specific position.

  1. From the admin page, click “ Online stores
  2. Click” Themes
  3. Click “ Actions” in the current theme
  4. Select “ Edit code
  5. Add the shortcode of form in any position that you want to show up this form in the product-template.liquid file
  6. Click ” Save” to apply the change

Please refer to the below video to visualize clearly:

 

Displaying form on home page.

  1. From the admin page, click ” Online stores
  2. Click ” Themes
  3. Click ” Customize” in the current theme
  4. Click ” Add section
  5. Add form in “ Powerful contact form builder
  6. Choose the form that you want to display in the settings of this section
  7. Click ” Save” to update the change

 

 

 

Please refer to this below video to view more:

 

If you do encounter any difficulty while proceeding these steps, don’t show any hesitation to contact us promptly via the email address

hi@globosoftware.net 

We are always willing to help with all sincerity

Was this article helpful?
Dislike 8
Views: 10891