Impulse Theme product description tab auto/always open

[SenSinsations]

Does someone out there have any info on how to make my product description tab be always or auto open? I do not want to remove the "tab" option, but I also do not want the description to be hidden from view upon arrival on a product page. I should be capable of making these changes on my own if given thorough instructions. I have made many changes regarding other issues. Thanks so much in advance. 

[gwinfosoft]

HI

You may use a bit of Javascript code by triggering a click event on product description tab once page is loaded.

Read more here : https://stackoverflow.com/questions/50925683/javascript-auto-click-on-a-button-on-page-load

[Mr_RaviRaj]

@SenSinsations 

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

[KetanKumar]

@SenSinsations 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[SenSinsations]

@KetanKumar Thanks for the response! I am actually really happy to see that you have responded to my question, as I have noticed your responses on many threads and thought perhaps you might be someone who could help me out. That being said, I was able to make this specific customization happen since my post. I do, however, have two other things I am interested in doing. Would you be open to another inquiry? if so, they are as follows: 

1. I would like to center the product name, price, and swatches, they are currently aligned left. 

2. I managed to code the custom tag line, social share line, and social share icons that I want for my site, however, I cannot figure out how to have it applied as a fixed element beneath my product's main image. I will provide my URL and also the preview link for the current version I am working in, as the live version is not an updated theme version. You will see that in my live version this is centered under my images. I currently have 2 side by side main images. As I cannot figure out how to make this happen on the updated version I am working on, I only have 1  large main image, so I would like this centered beneath the single main image. 

live URL: https://sensualsinsations.com/collections/new-arrivals/products/fuchsias-sheer-embroidered-set

preview link: https://jf6p3vd4c9hwpxhh-10223261.shopifypreview.com

[SenSinsations]

Thanks for the response! I am actually really happy to see that you have responded to my question, as I have noticed your responses on many threads and thought perhaps you might be someone who could help me out. That being said, I was able to make this specific customization happen since my post. I do, however, have two other things I am interested in doing. Would you be open to another inquiry? if so, they are as follows: 

1. I would like to center the product name, price, and swatches, they are currently aligned left. 

2. I managed to code the custom tag line, social share line, and social share icons that I want for my site, however, I cannot figure out how to have it applied as a fixed element beneath my product's main image. I will provide my URL and also the preview link for the current version I am working in, as the live version is not an updated theme version. You will see that in my live version this is centered under my images. I currently have 2 side by side main images. As I cannot figure out how to make this happen on the updated version I am working on, I only have 1  large main image, so I would like this centered beneath the single main image. 

live URL: https://sensualsinsations.com/collections/new-arrivals/products/fuchsias-sheer-embroidered-set

preview link: https://jf6p3vd4c9hwpxhh-10223261.shopifypreview.com

[KetanKumar · Accepted solution]

@SenSinsations 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.product-single__meta, .template-product .breadcrumb, .product__policies.rte.small--text-center {text-align: center;}

[SenSinsations]

@KetanKumar that worked like a dream! thank you. As for the 2nd inquiry, do you have any idea how to make that happen?

Below is the code for the social share icons and tagline/socials share line. currently, I just have it in a custom HTML section positioned beneath my product image.

But the problem with that is

A. it is not perfectly centered beneath the product image.

B. in mobile browsers the content actually gets moved to the very bottom of the page rather than staying beneath the product image. 

<div class="social-sharing">
<div class="social_label" style="color: #3b1453"> BE FREE, BE YOU.</div>
<div class="social_sharing_heading" style="color: #3b1453">Spread The Love.</div>
{%- if settings.share_facebook -%}
<a target="_blank" rel="noopener" href="//www.facebook.com/sharer.php?u={{ shop.url | append: share_permalink }}" class="social-sharing__link" title="{{ 'general.social.alt_text.share_on_facebook' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-facebook" viewBox="0 0 14222 14222"><path d="M14222 7112c0 3549.352-2600.418 6491.344-6000 7024.72V9168h1657l315-2056H8222V5778c0-562 275-1111 1159-1111h897V2917s-814-139-1592-139c-1624 0-2686 984-2686 2767v1567H4194v2056h1806v4968.72C2600.418 13603.344 0 10661.352 0 7112 0 3184.703 3183.703 1 7111 1s7111 3183.703 7111 7111zm-8222 7025c362 57 733 86 1111 86-377.945 0-749.003-29.485-1111-86.28zm2222 0v-.28a7107.458 7107.458 0 0 1-167.717 24.267A7407.158 7407.158 0 0 0 8222 14137zm-167.717 23.987C7745.664 14201.89 7430.797 14223 7111 14223c319.843 0 634.675-21.479 943.283-62.013z"style="fill: rgb(59, 20, 83);"></path> </svg>
<span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>
</a>
{%- endif -%}

{%- if settings.share_twitter -%}
<a target="_blank" rel="noopener" href="//twitter.com/share?text={{ share_title | url_param_escape }}&amp;url={{ shop.url | append: share_permalink }}" class="social-sharing__link" title="{{ 'general.social.alt_text.share_on_twitter' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-twitter" viewBox="0 0 32 32"><path fill="#444" d="M31.281 6.733q-1.304 1.924-3.13 3.26 0 .13.033.408t.033.408q0 2.543-.75 5.086t-2.282 4.858-3.635 4.108-5.053 2.869-6.341 1.076q-5.282 0-9.65-2.836.913.065 1.5.065 4.401 0 7.857-2.673-2.054-.033-3.668-1.255t-2.266-3.146q.554.13 1.206.13.88 0 1.663-.261-2.184-.456-3.619-2.184t-1.435-3.977v-.065q1.239.652 2.836.717-1.271-.848-2.021-2.233t-.75-2.983q0-1.63.815-3.195 2.38 2.967 5.754 4.678t7.319 1.907q-.228-.815-.228-1.434 0-2.608 1.858-4.45t4.532-1.842q1.304 0 2.51.522t2.054 1.467q2.152-.424 4.01-1.532-.685 2.217-2.771 3.488 1.989-.261 3.619-.978z"style="fill: rgb(59, 20, 83);"></path> </svg>
<span class="visually-hidden">{{ 'general.social.alt_text.share_on_twitter' | t }}</span>
</a>
{%- endif -%}

{%- if settings.share_pinterest -%}
<a target="_blank" rel="noopener" href="//pinterest.com/pin/create/button/?url={{ shop.url | append: share_permalink }}&amp;media={{ share_image | img_url: '1024x1024' }}&amp;description={{ share_title | url_param_escape }}" class="social-sharing__link" title="{{ 'general.social.alt_text.share_on_pinterest' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-pinterest" viewBox="0 0 256 256"><path d="M0 128.002c0 52.414 31.518 97.442 76.619 117.239-.36-8.938-.064-19.668 2.228-29.393 2.461-10.391 16.47-69.748 16.47-69.748s-4.089-8.173-4.089-20.252c0-18.969 10.994-33.136 24.686-33.136 11.643 0 17.268 8.745 17.268 19.217 0 11.704-7.465 29.211-11.304 45.426-3.207 13.578 6.808 24.653 20.203 24.653 24.252 0 40.586-31.149 40.586-68.055 0-28.054-18.895-49.052-53.262-49.052-38.828 0-63.017 28.956-63.017 61.3 0 11.152 3.288 19.016 8.438 25.106 2.368 2.797 2.697 3.922 1.84 7.134-.614 2.355-2.024 8.025-2.608 10.272-.852 3.242-3.479 4.401-6.409 3.204-17.884-7.301-26.213-26.886-26.213-48.902 0-36.361 30.666-79.961 91.482-79.961 48.87 0 81.035 35.364 81.035 73.325 0 50.213-27.916 87.726-69.066 87.726-13.819 0-26.818-7.47-31.271-15.955 0 0-7.431 29.492-9.005 35.187-2.714 9.869-8.026 19.733-12.883 27.421a127.897 127.897 0 0 0 36.277 5.249c70.684 0 127.996-57.309 127.996-128.005C256.001 57.309 198.689 0 128.005 0 57.314 0 0 57.309 0 128.002z"style="fill: rgb(59, 20, 83);"></path> </svg>
<span class="visually-hidden">{{ 'general.social.alt_text.share_on_pinterest' | t }}</span>
</a>
{%- endif -%}
</div>

[KetanKumar]

@SenSinsations 

its my pleasure to help us can you show me issue image?

[SenSinsations]

@KetanKumar of course. I am wanting this to be centered and static beneath the main image on my product pages. 

product pages. 

[KetanKumar]

@SenSinsations 

yes i can see its center 

[SenSinsations]

@KetanKumar  It is not actually centered when out of the editor. currently, I have it in a custom HTML section. When in preview it is slightly off-centered. But the largest issue is when on any mobile device this moves to the bottom of the page. This is why I am wanting to make it static placed beneath the image. On my live theme, it is statically placed, so it is always right under the image no matter what type of device you are viewing from. I am not well versed in the terminology, but I think it is called an image wrapper perhaps? 

[KetanKumar]

@SenSinsations 

i can see center 

[SenSinsations]

@KetanKumar yes, on my live theme, but I am not working on my live theme. here is the preview for the theme I am working on. 

https://ybpn3edsfv98gvc0-10223261.shopifypreview.com

[KetanKumar]

@SenSinsations 

yes, please confirm 

[SenSinsations]

@KetanKumar Ok, I was able to actually code this in, but it is still not centered. It seems that it is being centered under the full width of both the thumbnails and the main image rather than being centered beneath the main image. when I add a left margin obviously this is only a solution for one type of screen. No worries though. I am working through it

[KetanKumar]

@SenSinsations 

if issue please let me know we have conect on anydesk

[SenSinsations]

@KetanKumar I just signed up for trial version. What do I need to do? I have it set up

[Johnny724]

For future reference. You can disable the option "Tabs as accordion" in Products -> Product information -> Layout.
I am sure all themes have a similar option. I never knew themes had user manuals.
https://softalib4.gitbook.io/minion-shopify-theme/products#layout

[WILDGRACEskin]

Hello!
I've just tried editing the code to enable my product description tab always to be open. Unfortunately, it is not working for me. Could you resolve this issue? Kim

[bocco]

Also for me not working 😐 

Is there anyone who can advise how to do it?

[SenSinsations]

@bocco I actually ended up getting this customization directly from archetype themes (although I recently stopped using the customization, it works like a charm)

in snippets find:

product-description.liquid

find line 10, it should be the following code

{%- render 'tab', id: id, title: title, content: description -%}

once you locate this, erase it and replace with the code below:

<div class="collapsibles-wrapper collapsibles-wrapper--border-bottom">
<button type="button"
class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders collapsible--auto-height is-open" aria-controls="Product-content-{{ id }}"
{% if force_open %}aria-expanded="true"{% endif %}>
{{ title }}
{%- render 'collapsible-icons' -%}
</button>
<div id="Product-content-{{ id }}"
class="collapsible-content collapsible-content--all is-open"
style="height: auto;">
<div class="collapsible-content__inner rte">
{{ description }}
</div>
</div>
</div>

I hope this helps!

[Denishamakwana]

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.