How to add footer link instead of sticky icon
Most of the features will be available just by installing the app and then enabling it. The following code is not always needed.
Setting Up Accessibility Toolkit in Your Theme
Follow these detailed steps to customize your theme and add an accessibility toolkit link in the footer navigation.
-
Add the Link in the Footer Navigation
- Navigate to your theme's footer navigation section and add a link with the identifier
#accessibility-toolkit
.
- Navigate to your theme's footer navigation section and add a link with the identifier
-
Create the Accessibility Script File
- In your theme's snippets directory, create a new file named
ac-accessibility.liquid
.
- In your theme's snippets directory, create a new file named
-
Add the Accessibility Script
- Open the
ac-accessibility.liquid
file and add the following script:
- Open the
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
let elements = document.querySelectorAll('[href*="#accessibility-toolkit"]');
elements.forEach(element => {
element.addEventListener("click", function (event) {
acaClick(event);
});
});
});
function acaClick(event) {
event.preventDefault();
let classList = top.document.querySelector(".aca_card").classList;
let acaLink = top.document.querySelector(".aca_ui_container");
acaLink.style.display = acaLink.style.display == "block" ? "none" : "block";
setTimeout(() => classList.remove("DisplayNone"), 20);
}
</script>
-
Include the Script in
theme.liquid
- Open your
theme.liquid
file and include theac-accessibility.liquid
snippet by adding the following line where appropriate:
- Open your
{% render 'ac-accessibility' %}
-
Add Custom CSS
- To ensure the accessibility container is hidden by default, add the following CSS to your app's admin custom code section:
.aca_ui_container {
display: none;
}
Summary of Steps
- Add Link: Insert the
#accessibility-toolkit
link in your footer navigation. - Create Script File: Create a new file
ac-accessibility.liquid
in the snippets directory. - Add Script: Copy and paste the provided script into
ac-accessibility.liquid
. - Include Script in Theme: Add
{% include 'ac-accessibility' %}
totheme.liquid
. - Add CSS: Add the provided CSS to hide the accessibility container by default.
These steps will ensure that your accessibility toolkit is properly integrated and can be toggled on and off through the footer link.
Contact Us at support@appifycommerce.com
Learn more and install our app Appify - Accessibility Toolkit for your shopify store.