For clients that do not wish to give LoudCrowd access to Shopify, this guide explains how to build the Ambassador Hub and Ambassador Storefronts.
Step One: Add the LoudCrowd App
Navigate to Integrations in the LoudCrowd App
If you do not see "Integrations" on your left nav, contact your Internal Account Owner or Client Strategist to upgrade your user permissions
Select "Add Integration" under E-Commerce
This link will take you to our App listing on the Shopify App store. Follow the steps to connect your account.
Retrieve your Secret Code
Request your Secret Code from your Client Strategist
Add the LoudCrowd App in Shopify
Once you have added Shopify in LoudCrowd, the LoudCrowd app icon will appear in Shopify App Embeds. Go to your main theme, and click "Customize". Once in the main theme, select "App Embeds" in the right rail navigation. Within App Embeds, you should see the LoudCrowd icon.
Turn on the App, and Add the Secret.
Step Two: Build the Page Templates
Next, create two page templates for the Ambassador Hub and Ambassador Storefront. In the Live Theme - navigate to "Edit Code"
From here, in the right-hand navigation, add two new Templates.
Each template should be created as a .page in the JSON format.
Name the pages:
page.ambassador-storefront
page.ambassador-hub
Paste this code into the page (overwrite all existing code):
{
"sections": {
"app_blocks_section": {
"type": "apps",
"settings": {}
}
},
"order": [
"app_blocks_section"
]
}Save each page.
Step Three: Connect the Page Templates to Pages
Leave the code editor and the Theme, and navigate back to the Online Store. From the Right hand navigation, select Pages.
Add a new page. Title it "Ambassador Storefront". Assign the template "ambassador-storefront'. Save. Optionally, you can add any meta data you'd like for SEO purposes.
Repeat the process for Ambassador Hub. Title the page "Ambassador Hub", and add the ambassador-hub template. Save.
Step Four: Configure the Pages (Recommend in a duplicated theme).
Note: For this next step, we recommend you make a copy of the theme (although not required).
In the theme where we are making the updates (in most cases, the duplicated theme), navigate to the theme editor and click Customize.
Ambassador Hub
In the page navigator, select the "ambassador-hub" page.
In the page editor, navigate to the "App" section. Add these six blocks:
AmbassadorHub Profile
AmbassadorHub Commissions
AmbassadorHub Rewards
AmbassadorHub Socialstats
AmbassadorHub Products
AmbassadorHub Recent Posts
For each block, use the configuration tool to optimize the display. Popular customizations:
1) Updated the colors in AmbassadorHub Rewards
2) Updated icon colors in AmbassadorHub Profile
Save.
Ambassador Storefront
In the page navigator, select the "ambassador-storefront" page.
In the page editor, navigate to the "App" section. Add these four blocks:
Amb Featured Product
Ambassador Hero 2.0
Ambassador Feed
For each block, use the configuration tool to optimize the display. Popular customizations:
1) Modified left/right padding in the custom CSS
2) Background color in the Hero Block
3) Share button color
4) Fields to show / hide in the Hero Block
5) Price text size = 1 rem
6) Title text size = 1 rem
Step Five: Build the Account Page Navigation Block
To make it possible to navigate to the Ambassador Hub, it is necessary to add a block to the top of the Customer Account page (which will only appear for those in the program).
Navigate to "Edit Code" in the theme where you are making edits (usually the duplicate theme). First, determine if your customers/account page is .liquid or .json
For .liquid (the majority of cases)
First, copy the entirety of that customers/account.liquid file. Create a new SECTION and title it:
customers-account.liquid
Paste the contents of the customers/account.liquid file into this new section. Save.
Next, create a new template and title it 'page.customers-account.json'. Paste in the following:
{
"sections": {
"main": {
"type": "customers-account",
"settings": {
}
},
"app_blocks_section": {
"type": "apps",
"settings": {}
}
},
"order": [
"main",
"app_blocks_section"
]
}Save. Then rename the file:
customers/account.json
By default, Shopify will reference this file over the customers/account.liquid file. It contains the existing Customer Account page (from the section), and now will allow you to add the LoudCrowd block.
For .json (the minority of cases)
This file can already be updated with LoudCrowd blocks, so proceed to the next section.
Modifying the Page in the Page Editor
Navigate back to the "Customize" interface, and select the Customer Account page:
You will need to log-in to edit this page.
On the page editor, add the "AmbassadorHub Profile" block. Drop the "Apps" section to make sure the block is at the top of the page.
Additionally, ensure the correct buttons are displaying. At a minimum, the "Show Ambassador Hub Link" box should be checked, as well as the "Show Storefront Link" if Storefronts have been created.
And perform any necessary customizations.
When finished, the theme is ready to go live.