This guide walks a Shopify developer through installing LoudCrowd creator storefronts on a store, from app install to a styled, tested page. Budget about an hour for a first install.

Before You Start

Have these on hand:

Shopify admin access with permission to install apps and edit theme code.
A LoudCrowd account with your Shopify store already connected as an integration.
Optionally, your LoudCrowd Secret for this store — only needed for the extra convenience described in Step 2. Ask your LoudCrowd contact if you want it; you can finish the install without it.

Work in a duplicate of your live theme throughout. Nothing here needs to touch the published theme until you are happy with the result.

1. Install the App to Your Store

Install the LoudCrowd app from the Shopify App Store. This walks you through granting permissions and linking the store to your LoudCrowd account.

2. Turn On the App Embed

Edit a new copy of the theme, then open the App embeds tab on the left of the theme editor. Find the embed named LoudCrowd and turn it on.

Turning the embed on is the required part — it loads the script the storefront blocks depend on, and it is enabled per theme, so remember to turn it on again in whichever theme you eventually publish.

About the optional "LoudCrowd Secret" field. The embed's settings include a LoudCrowd Secret field. You can leave it empty and everything in this guide still works: creators reach their storefronts through links from their LoudCrowd Creator Hub, and those links carry their own signature that LoudCrowd generates and verifies on its side — the theme is not involved.

Filling the field in adds one convenience: when a creator happens to already be logged into your store as a Shopify customer, the store can sign a short-lived token in Liquid (server-side, so the secret never reaches the browser) and LoudCrowd will recognize them as a creator without needing a Creator Hub link. If the field is empty, that silent recognition simply doesn't happen — nothing breaks, and no error is shown. If you want it, ask your LoudCrowd contact for the value for this store.

3. Add a New Page Template File

Add a new template to the /templates folder named page.creator-storefront.json

{
  "sections": {
    "main": {
      "type": "main-page",
      "disabled": true,
      "settings": {
        "padding_top": 28,
        "padding_bottom": 28
      }
    },
    "1712675188ceb36d5c": {
      "type": "apps",
      "blocks": {
        "loudcrowd_ambassador_hero_v2_YqyKxb": {
          "type": "shopify://apps/loudcrowd/blocks/ambassador-hero-v2/0afc7a0d-9f70-43a2-81e1-c20306ea13bd"
        },
        "loudcrowd_ambassador_featured_product_7dkVeh": {
          "type": "shopify://apps/loudcrowd/blocks/ambassador-featured-product/0afc7a0d-9f70-43a2-81e1-c20306ea13bd"
        },
        "loudcrowd_ambassador_feed_89A7EF": {
          "type": "shopify://apps/loudcrowd/blocks/ambassador-feed/0afc7a0d-9f70-43a2-81e1-c20306ea13bd"
        }
      },
      "block_order": [
        "loudcrowd_ambassador_hero_v2_YqyKxb",
        "loudcrowd_ambassador_featured_product_7dkVeh",
        "loudcrowd_ambassador_feed_89A7EF"
      ],
      "custom_css": [],
      "settings": {
        "include_margins": true
      }
    }
  },
  "order": [
    "main",
    "1712675188ceb36d5c"
  ]
}

Commit and deploy this change. This template must exist BEFORE a page can be assigned to it.

A few notes on the above:

block_order controls top-to-bottom order on the page. The order above — hero, then featured product, then feed — is the layout most brands ship. Reorder or drop entries to taste; you can also drag the blocks around in the theme editor afterwards.
The long ID at the end of each type is the app extension identifier. If blocks show up as missing or unavailable after you deploy, don't hand-edit that ID: open the template in the theme editor, use Add block to insert the LoudCrowd blocks, and let Shopify write the correct references for your install.

4. Assign a New Page to That Template

In the Shopify admin, create a page (for example Creator Storefront) and set its theme template to page.creator-storefront. Keep the page handle as creator-storefront — the styling step below and LoudCrowd's creator links both assume that path.

5. Test the Storefront

With the app embed enabled and the new template applied to a page, you can preview the page using LoudCrowd's built-in mock creator. Add ?lc_ambassador_id=demo_ambassador to the page URL:

https://your-store.com/pages/creator-storefront?lc_ambassador_id=demo_ambassador

This renders the blocks with sample creator data, so you can confirm the install and start styling before any real creator is set up. Swap demo_ambassador for a real creator's LoudCrowd ID to preview live data.

6. Style Your Storefront

The next step is styling the page to match your brand's aesthetic. We aim to make the blocks look good without customization, but because they land in so many different themes, they sometimes need a nudge.

Start in the theme editor. Each LoudCrowd block exposes its own settings — select the block in the theme editor and work through the panel on the right. This covers most of what brands want to change and requires no code:

Ambassador Hero — banner background and text colors, avatar size.
Ambassador Feed — primary brand color, background and text colors, heart icon color, product card title/price sizes and weights, card border radius, whether to show an Add to cart button on product tiles (and its label), whether to show product brands, sale price color, and whether to show or hide discount cards.
Amb Featured Product — colors and layout for the featured product card.

Then use CSS for anything the settings don't reach. The blocks expose CSS custom properties you can override from your theme:

In your theme's /Assets folder, create a file called loudcrowd.css

In theme.liquid, add this snippet inside the <head>:

  <!-- LoudCrowd --> 
  {% if request.path contains '/pages/creator-storefront' %} 
    <link rel="preload" href="{{ 'loudcrowd.css' | asset_url }}" as="style"> {{ 'loudcrowd.css' | asset_url | stylesheet_tag }} 
  {% endif %}

Then override variables in loudcrowd.css, scoped to the block element you want to affect:

ambassador-hero-block {
  --banner-background: #fedd00;
  --lc-font-primary-color: #000000;
}

That is a deliberately small example — there are many more variables available per block. For the full list, see Styling Storefront App Blocks.

Other Blocks You Can Add

The three blocks above make up the creator storefront page. The same app extension ships a few more you may want, each added the same way — as an app block on whichever template suits it:

Influencer List — a browsable directory of your creators. Usually its own page (for example /pages/creators) so shoppers can discover creators and click through to their storefronts.
LoudCrowd UGC Carousel — a carousel of shoppable creator video content. Commonly added to the home page or product pages.
ShopWith Widget — a separate app embed (listed under App embeds alongside LoudCrowd) that surfaces creator content on product pages. Turn it on only if ShopWith is part of your plan.

These are optional and independent of the storefront install — skip them for a first launch and come back later.

Troubleshooting

A creator can't log in or edit their storefront. Have them open their storefront from the link in their LoudCrowd Creator Hub rather than by typing the URL — the link carries the signature that authenticates them. Signatures are time-limited, so a stale or reused link needs to be re-opened from the Hub. This path does not depend on the optional secret in Step 2.

The page renders but the blocks are empty. Confirm the LoudCrowd app embed is turned on in the theme you are previewing — the embed loads the script the blocks depend on, and it is enabled per theme. Then confirm you are passing a valid lc_ambassador_id.

The blocks show as missing or unavailable in the theme editor. The app extension reference in your template JSON doesn't match your install. Add the blocks through Add block in the theme editor instead of pasting the IDs.

The page 404s. Check that the page exists, is not hidden, and that its handle matches the URL you are testing.

Your CSS has no effect. Check that the request.path condition in Step 6 matches your actual page handle, and that you are overriding the variable the block reads rather than one it sets internally — the styling article lists which is which.

Stuck on something not covered here? Reach out to your LoudCrowd contact with the store URL and the storefront page URL you are testing.

Installing Storefront in Shopify