Shopify Website Integration
Once you have authorized the BrandChamp Shopify App, a number of new pages are made available in your Shopify store:
- A searchable ambassadors directory with name and profile pictures
- An ambassador details page with picture, bio, quote and social media account details
- A customizable application form to allow people to apply to your program
The new pages are not automatically linked to from anywhere so your customers will not discover them until you decide to manually link to them from your site's main navigation menus etc.
Note: BrandChamp makes use of a Shopify integration feature known as an "Application Proxy" which means Shopify will make a call to BrandChamp servers when it needs to render those pages. I.e. there are no new pages added to your Shopify theme. The pages are served from our servers, but look like they are part of your own Shopify theme.
Web Address for New Pages
Assuming your Shopify store is at https://yourstore.com, your pages should be available at the following web addresses by default:
You may not have any approved BrandChamps in the system at the moment, so the best one to test with is the application form at the /apply address above.
If you can't see them yet, make sure you have set up your Shopify integration and take a look at the sections below for more details. If you still cannot see the pages, reach out to firstname.lastname@example.org for assistance.
Note: each Shopify website can have a different theme so BrandChamp serves up very basic HTML pages which may require some fine-tuning with CSS to make sure they fit naturally into your site. See the "Styling Integration" section below for more details.
The exact web address of these new pages 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.
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 new page addresses would look like:
Each Shopify store could have a different theme, so BrandChamp serves up very vanilla HTML code which may need a little tweaking before it fits in well with your existing theme. There are two options for this:
- Customizing the css
- Adding custom Shopify layout files in your theme
Note: BrandChamp makes use of a Shopify integration feature known as an "Application Proxy" which means Shopify will make a call to BrandChamp servers when it needs to render these pages and will insert the content at whatever location in the HTML markup is specified in your default Shopify layout file (or in the chosen layout file if you override - see "Custom Shopify Layouts" below). I.e. there are no new pages added to your theme. The pages are served from our servers, but look like they are part of your own Shopify theme.
Note: the steps below assume a basic knowledge of web development so best to have someone technical on your team take a look at this. If you get stuck, reach out to email@example.com and we'll be happy to assist.
It is recommended to use a tool like the Web Development tools in Google Chrome to inspect the HTML structure of the content embedded by BrandChamp and discover the CSS class names or IDs you'll need to override in the sections below.
This section will show you how to customize the CSS for the application form page on your Shopify site - by default, at https://yourstore.com/community/ambassadors/apply.
Down the bottom of the Application Form builder inside BrandChamp (in the "Configuration -> Application Form" area), 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.
This section will show you how to customize the CSS for the ambassadors directory and ambassador details page - by default, at the following addresses:
To customize the CSS for these pages, you will need to add some custom styles to your Shopify theme. We recommend using a tool like Google Chrome's Web Developer Tools to examine the HTML markup and discover the class names that you will need to override.
Chrome also has a useful feature where you can write the styles out in a text file, as if you were adding them to a CSS file. You can then copy and paste the styles into the CSS file in your Shopify theme to preserve the changes.
To do this, open the developer tools and click the little "+" on right hand side:
This will add a new style for whatever element was selected at the time. But that's not important - what you need to do is click the "inspector-stylesheet" link on right hand side:
This will open up a document where you are free to add custom styles as if you were adding them to a regular CSS stylesheet.
Add in styles as appropriate until you get the desired results (recommend copying and pasting them out regularly to avoid losing your work!) and then add the styles to your Shopify theme.
Custom Shopify Layouts
If customizing the CSS is not sufficient to achieve the integration you need, you can optionally add new layout files in your Shopify theme to have complete control of the elements surround the content rendered by BrandChamp. The following layout files are supported:
- bc_apply.liquid - this layout file will be used instead of your normal one to render the Application Form page
- brandchamps.liquid - this layout file will be used instead of your normal one to render the BrandChamps directory and details page