How can I add a drop-down menu for policies and size chart on product page?

[Kaliskloset]

How can I create a drop-down under the add to cart so I can show my shipping and refund policy? I also want to add a size chart to each product page. 

[devmont-digital]

Hello @Kaliskloset 

If you are using the Dawn theme, this option is available. Otherwise, follow the steps to create the feature:

1. Go to Online Store -> Theme -> Edit code.
2. Navigate to Snippet and add a new snippet named "Shipping-Return."
3. Paste the following code:

<style>
  .container {
    margin: 0 auto;
    width: 48rem;
  }

  .accordion .accordion-item {
    border-bottom: 1px solid #e5e5e5;
  }

  .accordion .accordion-item button[aria-expanded='true'] {
    border-bottom: 1px solid #03b5d2;
  }

  .accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: #7288a2;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
  }

  .accordion button:hover,
  .accordion button:focus {
    cursor: pointer;
    color: #03b5d2;
  }

  .accordion button:hover::after,
  .accordion button:focus::after {
    cursor: pointer;
    color: #03b5d2;
    border: 1px solid #03b5d2;
  }

  .accordion button .accordion-title {
    padding: 1em 1.5em 1em 0;
  }

  .accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 0;
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 22px;
  }

  .accordion button .icon::before {
    display: block;
    position: absolute;
    content: '';
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: currentColor;
  }
  .accordion button .icon::after {
    display: block;
    position: absolute;
    content: '';
    top: 5px;
    left: 9px;
    width: 2px;
    height: 10px;
    background: currentColor;
  }

  .accordion button[aria-expanded='true'] {
    color: #03b5d2;
  }
  .accordion button[aria-expanded='true'] .icon::after {
    width: 0;
  }
  .accordion button[aria-expanded='true'] + .accordion-content {
    opacity: 1;
    max-height: 9em;
    transition: all 200ms linear;
    will-change: opacity, max-height;
        overflow-y: auto;
        overflow-x: auto;
  }
  .accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
  }
  .accordion .accordion-content p {
    font-size: 1rem;
    font-weight: 300;
    margin: 2em 0;
  }
</style>
<div class="container">
  <div class="accordion">
    <div class="accordion-item">
      <button id="accordion-button-1" aria-expanded="false">
        <span class="accordion-title">shipping Policy</span>
        <span class="icon" aria-hidden="true"></span>
      </button>
      <div class="accordion-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
        </p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-2" aria-expanded="false">
        <span class="accordion-title">Refund Policy</span>
        <span class="icon" aria-hidden="true"></span>
      </button>
      <div class="accordion-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
        </p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-3" aria-expanded="false">
        <span class="accordion-title">Size Chart</span>
        <span class="icon" aria-hidden="true"></span>
      </button>
      <div class="accordion-content">
        <p>
          <img src="https://cdn.shopify.com/s/files/1/0661/1927/0613/files/Lysse_Size_Chart_600px.webp?v=1705566820">
        </p>
      </div>
    </div>
  </div>
</div>

<script>
  const items = document.querySelectorAll('.accordion button');

  function toggleAccordion() {
    const itemToggle = this.getAttribute('aria-expanded');

    for (i = 0; i < items.length; i++) {
      items[i].setAttribute('aria-expanded', 'false');
    }

    if (itemToggle == 'false') {
      this.setAttribute('aria-expanded', 'true');
    }
  }

  items.forEach((item) => item.addEventListener('click', toggleAccordion));
</script>

4. Find the main-product.liquid file and add the following line:

{%- when 'drop-down-menu' -%}
{% render 'Shipping-Return' %}

Screenshot:

5. Locate the schema and insert the following line:

{
"type": "drop-down-menu",
"name": "Accordion",
"limit": 1
},

screenshot:

6. Go to Online Store -> Theme -> Customize.

7. Select the default product. Add a block with the name "Accordion.