Customizing Your Landing Page
Customizing Your Landing Page
Article Summary
Share feedback
Thanks for sharing 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 page 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 > Landing Page Template Editor
- Set the toggle Enable. The switch turns green and a tick mark appears:
Please note:
To disable your landing pages, just turn the Enable toggle to Off.
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-hand 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
- To preview the changes, click Page Previews
- 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)
- đź“‚custom_fields/
- 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 in order to use the Multi-Product Form.
Back up your existing HTML customizations by copying and pasting them in a safe place. Click Reset all customizations in the lower left-hand 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?
For more information, click here
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
Please 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 Pages
- Select the page you want to preview in the drop-down 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 customizations at the bottom of the editor
- To reset the customizations, click OK in the pop-up dialog box
Was this article helpful?
