New Shopify Certification now available: Liquid Storefronts for Theme Developers

Help me with product description

Solved
Kaymi
Excursionist
17 0 4

Hi guys! Can anyone help me show this Description section? I want the description open automatically without clicking it so they'll read it immediately in phone devices. Is that possible?
My store: www.enchantedgifts.ph
My theme: Ella

 

OPEN.png

Accepted Solution (1)
BSS-Commerce
Shopify Expert
2945 395 414

This is an accepted solution.

Hi @Kaymi ,

 

Step 1: Go to the Shopify Admin, select Themes section and select Edit code

 

view - 2023-11-02T104340.512.png

 

Step 2: Find the theme.liquid file

 

view - 2023-11-02T104432.269.png

 

Add the following code before the </body> code:

 

if (window.location.href.includes("/products/") && window.innerWidth < 550) {
  function appendDescriptionDiv() {
    const newDiv = document.createElement("div");
    const descriptionContent = document.querySelector("#tab-description-mobile .tab-popup-content span").textContent;
    newDiv.textContent = descriptionContent;
    newDiv.style.marginBottom = "8px";

    const descriptionTab = document.getElementById("tab-description");
    descriptionTab.appendChild(newDiv);
  }

  setTimeout(appendDescriptionDiv, 1000);
}

Result:

 

view - 2023-11-02T104548.573.png 

Hope it helps @Kaymi !

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Reply 1 (1)
BSS-Commerce
Shopify Expert
2945 395 414

This is an accepted solution.

Hi @Kaymi ,

 

Step 1: Go to the Shopify Admin, select Themes section and select Edit code

 

view - 2023-11-02T104340.512.png

 

Step 2: Find the theme.liquid file

 

view - 2023-11-02T104432.269.png

 

Add the following code before the </body> code:

 

if (window.location.href.includes("/products/") && window.innerWidth < 550) {
  function appendDescriptionDiv() {
    const newDiv = document.createElement("div");
    const descriptionContent = document.querySelector("#tab-description-mobile .tab-popup-content span").textContent;
    newDiv.textContent = descriptionContent;
    newDiv.style.marginBottom = "8px";

    const descriptionTab = document.getElementById("tab-description");
    descriptionTab.appendChild(newDiv);
  }

  setTimeout(appendDescriptionDiv, 1000);
}

Result:

 

view - 2023-11-02T104548.573.png 

Hope it helps @Kaymi !

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development