Set bar as open in product description

Solved

Set bar as open in product description

Danielpochapski
Explorer
62 0 11

Hello guys,

I have a custom code for the product description. It works through metafields. However, I would like to set ONLY the "Descrição completa" tab open, without the need for the initial click to see the content.

Can someone help me?

My website is: https://www.smartcasashop.com.br/products/brinquedo-eletronico-inteligente-com-laser-para-gatos

If you need some code, I can provide it.Problem.png

Accepted Solutions (2)

GemPages
Shopify Partner
5625 1261 1232

This is an accepted solution.

Hello @Danielpochapski ,

 

It's GemPages support team and glad to support you today.

 

I would like to give you the recommendation to support you so kindly follow the steps below:

 

1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1673937639293.png


2. Open your theme.liquid theme file


3. Paste the below code before </body>

<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>

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

BSS-Commerce
Shopify Partner
3477 463 527

This is an accepted solution.

Hi @Danielpochapski 

- If you always want to show the description and don't want to keep the description on and off, please go to Admin => Online Store => Theme => Edit Code. Then, find the base.css file and insert the following CSS at the end:

a.show_hide{

display:none !important;

}

.read_more{

display:block !important

}

- In case you still want to keep the opening and closing function of the description and want to show the description from the beginning, you should go to Edit Code to find the theme.js or global.js file and insert the following code at the end:

if (window.location.pathname.includes("/products/")) {

    setTimeout(()=>{

        const showDescription = document.querySelector('.show_hide')

        showDescription.click()

    },500)

}

I hope that this can help you solve the issue.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 5 (5)

GemPages
Shopify Partner
5625 1261 1232

This is an accepted solution.

Hello @Danielpochapski ,

 

It's GemPages support team and glad to support you today.

 

I would like to give you the recommendation to support you so kindly follow the steps below:

 

1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1673937639293.png


2. Open your theme.liquid theme file


3. Paste the below code before </body>

<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>

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Danielpochapski
Explorer
62 0 11

Thanks, @GemPages for the support. Your solution worked perfectly.

StoreWatchers
Trailblazer
205 30 36

Hello @Danielpochapski,

 

Greetings from the Store Watchers Support Team! Happy to help you today.

 

All you have to do is add open attribute to the first details tag (which have id like Details-description-template....). You may find this element in product-form, product.liquid, or product-description liquid file.
 
Let me know if need further assistance.
 
Regards,
Store Watchers Support Team

 

StoreWatchers - Automate testing for your Shopify store in seconds


If you find my reply helpful, please hit Like and Mark as Solution
Visit us: App Store | Website | FAQs

BSS-Commerce
Shopify Partner
3477 463 527

This is an accepted solution.

Hi @Danielpochapski 

- If you always want to show the description and don't want to keep the description on and off, please go to Admin => Online Store => Theme => Edit Code. Then, find the base.css file and insert the following CSS at the end:

a.show_hide{

display:none !important;

}

.read_more{

display:block !important

}

- In case you still want to keep the opening and closing function of the description and want to show the description from the beginning, you should go to Edit Code to find the theme.js or global.js file and insert the following code at the end:

if (window.location.pathname.includes("/products/")) {

    setTimeout(()=>{

        const showDescription = document.querySelector('.show_hide')

        showDescription.click()

    },500)

}

I hope that this can help you solve the issue.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Danielpochapski
Explorer
62 0 11

Thanks, @BSS-Commerce  for the support. Your solution also worked perfectly.