Re: How do i move product description into collabsible row

Carlzito · ‎05-28-2024

How do i move product description into collabsible row?

Ahsan-ah-med · ‎05-28-2024

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
            {% when 'custom-accordion' %}
            
              <ul class="accordion">
  {% if product.description != blank %}
<li class="accordion-item is-active">
<h3 class="accordion-thumb"><div><img src="{{ block.settings.plus | img_url: 'master' }}" class="acc_plus"/><img src="{{ block.settings.minus | img_url: 'master' }}" class="acc_minus"/></div>{{ block.settings.description_title }}</h3>
<h4 class="accordion-panel accordion-panel_des"> {{ product.description }}
    <button class="acc_more">Read More:</button>
    <button class="acc_less">Read Less:</button>
    </h4>
</li>
    {% endif %}
</ul>

 $(function() {
        // (Optional) Active an item if it has the class "is-active"	
        $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();

 	$(".accordion > .accordion-item").click(function() {
        // Cancel the siblings
        $(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
    // Toggle the item
    $(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
 	});
 });

You can use this code for product collapsible description first you add block in schema name is "custom-accordion" then my code paste main-product.liquid before {% when 'price' %}

Ahsan Ahmed
Shopify Developer | 2 Years of Experience
Shopify App Developer | 1 Year Experience
I'm Build Custom App for Client Requirements Using Shopify Functions, Shopify Checkout Ui Extensions, Remix App,
Transforming Websites into Shopify
 Converting Existing Websites (WooCommerce, Figma, Magento, etc.) to Shopify
️ Developing Custom Shopify Apps for Unique Client Needs
 Enhancing Shopify Functions with Checkout Extensions for Plus Users
Let's Build Your Dream Store Together!

Serj94 · ‎05-28-2024

The best way is a new metafield for your products.

Create a metafield, which will be assigned for each product. In metafield create a structure same as your desired collapsible rows. Assign created metafield for products. For each product add data to the metafield. In collapsible rows section use dynamic source for each block.

Why move the description isn't good?

What if later you will need description + collapsible rows with different content?

If I helped you - give the thumb up and mark it as the solution.
One free consultation, chech my profile.

Carlzito · ‎05-28-2024

I did that but how would i make some of the text bold?

Serj94 · ‎05-28-2024

Use a rich text type for each row_content value, inside your metafield definition. It will let you customize your text without code in future.

If I helped you - give the thumb up and mark it as the solution.
One free consultation, chech my profile.

Ahsan-ah-med · ‎05-28-2024

Target in CSS which you can bold element/text
like this:
.accordion-panel_des{

font-weight: 800;

}

Ahsan Ahmed
Shopify Developer | 2 Years of Experience
Shopify App Developer | 1 Year Experience
I'm Build Custom App for Client Requirements Using Shopify Functions, Shopify Checkout Ui Extensions, Remix App,
Transforming Websites into Shopify
 Converting Existing Websites (WooCommerce, Figma, Magento, etc.) to Shopify
️ Developing Custom Shopify Apps for Unique Client Needs
 Enhancing Shopify Functions with Checkout Extensions for Plus Users
Let's Build Your Dream Store Together!

Re: How do i move product description into collabsible row

How do i move product description into collabsible row

Community Blog Articles