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]

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

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]

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

Hi @Ryan1998 , Pls try again with this code:

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]

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.