Suppose we have 3 product tags with names: design, branding, marketing

we need to add 3 accordions to the products that belong to these 3 tags.

Need a help? Just contact me via form below, always to help for free

You can see a demo here

• Branding product: https://tuanphan3.squarespace.com/store/p/country-feast-set-3nybt-5hnr6?noredirect
• Marketing product: https://tuanphan3.squarespace.com/store/p/milk-dip-cup-92wf6-kfgp4?noredirect
• Design product: https://tuanphan3.squarespace.com/store/p/spring-bowl-rltkk-5gn9y?noredirect
• Pass: abc

#1. First you need to create 3 Not Linked Pages with name:

• Accordion-Design – URL SLUG: /accordion-design
• Accordion-Branding – URL SLUG: /accordion-branding
• Accordion-Marketing – URL SLUG: /accordion-marketing

#2. Add 3 Accordion into 3 pages

#3. Install this plugin (paid plugin)

(do Step 1, Step 2 only)

#4. Add this code into Shop Page Header

You can get this code in #3

#5. Add this code under #4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('[data-target*="-design"]').appendTo('.tag-design .ProductItem-details-excerpt');
  $('[data-target*="-branding"]').appendTo('.tag-branding .ProductItem-details-excerpt');
  $('[data-target*="-marketing"]').appendTo('.tag-marketing .ProductItem-details-excerpt');
})
</script>

#6. Add this code into Design > Custom CSS

[data-wm-plugin] {
  display: none;
}
.ProductItem-details-excerpt [data-wm-plugin] {
  display: block !important;
}

Done. You can see a demo here

• Branding product: https://tuanphan3.squarespace.com/store/p/country-feast-set-3nybt-5hnr6?noredirect
• Marketing product: https://tuanphan3.squarespace.com/store/p/milk-dip-cup-92wf6-kfgp4?noredirect
• Design product: https://tuanphan3.squarespace.com/store/p/spring-bowl-rltkk-5gn9y?noredirect
• Pass: abc