Solved

How to auto open product description as default in accordion tab

surfingcinv
Excursionist
37 1 10

Hello,

 

I found this article and followed the code, but its not working on my store. What am I doing wrong?

https://community.shopify.com/c/shopify-discussions/set-bar-as-open-in-product-description/m-p/19063...

 

<script>
$(document).ready(function(){
$('.product__accordion').each(function(el,item){
if (el === 0){
$(this).find('details').attr('open', '');
$(this).find('summary').attr('aria-expanded','true');
}
})
})
</script>

 

This is the store URL

https://www.iamgreenminded.com/products/bakuchiol-serum-retinol-alternative-phyto-r5

 

1_2024-06-09 17_21_07-Window.png2_2024-06-09 17_21_07-Window.png

 

 

Accepted Solution (1)

surfingcinv
Excursionist
37 1 10

This is an accepted solution.

Solution was adding  " open" to the code in the following screenshot 1_2024-06-09 17_21_07-Window.png

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

Hi @surfingcinv 

You can try changing the code to this, but I guess it will open all tabs by default. 

<script>
document.addEventListener("DOMContentLoaded", function() {
    var accordions = document.querySelectorAll('.product__accordion');
    accordions.forEach(function(item, index) {
        if (index === 0) {
            var details = item.querySelector('details');
            var summary = item.querySelector('summary');
            if (details) {
                details.setAttribute('open', '');
            }
            if (summary) {
                summary.setAttribute('aria-expanded', 'true');
            }
        }
    });
});
</script>

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

surfingcinv
Excursionist
37 1 10

Thanks. But I need only the product description section auto opened

surfingcinv
Excursionist
37 1 10

This is an accepted solution.

Solution was adding  " open" to the code in the following screenshot 1_2024-06-09 17_21_07-Window.png

PaulMartin
Shopify Partner
250 39 72

Hey @surfingcinv

I am assuming you are using Dawn, based on your previous post. This comment will be a step-by-step guide in order to attain what you are looking for.

To start, go to your code editor. Head to Online Store > Themes > ... of the theme you want to edit > Edit code. 

PaulMartin_0-1717996833639.png

Then search for the file named "main-product.liquid", ensure that you are in the Sections folder. Open that file

PaulMartin_1-1717996963035.png

Then by using CTRL + F, look for this piece of code. It should be at the 900th line or somewhere close to that

"type": "collapsible_tab"

PaulMartin_2-1717997237187.png

Next, I want you to add this piece of code here, just like the image after the code below. Then save the file.

{
"type": "checkbox",
"id": "custom_open_default",
"label": "Open by default",
"default": false
},

PaulMartin_3-1717997395663.png

Now the setup is done. Next, we'll be adding more code in order to make that added setting work as it should.

In the same file, CTRL + F, and find this piece of code. It should be at the some 200s line.

when 'collapsible_tab'

PaulMartin_4-1717997569763.png

Next, I want you to add this piece of code here, just like the image below this code:

{% if block.settings.custom_open_default %} open {% endif %}

PaulMartin_5-1717997752798.png

Then click save. That should be all the code additions needed.

Now head to your theme editor and click on the description block. And you should see the new setting we added for the setup. If you mark it checked and save your theme, that collapsible row will be opened by default.

PaulMartin_6-1717997996809.png


Here's a demo of that working flawlessly. 
Product A – martin-dumpstore
Password: 1

If you got any questions, let me know. And if there are any unclear instructions, let me know and I will guide you in order to make this possible on your store.

Open to help people out, just email me here or tag me by using "@" when posting your comment
PaulMartin
Shopify Partner
250 39 72

Oof, I thought it was the collapsible tab. Guess it was just the product description, my bad there. Good work on getting it sorted out @surfingcinv !

Open to help people out, just email me here or tag me by using "@" when posting your comment