Shopify Website Integration

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

This new page is not automatically linked, so your customers will not discover it until you manually link to it from your site's main navigation menu or another starting location on your site.

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)

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

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 the term you want 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.

You can update the singular and plural forms here if you want to use a custom term.

Note: You must use a single-word phrase for the "Ambassadors Plural Term" in order for the website integration to work. For example, "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 on your Shopify admin site.

Log in to your Shopify admin site now and browse to the "Apps" area, which, at the 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 the 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'd 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 insufficient to achieve the necessary integration, you can optionally add a dedicated bc_apply.liquid layout in your Shopify theme to have complete control of the elements surrounding the content rendered by BrandChamp. This layout file will be used instead of your normal one to render the Application Form page.

Please have a look at the Shopify documentation for more details on creating layout files.