Shopify Website Integration

Once you have authorized the BrandChamp Shopify App, a new Application Form page becomes available in your Shopify store that lets people apply to your program.

This new pages is not automatically linked to from anywhere so your customers will not discover them until you decide to manually link to it from your site's main navigation menus etc.

Note: you can also use an embedded iframe if you prefer. See the "Show usage instructions" link in the application form designer in your administration app at Settings -> Application Form.

Web Address for Application Form page

Assuming your Shopify store is at https://yourstore.com, the new page should be available at the following web addresses by default:

https://yourstore.com/community/ambassadors/apply

The exact address of this page depends on two settings:

  • The "Ambassadors Plural Term" from the BrandChamp settings page ("Ambassadors" by default)
  • The Proxy URL root from the BrandChamp Shopify App ("https://yourstore.com/community" by default)

We'll examine how you can edit these settings, and hence the web addresses, in the sections below.

Note: You may see a listing of your ambassadors at the https://yourstore.com/community/ambassadors URL but this is an unsupported feature and will be removed in future versions of the BrandChamp software.

Ambassadors Plural Term Setting

In BrandChamp, you can define what term you want to use to refer to your ambassadors. Some people might use "squad", "pros", "influencers" etc. In BrandChamp this is controlled via the "Terms" section in the Settings area of the admin site, and defaults to "Ambassador(s)":

Those terms are used in the standard email templates and the "Ambassadors Plural Term" is used to make the web address for the new pages in your Shopify store.

If you want to use a custom term, you can update the singular and plural form here.

Note: You must use a single word phrase for the "Ambassadors Plural Term" in order for the website integration to work. E.g. "Super Squad" won't work - just use "Squad" instead.

If you do change the plural term, you must also update the settings in the BrandChamp Shopify app as detailed below, otherwise the website integration won't work.

BrandChamp Shopify App Settings

When you authorized the BrandChamp Shopify App, it made that app available in your Shopify admin site.

Log in to your Shopify admin site now and browse to the "Apps" area which, at time of writing, is down the bottom left of the site:

Click the "View details" link beside the BrandChamp app:

Notice the "Edit Proxy URL" options down the bottom of page:

There are two controls:

  • You can optionally change the root address from "/community" using the dropdown
  • The value in the text control must match the "Ambassadors Plural Term" you chose in the BrandChamp settings area. E.g. if you changed the term to "Squad" in BrandChamp, you'll need to enter "squad" here - otherwise the website integration won't work correctly

Save any changes you made and test out the new website address. As an example, if you changed the site root in the dropdown to end with "/a/" and changed "ambassadors" to "squad", then your application form address would be at:

https://yourstore.com/a/squad/apply

Styling

To change the styling of your application form, visit the Application Form designer page at "Settings -> Application Form" and click the "show" link beside the "CSS Styles" heading:

This opens up an area where you can add any custom styles needed:

Click Save Form to update and test out your changes.

Custom Shopify Layouts

If customizing the CSS is not sufficient to achieve the integration you need, you can optionally add a dedicated bc_apply.liquid layout in your Shopify theme to have complete control of the elements surround the content rendered by BrandChamp. This layout file will be used instead of your normal one to render the Application Form page.

Please see the Shopify documentation for more details on creating layout files.

Still need help? Contact Us Contact Us