Styling of my Compliance pages?
The Compliance pages generated upon installation of the app, can be found in the Online Store tab under the Pages section.
The pages in general are set to inherit the overall styling of the other pages in the store so they can fit in the overall look and design of it. If you are looking to make any adjustments to the pages and their elements, below you can find some useful guidelines on how this can be done by using CSS and applying it to the page HTML directly.
Our recommendation on this process is to apply such changes only if you are an advanced technical user.
The main elements we have in the Compliance pages are the title, the text description of the page, request sections, and request links. For the sections opening from the request links you also have the text "Enter your email to confirm your identity", an input box for your email address and a "Submit" button.
The selectors for the above-listed elements can be found below. Please note that the example selectors are for the GDPR compliance page, and if you are looking to apply custom design to any other Compliance page, the part of the selector containing the page name needs to be changed accordingly. For example, if you want to change the APPI compliance page, the selector for the request links should be changed from gdpr_page button to appi_page button
1. Page title: #div > h1
2. Page description text: #gdpr_page > div.text-center
3. Request sections titles: #gdpr_page > h2
4. Request links: #gdpr_page button
"Enter your email to confirm your identity" text for different request:
"Edit your account information" request: #form-gdpr-edit-account-request > form > label
"GDPR requests" request: #form-gdpr-requests-request > form > label
"Personal information" request: #form-gdpr-personal-information-request > form > label
"Orders" request: #form-gdpr-orders-request > form > label
"Request a report" request: #form-gdpr-personal-data-report-request > form > label
"Request personal data deletion" request: #form-gdpr-delete-account-request > form > label
"Do not sell my personal information" and "Limit the Use of My Sensitive Personal Information (SPI)" requests: #form-us-laws-do-not-sell-request > form > label
"Email address input box" for different requests:
"Edit your account information" request: #form-gdpr-edit-account-request-email
"GDPR request" request: #form-gdpr-requests-request-email
"Personal information" request: #form-gdpr-personal-information-request-email
"Orders" request: #form-gdpr-orders-request-email
"Request a report" request: #form-gdpr-personal-data-report-request-email
"Request personal data deletion" request: #form-gdpr-delete-account-request-email
"Do not sell my personal information" and "Limit the Use of My Sensitive Personal Information (SPI)" requests: #form-us-laws-do-not-sell-request-email
"Submit" button for different requests:
"Edit your account information" request: #form-gdpr-edit-account-request-submit
"GDPR request" request: #form-gdpr-requests-request-submit
"Personal information" request: #form-gdpr-personal-information-request-submit
"Orders" request: #form-gdpr-orders-request-submit
"Request a report" request: #form-gdpr-personal-data-report-request-submit
"Request personal data deletion" request: #form-gdpr-delete-account-request-submit
"Do not sell my personal information" and "Limit the Use of My Sensitive Personal Information (SPI)" requests: #form-us-laws-do-not-sell-request-submit
Once you enter your email address for submitting a request, a verification modal is shown, where you need to verify that you agree to the terms on which the request will be processed. This form is containing a tickbox and text content.
Their selectors are the following:
Verification modal: #data-verification-modal
Tickbox: #data-verification-icon
Text content: #gdpr-modal-container-text
Any changes to the text content can be made like on any other page in your store.
Below you can check an example of how the additional styling can be added for the "Request links" (#gdpr_page button) element. The example is again for the GRPR compliance page.
In order to change the styling of the element by applying a CSS code to it, you can add this directly at the top of the page after the opening <style> tag, as shown below:
If you need help with the process, don’t hesitate to contact our support team at: support@consentmo.com or from the Chat button at the bottom right corner of your browser.
The pages in general are set to inherit the overall styling of the other pages in the store so they can fit in the overall look and design of it. If you are looking to make any adjustments to the pages and their elements, below you can find some useful guidelines on how this can be done by using CSS and applying it to the page HTML directly.
Our recommendation on this process is to apply such changes only if you are an advanced technical user.
The main elements we have in the Compliance pages are the title, the text description of the page, request sections, and request links. For the sections opening from the request links you also have the text "Enter your email to confirm your identity", an input box for your email address and a "Submit" button.
The selectors for the above-listed elements can be found below. Please note that the example selectors are for the GDPR compliance page, and if you are looking to apply custom design to any other Compliance page, the part of the selector containing the page name needs to be changed accordingly. For example, if you want to change the APPI compliance page, the selector for the request links should be changed from gdpr_page button to appi_page button
1. Page title: #div > h1
2. Page description text: #gdpr_page > div.text-center
3. Request sections titles: #gdpr_page > h2
4. Request links: #gdpr_page button
"Enter your email to confirm your identity" text for different request:
"Edit your account information" request: #form-gdpr-edit-account-request > form > label
"GDPR requests" request: #form-gdpr-requests-request > form > label
"Personal information" request: #form-gdpr-personal-information-request > form > label
"Orders" request: #form-gdpr-orders-request > form > label
"Request a report" request: #form-gdpr-personal-data-report-request > form > label
"Request personal data deletion" request: #form-gdpr-delete-account-request > form > label
"Do not sell my personal information" and "Limit the Use of My Sensitive Personal Information (SPI)" requests: #form-us-laws-do-not-sell-request > form > label
"Email address input box" for different requests:
"Edit your account information" request: #form-gdpr-edit-account-request-email
"GDPR request" request: #form-gdpr-requests-request-email
"Personal information" request: #form-gdpr-personal-information-request-email
"Orders" request: #form-gdpr-orders-request-email
"Request a report" request: #form-gdpr-personal-data-report-request-email
"Request personal data deletion" request: #form-gdpr-delete-account-request-email
"Do not sell my personal information" and "Limit the Use of My Sensitive Personal Information (SPI)" requests: #form-us-laws-do-not-sell-request-email
"Submit" button for different requests:
"Edit your account information" request: #form-gdpr-edit-account-request-submit
"GDPR request" request: #form-gdpr-requests-request-submit
"Personal information" request: #form-gdpr-personal-information-request-submit
"Orders" request: #form-gdpr-orders-request-submit
"Request a report" request: #form-gdpr-personal-data-report-request-submit
"Request personal data deletion" request: #form-gdpr-delete-account-request-submit
"Do not sell my personal information" and "Limit the Use of My Sensitive Personal Information (SPI)" requests: #form-us-laws-do-not-sell-request-submit
Once you enter your email address for submitting a request, a verification modal is shown, where you need to verify that you agree to the terms on which the request will be processed. This form is containing a tickbox and text content.
Their selectors are the following:
Verification modal: #data-verification-modal
Tickbox: #data-verification-icon
Text content: #gdpr-modal-container-text
Any changes to the text content can be made like on any other page in your store.
Below you can check an example of how the additional styling can be added for the "Request links" (#gdpr_page button) element. The example is again for the GRPR compliance page.
In order to change the styling of the element by applying a CSS code to it, you can add this directly at the top of the page after the opening <style> tag, as shown below:
If you need help with the process, don’t hesitate to contact our support team at: support@consentmo.com or from the Chat button at the bottom right corner of your browser.
Updated on: 15/10/2024
Thank you!