All Collections
Getting Started
How to build an ambassador program landing page with PageFly
How to build an ambassador program landing page with PageFly

Create a landing page that your ambassadors can sign up through, using PageFly and without web development skills

Al Nafea avatar
Written by Al Nafea
Updated this week

PageFly enables Shopify brands to create eComm landing pages without web development knowledge. LoudCrowd has created PageFly templates that any brand can use for their ambassador / affiliate program sign-ups. Follow the steps below to get you landing page up and running in ~1 hour.

Prerequisites:

  • The PageFly application is installed on your Shopify store

  • Branded assets to customize the landing page

Adding the LoudCrowd Ambassador Landing Page Template

  1. View and select the LoudCrowd PageFly template that you would like to use.

    1. Template A (example, example)

    2. Template B (example, example)

    3. Template C (example)

  2. Download the PageFly template file of the version that you'd like to use.

  3. Login to your Shopify Account, navigate to Apps, and select the PageFly Page Builder app.

  4. Navigate to 'Pages' and hit import. Upload the .pagefly file from the prior step.

    Note: Original images from the template will not populate

Adding the LoudCrowd sign-up button

For each ambassador program landing page, you'll need to include the LoudCrowd-powered sign-up button. This will funnel all sign-ups into the LoudCrowd platform. To customize the signup button color, description, and call-to-action, follow these steps:

  1. Log in to the platform, navigate to the program tab, and select "edit embed script" on the left-hand side of the page.

  2. Proceed to customize with HEX color. Additionally, you can add a description for your program that will display under the title of your program.

  3. Once customized, copy the updated embed script.

  4. Navigate back to your PageFly landing page and select the HTML/LIQUID layer in the editor. Copy the code into the pop-up

    Note: To see the button in action, you'll need to save, publish, and view the live page.

    Note: Further customizations of the sign-up button will require custom CSS code. Consult a LoudCrowd Client Strategist for additional assistance.

Note: Template C has custom CSS applied to the Sign-Up Modal button. You can remove or alter that custom CSS by clicking into the the 'HTML/Liquid' section of the page and clicking the '</>' (Add Custom Code) button at the bottom left of the screen.

Tips for altering this CSS:

  1. border-radius controls the shape of the button's corners. 0 px is square, and the corners become more rounded as you increase the number of px.

  2. border-width controls the density of the border. This will only be noticeable if the border-color is different than the button color

  3. border-color controls the color of the border

  4. box-shadow adds a drop shadow beneath the button with the specified number of pixels and color

  5. color controls the color of the button background

If you'd prefer to use the configuration you set up in LoudCrowd, simply erase this CSS and click save!

After you complete your customizations, you can publish the landing page from PageFly. We recommend testing the landing page with a sign-up and confirming that your test account is now in the program. Congrats!

Adding your Branded Assets to the Page

  1. Click on an image in the Pagefly template editor and press 'Select' to upload your brand asset

  2. Change out the LoudCrowd logo in the header with your brand's logo. If needed, you can change the color of the banner background to match your branding in the Column's Styling

  3. Ask your client strategist if you would like to add your custom brand assets to the iPhone container

Quality Assurance / Compatibility Testing

  1. Check out your landing page design on Laptop, Tablet and Mobile to ensure that it looks correct on all devices

  2. If needed, you can go into a specific device view and adjust the styling of specific sections to fit each device. Our templates come with pre-set styling for each view, but if you make several changes, it's a good idea to check your work!

Frequently Asked Questions:

How do I add additional fields to the sign-up modal?

Yes, a LoudCrowd Client Strategist can help you set up custom fields for the sign-up modal. Please follow these guidelines.

Can I make additional customizations?

While we recommend sticking to the templates - PageFly makes it easy for anyone to add new sections, without any code.

What if I need additional assistance?

Contact a LoudCrowd Client Strategist, [email protected] or the native PageFly help chatbot.

Did this answer your question?