Registrations In Account Area

New Customer Accounts

The "New Customer Accounts" experience provides a passwordless login for your customers. They log in using a 6-digit verification code sent to their email, eliminating the need to remember passwords.

Setup Instructions for Merchants

To enable the product registration features in the new customer accounts, you need to add the app extensions via the Shopify Admin.

1. Navigate to Settings > Customer accounts in your Shopify Admin.

2. In the New customer accounts section, click Manage, then click Customize (or use the Online theme > Customizer > Checkout and Customer account).

   • Note: This opens the Checkout and Accounts Editor.

Step 1: Add "My Product Cares" Page (Full Page Extension)

This creates a dedicated page for customers to view and manage all their registrations.

1. In the editor sidebar, click the Apps icon (grid icon).

2. Click the (+) button next to "My Product Cares" (Full Page).

3. Select Add page to Accounts.

4. Important: To make this page accessible, go to Content > Menus in your Shopify Admin and add the new "My Product Cares" page to your Customer account menu.

Step 2: Add Order History Block

This adds a quick "View Registrations" button to the customer's order list which link to the Full page.

1. In the editor, use the page selector at the top center to switch to Order index.

2. In the Sections sidebar, click (+) Add block.

3. Select "Registrations Block" from the list.

4. Save your changes.

Customer Features

Once set up, your customers can access their registrations by:

1. Logging into their account (via email code).

2. Clicking "My Product Cares" in the navigation menu, OR

3. Clicking the "View Registrations" button on their Order History page.

On the "My Product Cares" page, customers can:

• View the status of their registrations (e.g., Active, Pending).

• Make a warranty claim (if enabled).

• Remove a registration.

---

Legacy Customer Accounts (classic)

For logged-in customers, it is possible to show their registered products in the account area or any other suitable location. This requires some knowledge of the shop's theme and the ability to make changes to the theme's HTML.

Here are the steps for adding product registrations to the account area:

1. Go to Shop Admin > Online Store > Themes.

2. Select Edit HTML/CSS from the top right corner.

1. Locate the template where the registration should be added (e.g., customers/account.liquid - This is the same account page that shows order history).

1. Place the following code into the appropriate location. Ensure it does not break the HTML structure. It is recommended to place it after a closing tag.

<div id="mpr-root"></div>
<script type="text/javascript">
window.productReg = {
        // defaultFormSlug: "product-registration",
        // registeredEntriesToShow: ['product-registration'],
        // mode: "normal",
        // openRegisteredEntities: true,
        makeClaimUrlPrefix: "/apps/product-registration",
        customer: {
                id: {{ customer.id | json }},
                email: {{ customer.email | json }},
                address: {{ customer.default_address | json }},
                tags: {{ customer.tags | json }},
         }
}
</script>
<script type="text/javascript" src="https://product-reg.varify.xyz/v2/mpr-embeded-frontend.js"></script>

1. Save the changes and verify them on the frontend.

2. Ensure that the product registration section appears correctly in the account area and that it does not interfere with other elements on the page. If any issues arise, review the HTML structure and the placement of the code snippet to ensure it is correctly integrated.

Note: The above code will display the default form, which is "Product Registration". You can change the default form by navigating to App Settings > General > Default Form.

Alternatively, you can uncomment (i.e., remove the // in the line // defaultFormSlug: 'product-registration' in the above code) and change product-registration to the desired form slug. The form slug can be found by navigating to the form in the Admin area and clicking "View on frontend." This will open a new tab with a URL similar to apps/product-registration?form=product-registration. In this example, product-registration is the form slug. If your form slug is different, replace product-registration with the appropriate slug.

The registeredEntriesToShow variable allows you to specify which forms' registered entries should be displayed. This is useful if you have multiple forms and only want to show entries for a specific form. For example, if you have 10 forms and only want to show registered entries for the "product-registration" form, you can set registeredEntriesToShow to ['product-registration'].

The makeClaimUrlPrefix variable defines the base URL for the form. By default, it is set to /apps/product-registration. If you have changed the app proxy URL in the app configuration, you will need to update this variable to reflect the new URL.

App Modes

In the above code, there is a setting for different modes that control how the app behaves. The available modes are:

• normal - Displays both the form and registered entries. Users need to be logged in and have registered entries to see this.

• form - Displays only the form.

• registered - Displays only the registered entries.

Adjust the mode in the above code for different effects. For example, when in the account area, you might want to use the registered mode to show only the registered entries without the form.