I want a display like this on my product page.. can someone help

[s_ZOO]

its product description on left side and collapsible content on right. This is desktop view.

and below is mobile view

[StackingContext]

Hi @s_ZOO ,

Can you share a link to your store?

[RodrigoJantsch]

Hi @s_ZOO ,

Could you share the theme you are using?

[UmerKhalid]

---

It looks like you’re aiming for a clean two-column product page layout with accordion-style collapsible sections. This design is great for keeping the product description visible while organizing additional information neatly. Make sure to confirm whether your Shopify theme allows custom sections or if you’ll need to add custom code/snippets for full control.

[s_ZOO]

Using dawn theme… normal theme..

[s_ZOO]

Wild Essence Cotton Flex Co-ord Set

This is link of the product which has this type of customization…

[s_ZOO]

Using normal dawn theme ..

[solverStaff]

Hello @s_ZOO

You can check this post Collapsible content

I hope it will helpful for you

[s_ZOO]

no this is not a post related to this… i want product description on left and collapsible content on right…

[s_ZOO]

yeah custom liquid can be added on my theme.. can u provide the code ?

[kory-smith]

Hey there! I went ahead and did this for you. Gif for proof:

Here’s the code:

{% comment %}
  Product Description + Collapsible Content Section
  Two-column layout: description left, accordions right
  Add this as a section in your Dawn theme
{% endcomment %}

<style>
  .desc-accordion-section {
    padding: 40px 0;
    background-color: {{ section.settings.background_color }};
  }

  .desc-accordion-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }

  .desc-column {
    padding-right: 20px;
  }

  .desc-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: {{ section.settings.label_color }};
    margin-bottom: 16px;
    font-weight: 600;
  }

  .desc-content {
    font-size: 15px;
    line-height: 1.7;
    color: {{ section.settings.text_color }};
  }

  .accordion-column {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .accordion-item {
    border-bottom: 1px solid {{ section.settings.border_color }};
  }

  .accordion-item:first-child {
    border-top: 1px solid {{ section.settings.border_color }};
  }

  .accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: {{ section.settings.text_color }};
    text-align: left;
  }

  .accordion-trigger:hover {
    opacity: 0.8;
  }

  .accordion-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: {{ section.settings.icon_bg_color }};
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  .accordion-icon svg {
    width: 12px;
    height: 12px;
    stroke: {{ section.settings.icon_color }};
    transition: transform 0.3s ease;
  }

  .accordion-item.active .accordion-icon svg {
    transform: rotate(180deg);
  }

  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .accordion-content-inner {
    padding: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.6;
    color: {{ section.settings.text_color }};
  }

  .accordion-item.active .accordion-content {
    max-height: 500px;
  }

  @media screen and (max-width: 749px) {
    .desc-accordion-container {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .desc-column {
      padding-right: 0;
    }
  }
</style>

<div class="desc-accordion-section">
  <div class="desc-accordion-container">
    <div class="desc-column">
      {% if section.settings.show_label %}
        <div class="desc-label">{{ section.settings.label_text }}</div>
      {% endif %}
      <div class="desc-content">
        {% if section.settings.use_product_description %}
          {{ product.description }}
        {% else %}
          {{ section.settings.custom_description }}
        {% endif %}
      </div>
    </div>

    <div class="accordion-column">
      {% for block in section.blocks %}
        <div class="accordion-item" {{ block.shopify_attributes }}>
          <button class="accordion-trigger" aria-expanded="false">
            <span>{{ block.settings.heading }}</span>
            <span class="accordion-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </span>
          </button>
          <div class="accordion-content">
            <div class="accordion-content-inner">
              {{ block.settings.content }}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const accordionItems = document.querySelectorAll('.accordion-item');
    
    accordionItems.forEach(item => {
      const trigger = item.querySelector('.accordion-trigger');
      
      trigger.addEventListener('click', function() {
        const isActive = item.classList.contains('active');
        
        
        accordionItems.forEach(otherItem => {
          otherItem.classList.remove('active');
          otherItem.querySelector('.accordion-trigger').setAttribute('aria-expanded', 'false');
        });
        
        if (!isActive) {
          item.classList.add('active');
          trigger.setAttribute('aria-expanded', 'true');
        }
      });
    });
  });
</script>

{% schema %}
{
  "name": "Description + Accordions",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "use_product_description",
      "label": "Use product description",
      "default": true
    },
    {
      "type": "richtext",
      "id": "custom_description",
      "label": "Custom description",
      "info": "Only used if 'Use product description' is unchecked"
    },
    {
      "type": "checkbox",
      "id": "show_label",
      "label": "Show description label",
      "default": true
    },
    {
      "type": "text",
      "id": "label_text",
      "label": "Label text",
      "default": "DESCRIPTION"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#F5C547"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "label_color",
      "label": "Label color",
      "default": "#8B4513"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#d4a84b"
    },
    {
      "type": "color",
      "id": "icon_bg_color",
      "label": "Icon background color",
      "default": "#2d5a4a"
    },
    {
      "type": "color",
      "id": "icon_color",
      "label": "Icon color",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "type": "accordion",
      "name": "Accordion item",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Accordion heading"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content",
          "default": "<p>Accordion content goes here.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Description + Accordions",
      "blocks": [
        {
          "type": "accordion",
          "settings": {
            "heading": "Wash Care",
            "content": "<p>Machine wash cold, tumble dry low.</p>"
          }
        },
        {
          "type": "accordion",
          "settings": {
            "heading": "Returns and Exchange Policy",
            "content": "<p>Easy returns within 7 days of delivery.</p>"
          }
        },
        {
          "type": "accordion",
          "settings": {
            "heading": "Manufactured and Packaged by",
            "content": "<p>Product manufacturing details here.</p>"
          }
        },
        {
          "type": "accordion",
          "settings": {
            "heading": "Shipping Information",
            "content": "<p>Ships within 3-5 business days.</p>"
          }
        },
        {
          "type": "accordion",
          "settings": {
            "heading": "For Complaints",
            "content": "<p>Contact us at support@example.com</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}

If you already know where to put it, awesome. If not, follow these steps.

• Click “edit code” on your theme
  • 
• Then, add a new file in the “sections” part of the code. Name it whatever you want, but I chose product-description-accordions. It’s important that you make a new file in the SECTIONS folder, not anywhere else.
  • 
• Paste the code I gave you
• Save

Then, when you’re editing the theme code, you’ll have a new section you can add. That’s the thing you just added.

[s_ZOO]

@kory-smith

product-description-accordion

It worked… thanks a lot..