Adding Shipping Accordion Dropdown to Products

Description

adding shipping accordion dropdown to every product, under product description
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First add a page in Not Linked with Name/URL (to host accordion dropdown)

Name: anything what you want
URL: /shipping-dropdown

#1.2. Add your desired accordion dropdown block

#1.3. Click Gear icon on Store Page

Next, click Advanced > Page Header Code Injection

#1.4. Add this code to right box

<!-- 07.26c22v2 Contact Section to Every Product Page -->
<script>
window.PdpContactSectionConfig = {
  source: "/shipping-dropdown",
  target: ".product-add-to-cart",
  position: "before",
  wrapperClass: "pdp-contact-extra",
  sectionMinHeight: "unset",
  sectionBackgroundColor: "",
  skipInEditMode: true,
  maxWait: 10000,
  pollInterval: 200
};
</script>
<script src="https://code.beaverhero.com/store/0726c18v1contactsectionpdp.js"></script>
<style>
  div.product-meta .accordion-item__description {
  	max-width: 100% !important;
  }
</style>

#2. Customize

#2.1. To change position of Accordion Dropdown, you can change Line 05 – Line 06 (if you know a bit of code)

target: ".product-add-to-cart",
position: "before",