Shopify themes, liquid, logos, and UX
Hello,
I have a two part question regarding collapsible columns and rows.
One:
How do I change the collapsible column and row arrows to + and - symbols on the Dawn Shopify theme?
Two:
How do I make one collapsible row or column close when another one is opened so only one is open at a time?
Here is a link to the theme I am using and how I am currently running it: https://themes.shopify.com/themes/dawn/styles/default/preview
Thank you!
Solved! Go to the solution
This is an accepted solution.
Hello,
Step 1: Navigate to your Shopify admin panel and go to "Online Store."
Step 2: Click on "Themes" and then select Edit code
Step 3: Find base.css
If you insert this js script in your theme assets/product-info.js file it will solve your issues
document.querySelectorAll('.product__accordion details').forEach((accordion) => {
accordion.addEventListener('click', function() {
document.querySelectorAll('.product__accordion details').forEach((otherAccordion) => {
// Close other accordions if they are open and not the one clicked
if (otherAccordion !== accordion) {
otherAccordion.removeAttribute('open');
}
});
});
});
Hope your issue will be solved
thank you
This is an accepted solution.
Ensure your HTML structure for each accordion section includes the summary and details tags, and that there is a place for the icons:
Add CSS to hide any existing caret icons within the summary:
/* Hide the default caret SVG within the summary */
.product__accordion details summary .icon-caret {
display: none;
}
Ensure your JavaScript handles the toggle of the plus/minus icons and manages opening and closing of the accordions:
// Define SVG icons
const plusIcon = `<svg class="plus-icon" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18M12 6V18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>`;
const minusIcon = `<svg class="minus-icon" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>`;
document.querySelectorAll('.product__accordion details').forEach((accordion) => {
const summary = accordion.querySelector('summary');
const titleDiv = summary.querySelector('.summary__title');
// Add plus icon initially to all closed accordions
if (!accordion.hasAttribute('open')) {
titleDiv.innerHTML += plusIcon;
} else {
titleDiv.innerHTML += minusIcon;
}
accordion.addEventListener('click', function(event) {
// Prevent default behavior to properly handle the state
event.preventDefault();
document.querySelectorAll('.product__accordion details').forEach((otherAccordion) => {
if (otherAccordion !== accordion) {
otherAccordion.removeAttribute('open');
// Replace minus icon with plus icon for other accordions
const otherSummary = otherAccordion.querySelector('summary');
const existingMinusSvg = otherSummary.querySelector('.minus-icon');
if (existingMinusSvg) {
existingMinusSvg.remove();
otherSummary.querySelector('.summary__title').innerHTML += plusIcon;
}
}
});
// Toggle the current accordion
const isOpen = !accordion.hasAttribute('open');
const svgIcon = summary.querySelector('.plus-icon, .minus-icon');
if (svgIcon) {
svgIcon.remove();
}
if (isOpen) {
accordion.setAttribute('open', '');
summary.querySelector('.summary__title').innerHTML += minusIcon;
} else {
accordion.removeAttribute('open');
summary.querySelector('.summary__title').innerHTML += plusIcon;
}
});
});
If this solution works for you, please consider accepting it as a solution so that it can help others in the community as well. If you have any questions or need further assistance, feel free to ask. Happy coding!
This is an accepted solution.
Hello,
Step 1: Navigate to your Shopify admin panel and go to "Online Store."
Step 2: Click on "Themes" and then select Edit code
Step 3: Find base.css
If you insert this js script in your theme assets/product-info.js file it will solve your issues
document.querySelectorAll('.product__accordion details').forEach((accordion) => {
accordion.addEventListener('click', function() {
document.querySelectorAll('.product__accordion details').forEach((otherAccordion) => {
// Close other accordions if they are open and not the one clicked
if (otherAccordion !== accordion) {
otherAccordion.removeAttribute('open');
}
});
});
});
Hope your issue will be solved
thank you
do not forget to made the post as solved , it will help other to know 🙂
Thank you for the prompt reply!
The code you provided does work for having one collapsible row open at a time.
Would you know how to change the columns arrows to plus and minus icons by chance?
This is an accepted solution.
Ensure your HTML structure for each accordion section includes the summary and details tags, and that there is a place for the icons:
Add CSS to hide any existing caret icons within the summary:
/* Hide the default caret SVG within the summary */
.product__accordion details summary .icon-caret {
display: none;
}
Ensure your JavaScript handles the toggle of the plus/minus icons and manages opening and closing of the accordions:
// Define SVG icons
const plusIcon = `<svg class="plus-icon" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18M12 6V18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>`;
const minusIcon = `<svg class="minus-icon" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>`;
document.querySelectorAll('.product__accordion details').forEach((accordion) => {
const summary = accordion.querySelector('summary');
const titleDiv = summary.querySelector('.summary__title');
// Add plus icon initially to all closed accordions
if (!accordion.hasAttribute('open')) {
titleDiv.innerHTML += plusIcon;
} else {
titleDiv.innerHTML += minusIcon;
}
accordion.addEventListener('click', function(event) {
// Prevent default behavior to properly handle the state
event.preventDefault();
document.querySelectorAll('.product__accordion details').forEach((otherAccordion) => {
if (otherAccordion !== accordion) {
otherAccordion.removeAttribute('open');
// Replace minus icon with plus icon for other accordions
const otherSummary = otherAccordion.querySelector('summary');
const existingMinusSvg = otherSummary.querySelector('.minus-icon');
if (existingMinusSvg) {
existingMinusSvg.remove();
otherSummary.querySelector('.summary__title').innerHTML += plusIcon;
}
}
});
// Toggle the current accordion
const isOpen = !accordion.hasAttribute('open');
const svgIcon = summary.querySelector('.plus-icon, .minus-icon');
if (svgIcon) {
svgIcon.remove();
}
if (isOpen) {
accordion.setAttribute('open', '');
summary.querySelector('.summary__title').innerHTML += minusIcon;
} else {
accordion.removeAttribute('open');
summary.querySelector('.summary__title').innerHTML += plusIcon;
}
});
});
If this solution works for you, please consider accepting it as a solution so that it can help others in the community as well. If you have any questions or need further assistance, feel free to ask. Happy coding!
Hello @Sam416,
Thank you, that sort of worked. As you can see from my picture below, it adds the plus and minus icons beside the row title instead of where the old icon-caret used to me.
If you don't mind can you share the url of the store? I can check and help you.
Is there any chance to make this work for the collapsible content too?
I tried changing .product__accordion details to a few different things, but that did not work.
I appreciate the help from you both!
@Arif_Shopidevs, you helped solve issue number 1, and @Sam416, you helped solve number 2.
I was able to align the plus and minus icons using some CSS.
.summary__title {
display: flex; /* Use Flexbox for layout */
justify-content: space-between; /* Distribute space between title and icon */
align-items: center; /* Vertically center the title and icon */
width: 100%; /* Ensure the summary takes full width */
}
.icon-container {
display: flex; /* Use Flexbox for proper centering */
align-items: center; /* Vertically center the icon */
margin-left: auto; /* Push the icon container to the far right */
}
.plus-icon,
.minus-icon {
width: 24px; /* Set icon width */
height: 24px; /* Set icon height */
}
Thank you!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024