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
View and select the LoudCrowd PageFly template that you would like to use.
Download the PageFly template file of the version that you'd like to use.
Template A (.pagefly file)
Template B (.pagefly file)
Template C (.pagefly file)
Login to your Shopify Account, navigate to Apps, and select the PageFly Page Builder app.
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:
Log in to the platform, navigate to the program tab, and select "edit embed script" on the left-hand side of the page.
Proceed to customize with HEX color. Additionally, you can add a description for your program that will display under the title of your program.
Once customized, copy the updated embed script.
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:
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.
border-width controls the density of the border. This will only be noticeable if the border-color is different than the button color
border-color controls the color of the border
box-shadow adds a drop shadow beneath the button with the specified number of pixels and color
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
Click on an image in the Pagefly template editor and press 'Select' to upload your brand asset
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
Ask your client strategist if you would like to add your custom brand assets to the iPhone container
Quality Assurance / Compatibility Testing
Check out your landing page design on Laptop, Tablet and Mobile to ensure that it looks correct on all devices
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.