Boundless Theme

Highlighted
Anonymous
Not applicable
1419 0 0

Hello, I am trying to move my product title to below the product image and as you can see the squares are not the same size. Also, when clicking into the product page, I dislike the pictures being below the product description. Is there any way to combine them all together above the product description?

0 Likes
Highlighted
Community Moderator
Community Moderator
3393 252 612

Hi @Anonymous,

 

Nick here from Shopify. 

 

Really great questions. Let's take a look at each of them below:

 

  1. The photos are not the same size because they were not the same size when they were uploaded to Shopify. Once all the images are the same size when they are uploaded to Shopify the squares will all be the same. There is actually an app to help with this called Photo Resize by Pixc which can help you with this. 
  2. Moving the title of the product below the pictures will require some editing of the code. The code steps for this can be found below:
    1. Open product-grid-item.liquid, and find the product-item__meta opening tags:
      <span class="product-item__meta">
             <span class="product-item__meta__inner">
      Replace these two lines with
      <*div class="product-item__meta text-center">
      Scroll down a tiny bit and find the two `</span>`. They should be roughly 30 lines below and will look like this: 
      </span>
      </span>
      Replace these two lines with:
      </div>
      Copy and paste the following CSS and add to the bottom of the theme.scss file:
       @media only screen and (min-width: 990px){
      
      .product-item__meta {
      
       position: relative;
      
      opacity: 1;
      
      }
      
      }
      
       
      
      @include media-query($large-up) {
      
      .product-item__link:hover .product-item__image {
      
        opacity: 1;
      
       }
      
      }
      
      .product-item__meta:hover {
      
      opacity: 1;
      
         &:before {
      
             opacity: 0;
      
           }
      
      }
      These changes are not a supported guide by Shopify. Because it's not supported and if you don't feel very comfortable making these changes don't hesitate to reach out to our support team directly for help since you are using a Shopify developed theme. 
  3. The final question you had about moving the images above the product description, is possible to do but the code edits to do it would be out of the scope of a reply in the community here. Your best bet would be to reach out to the support team directly about it or if you would like I could email you? If you would like me to email you, could you let me know if the email you signed up to the community with is the best way to reach you? 

I hope this helps! 🙂

 

All the best, Nick

 

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Anonymous
Not applicable
1419 0 0

Yes sir that is my best email. 

When i get to the code page, where do I find "product-grid-item.liquid"?

0 Likes
Highlighted
Community Moderator
Community Moderator
3393 252 612

Ah yes, the "product-grid-item.liquid" can be found under Snippets in the theme code editor Admin > Online Store > Themes > Actions > Edit Code > Snippets > product-grid-item.liquid. 

 

Sounds good. I'll reach out to you via email regarding the images within the product description. Should you for any reason not receive it, be sure to let me know in a reply here. 

 

 

 

 

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Anonymous
Not applicable
1419 0 0

Okay so it worked but now some of the words for the product title is getting cut. Is making the title shorter the only solution for that?

0 Likes
Highlighted
Community Moderator
Community Moderator
3393 252 612

Hi @Anonymous,

 

I asked our theme support team about this to double check. They mentioned that when something like this happens, it is generally if there is a mistake or all of the steps weren't fully completed. Could you double check you did all the steps I provided above, please and let me know?

 

 

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Anonymous
Not applicable
1419 0 0

Yes sir, I followed all of the steps. 

0 Likes
Highlighted
New Member
2 0 0

Hi There,

Any update for this post?

I've been trying to do the same but as you can see my website is messed up: aequill.com

I want the product description to appear at the bottom of the image (instead appearing only once you hover over the item) on desktop.

 

Thank you

0 Likes
Highlighted
New Member
2 0 0

Ok, just found out to delete the * in this code: 

<*div class="product-item__meta text-center">

And it works perfectly! 

0 Likes