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: 3 min

Enable app embeds on your theme

To show the form on the front store, firstly please make sure that the app embeds is enabled on your theme.

Learn more about App embeds here.

1. From the admin app, click Theme Setup 

2. Select a theme to install the app and then click below button

3. Enable app embed of Globo Form Builder here:

4. Click Save to update the changes.

Now in the app, it shows that you enable the app embeds successfully.

Please view the video below for more details

 

After that, please follow our below instruction to publish the form on your front store

 

Displaying form on a specific page

Approach 1

1. From the admin app, click the Forms, select a form that you want to display

2. Edit and save the form as your desire by adding elements

3. Copy the shortcode of the form above the preview form.

Or go to Publish tab > select other publication types: Embed code or Lightbox > copy the code on your page:

4. Go to the Shopify admin page, click Themes > Pages, access to the page that you want to publish the form.

5. Paste the form code in the page description.

6. Save the page to apply the change.

 

View this video for more detail:

Approach 2

1.From the admin app, click the Forms, select a form that you want to display.

2. Edit and save the form as your desire by adding elements.

3. Go to the Publish tab > Select publication type you want to show the form:

There are 3 types here:

  • Embed code
  • Short code
  • Lightbox

4. Tick to Add short code to page checkbox.

5. Select page and select position on page to show the form.

6. Click Save.

View this video for more detail:

 

 

Displaying form on a specific product

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


Please refer to this video to visualize clearly:

 

 

 

Display a form on Homepage

In the G:Form Builder – Contact Form app: 

1.From the admin app, click the Forms, select a form that you want to display

2. Edit and save the form as your desire by adding elements

3.Copy the shortcode of the form above the preview form.

Or go to Publish tab > select other publication types: Embed code or Lightbox > copy the code on your page:

In the Theme 

1. From the Shopify admin page, click Online store > Click Themes > Customize > select the Hompage template

2. On the left side, click Add section > Custom liquid  

3. Paste the form code (embeded code) to the content of Custom liquid

4. You can drag-and-drop to change the position of the section (or the form) on Homepage

5. Click “ Save” to apply the change

6. Now go to the front store to check the form.

Please view the video below for more details about how to add a from to Homepage

 

 

 

Displaying form to a specific position

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

Please refer to the below video to visualize clearly:

 

 

FAQs

Why does the form not appear on the page?

  • Please check again to make sure that you have already integrated the app with the live theme on the site
  • If you are trying to showcase the Cart form or Bulk Order form, please check your current plan and make sure you are on the app’s Paid plan (since these two forms are not available with the FREE plan).
  • If you are already in the app’s paid plan but the Cart form is still not showing up, please add this script code above the Checkout button: <div class=”globo-formbuilder” data-id=“your-form-ID”></div>.
  • If the form still could not appear on the storefront page, please leave us an email at apps@globosoftware.net so that we could provide further assistance.

How to hide the form shortcode when loading the page?

In case you don’t want the shortcode to be displayed while loading a form, please use embed code instead.

Click here for more details.

 

Note:  this guideline is only applicable for Shopify stores that have already installed our G:Form Builder ‑ Contact Form app. For any new visitors that would like to give our app a try, please take a quick look at it on the Shopify app store and add this form builder app to your shop: https://apps.shopify.com/form-builder-contact-form

 

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

We are always willing to help with all sincerity!

Was this article helpful?
Dislike 66
Views: 41607