Customizing Your Landing Page
- DarkLight
Customizing Your Landing Page
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
A landing page is a page that a customer reaches during or after an interaction with your site, such as answering an automatic review request email.
In this article, you'll learn how to customize your landing pages using the Landing Page editor.
Using the Landing Page Editor
Interested in a tailor-made landing page design?
Reach out to your Yotpo representative to learn more about how our in-house Professional Services team can help you design beautiful, on-brand landing pages.
Enabling Your Landing Pages
To enable your landing pages:
In your Yotpo Reviews main menu, go to Emails > Email Setup.
Under Customize your content, click the Landing page template editor tile.
Click to activate the editor. To turn it off, click the Deactivate button.
Editing the Landing Page
Important
Editing Landing Page templates requires HTML coding knowledge. While Technical Support will be provided for functionality issues, it will not be provided for issues related to the validity and customization of the HTML code.
Select the file you want to edit in the list on the left side of the editor. Click the folder name or icon to open the folder if necessary.
Edit the code according to your requirements.
Click the Save Changes button.
Click Preview to review your changes. When you click Save Changes, the latest version is added to the top of the File Version list.
Folders Overview
đź“‚ locales/
En.json - JSON file that contains all the text in all the landing pages. The language is set as key-value pairs.
Styles.css - contains all the CSS for all landing pages. There is no base file or override file - just one CSS file.
đź“‚ pages/
Anonymous.html - The "Thank you" page that customers see after confirming their email address via the confirmation email for an on-site review.
Answer.html - The answer form that customers receive as part of the “send to past customers” functionality for on-site questions.
Delayed_order.html - A landing page that the customer sees if they click the link that they did not get their product yet at the bottom of the review request email:
layout(readonly).html - the main layout for all landing pages
Question.html - The "Thank you" page that customers see after confirming their email address from the confirmation email for an on-site question
Review.html - The landing page for a review: The same landing page is shared across all review types (product/site, automatic/manual)
Unsubscribe.html - The landing page presented to the customer after they click “unsubscribe” in an email
Verified.html - The landing page a customer sees if they try to confirm their email more than once in a confirmation email
đź“‚partials
/This folder contains snippets (as opposed to full pages):
đź“‚answer/
form(readonly).html - The form in the answer page
đź“‚review/
đź“‚custom_fields/
Free_text_field.html - Snippet for free text field custom question
Multiple_choice_field.html - Snippet for multiple-choice customer-related question
Rating_field.html - Snippet for product-related rating question (1-5 Rating)
Single_choice_dropdown_field.html - Snippet for customer-related single choice question (dropdown layout)
Single_choice_radio_buttons_field.html - Snippet for customer-related single choice question (radio-button layout)
Size_field.html - Snippet for product-related fit question
Custom_fields.html - General snippet for all types of custom questions
Form.html - The review form base fields (title, body, etc.)
Images_uploader.html - Contains the “add photo” button and loader
Review_header.html - Contains the review header - the part above the form that contains the product name, image, and the rating
Reviews_accordion.html - For MPR: The collapsed version of the other product forms that are not being filled in at the moment
Spinner.html - The animation displayed below the "Submit" button after clicking it
Star_rating.html - Contains the snippet for the stars
Thank_you.html - The "Thank you" snippet for leaving a review with the form (email/lp)
Footer.html - Snippet for footer (powered by Yotpo)
Header.html - Snippet for header (store logo)
Loading_screen.html - Snippet with loading elements
Shares.html - Social Share icons
Store-redirect.html - The button that redirects the customer to your store
Yotpo_affiliations.html - Promoted Products element in the email
yotpo_answer_form(readonly).html - Error for answer form
Multiple Product Review Form Customization
If you've used Yotpo's Landing Page Editor to customize your landing pages, you'll need to reset your landing page templates to use the Multi-Product Form. Back up your existing HTML customizations by copying and pasting them in a safe place. Click Reset all changes in the upper right corner of the Landing Page Template Editor.
After resetting your templates, make sure to preview them and ensure that they still appear as you desire. Note that some additional modifications may be required to accommodate multi-product elements.
Want to know more about Multiple Product Review?
You can learn more in this guide.
Configuring Localized Landing Pages
When you change the language in your Yotpo Admin page under Email and General Settings > General Settings, the language is added to the Locales list. To configure the language:
Expand the locales/ folder by clicking on the folder icon.
Select the JSON file for the language you want to use for the Landing Page.
Edit the content if necessary.
Click the Save Changes button.
Previewing the Landing Page
Note
The preview only shows the changes you have saved.
Clear the browser cache before previewing a page, or use incognito mode.
To preview custom landing pages:
Click the Save Changes button.
Click Preview.
Select the page you want to preview in the dropdown list.
The page will appear in a separate window or tab in your Internet browser.
Using File Versions
You can load a previous version of your customized landing pages. To load a previous page:
Select the file version in the File Version dropdown list.
The version you select is loaded.
Click the Save Changes button.
Resetting All Customizations
To reset all customizations:
Click Reset all changes in the upper right corner of the editor.
To reset the customizations, click Reset all changes in the pop-up dialog box.
Was this article helpful?
