Personalized checkout and custom promotions with Shopify Scripts
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!
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
Works well! How can I stop the rows from appearing on both sides tho...
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
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025