How can I make product descriptions automatically visible on mobile devices?

Solved

How can I make product descriptions automatically visible on mobile devices?

Kaymi
Excursionist
24 0 5

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 Partner
3477 463 542

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

Reply 1 (1)

BSS-Commerce
Shopify Partner
3477 463 542

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