Contents x
      Customizing Your Landing Page
        • Dark
          Light
        Contents

        Customizing Your Landing Page

          • Dark
            Light
          Article summary

          Products


          Reviews
          Supported plans

          Premium, Enterprise

          eCommerce Platform

          Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Volusion, Salesforce Commerce Cloud, Custom

          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:

          1. In your Yotpo Reviews main menu, go to Emails > Landing Page Template Editor
          2. 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 

          1. 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
          1. Edit the code according to your requirements.
          2. Click the Save Changes button
          3. 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) 
          • 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:

          1. Expand the locales/ folder by clicking on the folder icon
          2. Select the JSON file for the language you want to use for the Landing Page
          3. Edit the content if necessary
          4. 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:

          1. Click the Save Changes button
          2. Click Preview Pages
          3. 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:

          1. Select the file version in the File Version dropdown list
          2. The version you select is loaded
          3. Click the Save Changes button

          Resetting all customizations

          To reset all customizations:

          1. Click Reset all customizations at the bottom of the editor
          2. To reset the customizations, click OK in the pop-up dialog box
          Was this article helpful?
          What's Next

          PRODUCT

          RESOURCES

          PARTNERSHIPS

          COMPANY

          SUPPORT

          footer-logo

          Terms of Service

          Terms of Use

          Security

          Privacy Policy