Title + description above main product image on mobile

[Ryan1998]

Could someone help with me please. How do I get it so Title + description above main product image on mobile. Will tip. Url: https://errival.com/products/errival%E2%84%A2-instant-period-cramp-relief-heated-belt

 

[BSSCommerce-HDL · Accepted solution]

@Ryan1998, 

Can you kindly share your collaborator request code from the Users and permissions page?

That's really essential before we can send you a request to check the settings at your store in order to support you in adding the code.

[BSSCommerce-HDL · Accepted solution]

Hi @Ryan1998, Pls try again with this code: 

 <script>
 let prd_title = document.querySelector('.product__title');
 let prd_description = document.querySelector('.product__description');
 let section_prd =  document.querySelector('.product');
 if(prd_title && prd_description && section_prd) {
   
 let initialTitleParent = prd_title.parentNode;
 let initialTitleNextSibling = prd_title.nextSibling;
 let initialDescriptionParent = prd_description.parentNode;
 let initialDescriptionNextSibling = prd_description.nextSibling;
 if(window.innerWidth < 749) {
   section_prd.insertAdjacentElement("afterbegin", prd_description);
   section_prd.insertAdjacentElement("afterbegin", prd_title);
 }
 window.addEventListener('resize', () => {
    if (window.innerWidth < 749) {
        section_prd.insertAdjacentElement("afterbegin", prd_description);
        section_prd.insertAdjacentElement("afterbegin", prd_title);
    } else {
      if (initialTitleParent && initialTitleNextSibling) {
        initialTitleParent.insertBefore(prd_title, initialTitleNextSibling);
      } else if (initialTitleParent) {
        initialTitleParent.appendChild(prd_title);
      }

      if (initialDescriptionParent && initialDescriptionNextSibling) {
        initialDescriptionParent.insertBefore(prd_description, initialDescriptionNextSibling);
      } else if (initialDescriptionParent) {
        initialDescriptionParent.appendChild(prd_description);
      }
    }
 });
}
</script>

Hope this can help you 😍

[BSSCommerce-HDL]

Hi @Ryan1998, Can you describe it to us in more detail? Please take a photo for me

[Ryan1998]

See the image I have sent. Im want to put the product title + description above the product image in which you see in that picture. Like this:

 

[BSSCommerce-HDL]

Hi @Ryan1998, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag: 

<script>
 let prd_title = document.querySelector('.product__title');
 let prd_description = document.querySelector('.product__description');
 let section_prd =  document.querySelector('.product');

 let initialTitleParent = prd_title.parentNode;
 let initialTitleNextSibling = prd_title.nextSibling;
 let initialDescriptionParent = prd_description.parentNode;
 let initialDescriptionNextSibling = prd_description.nextSibling;
 
 window.addEventListener('resize', () => {
    if (window.innerWidth < 470) {
      if (section_prd && prd_title && prd_description) {
        section_prd.insertAdjacentElement("afterbegin", prd_description);
        section_prd.insertAdjacentElement("afterbegin", prd_title);
      }
    } else {
      if (initialTitleParent && initialTitleNextSibling) {
        initialTitleParent.insertBefore(prd_title, initialTitleNextSibling);
      } else if (initialTitleParent) {
        initialTitleParent.appendChild(prd_title);
      }

      if (initialDescriptionParent && initialDescriptionNextSibling) {
        initialDescriptionParent.insertBefore(prd_description, initialDescriptionNextSibling);
      } else if (initialDescriptionParent) {
        initialDescriptionParent.appendChild(prd_description);
      }
    }

 });
});
  
</script>

Here is result: 

Hope this can help you,

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

[Ryan1998]

Thanks for the quick response!

Ive done that but doesnt seem to be working what could it be that I have done wrong

  

[BSSCommerce-HDL · Accepted solution]

@Ryan1998, 

Can you kindly share your collaborator request code from the Users and permissions page?

That's really essential before we can send you a request to check the settings at your store in order to support you in adding the code.

[BSSCommerce-HDL · Accepted solution]

Hi @Ryan1998, Pls try again with this code: 

 <script>
 let prd_title = document.querySelector('.product__title');
 let prd_description = document.querySelector('.product__description');
 let section_prd =  document.querySelector('.product');
 if(prd_title && prd_description && section_prd) {
   
 let initialTitleParent = prd_title.parentNode;
 let initialTitleNextSibling = prd_title.nextSibling;
 let initialDescriptionParent = prd_description.parentNode;
 let initialDescriptionNextSibling = prd_description.nextSibling;
 if(window.innerWidth < 749) {
   section_prd.insertAdjacentElement("afterbegin", prd_description);
   section_prd.insertAdjacentElement("afterbegin", prd_title);
 }
 window.addEventListener('resize', () => {
    if (window.innerWidth < 749) {
        section_prd.insertAdjacentElement("afterbegin", prd_description);
        section_prd.insertAdjacentElement("afterbegin", prd_title);
    } else {
      if (initialTitleParent && initialTitleNextSibling) {
        initialTitleParent.insertBefore(prd_title, initialTitleNextSibling);
      } else if (initialTitleParent) {
        initialTitleParent.appendChild(prd_title);
      }

      if (initialDescriptionParent && initialDescriptionNextSibling) {
        initialDescriptionParent.insertBefore(prd_description, initialDescriptionNextSibling);
      } else if (initialDescriptionParent) {
        initialDescriptionParent.appendChild(prd_description);
      }
    }
 });
}
</script>

Hope this can help you 😍

[Ryan1998]

Is this something you'd be able to do. See how the product images are in the corner. And then the text is aligned like that on desktop. Ill gladly tip more. 

[BSSCommerce-HDL]

Hi @Ryan1998, Pls insert this code to your file css: 

@media screen and (min-width: 740px) {
  .product-media-container.media-type-image {
    margin: 0 !important;
}


.shopify-section.section:has(.product) > section {
    padding: 0 !important;
}

.product__info-wrapper.grid__item {
    padding: 20px 0 20px 80px;
}


.page-width:has(.product) {
  padding: 0 5rem 0 0 !important;
}
}

Hope this can help you 😍

[Ryan1998]

yes 🙌

[BSSCommerce-HDL · Accepted solution]

Hi @Ryan1998, i edited my code a bit and this new code: 

@media screen and (min-width: 740px) {
  .product-media-container.media-type-image {
    margin: 0 !important;
    width: 100%;
}


.shopify-section.section:has(.product) > section {
    padding: 0 !important;
}

.product__info-wrapper.grid__item {
    padding: 20px 170px 20px 240px;
}


.page-width:has(.product) {
  padding: 0 5rem 0 0 !important;
}
}

@media only screen and (max-width: 739px) {
  .product__description p {
     text-align: center !important; 
  }
}

Hope this can help you 😍

[BuriedInWork]

I'm trying to implement the same solution, but have a fairly large gap at the top above the title. Any ideas how to shrink it? I made sure that padding for the section is set to 0.