Change location of collapsible row

[DRL0529]

Does anyone have code I can paste into the Dawn theme so I can move my collapsible row from underneath the description on the right side, to underneath the pictures on the left? I want it to look like this site (https://www.studioproper.com/collections/shop-all-products/products/apple-ipad-pro-11-3rd-gen). Also how could I go about adding a "buy it with" section underneath? 

Thanks!

[lfbokco]

Actions => Edit code 

Find main-product.liquid  file

Add the following code between </media-gallery> and </div>

{%- for block in section.blocks -%}
         {%- case block.type -%}
      {%- when 'collapsible_tab' -%}
            <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
              <details id="Details-{{ block.id }}-{{ section.id }}">
                <summary>
                  <div class="summary__title">
                    {% render 'icon-accordion', icon: block.settings.icon %}
                    <h2 class="h4 accordion__title">
                      {{ block.settings.heading | default: block.settings.page.title }}
                    </h2>
                  </div>
                  {% render 'icon-caret' %}
                </summary>
                <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
                  {{ block.settings.content }}
                  {{ block.settings.page.content }}
                </div>
              </details>
            </div>
          {%- endcase -%}
        {%- endfor -%}

After the above steps are modified, the effect is as follows

Site：https://lfbokco.myshopify.com/

password:lfbokco

[DRL0529]

Works well! How can I stop the rows from appearing on both sides tho...

[lfbokco]

You can delete the content in the box below

Or change {%- when 'collapsible_tab' -%} inside to {%- when 'collapsible_tab1' -%}

★ Was my reply helpful? Click Like to let me know!
★ Was your question answered? Mark it as an Accepted Solution