All Collections
LoudCrowd Best Practices
Ambassador Storefronts Best Practices
Building Storefronts and Hub on your Shopify (completely self-service)
Building Storefronts and Hub on your Shopify (completely self-service)

For brands that would like to build storefronts without giving LoudCrowd access to their store, here is a guide to implement Storefronts.

Gary Garofalo avatar
Written by Gary Garofalo
Updated over a week ago

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:

  1. AmbassadorHub Profile

  2. AmbassadorHub Commissions

  3. AmbassadorHub Rewards

  4. AmbassadorHub Socialstats

  5. AmbassadorHub Products

  6. 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:

  1. Amb Featured Product

  2. Ambassador Hero 2.0

  3. 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.

Did this answer your question?