Product Title and review summary below main product image (mobile) {District theme}

Solved
Highlighted

Hi All,

I'm struggling to move the product title and the Yotpo review summary above the product image on mobile only. The presentation is fine as is on desktop. 

 

My attempts included moving the h1 above the image but the product name was listed 2x on both desktop & mobile.

 

Any help is greatly appreciated. 

 

Thank you!

-Bill

eCommerce Director | Straight Hemp
0 Likes
Highlighted
Shopify Expert
2732 468 602

Hi @Straight-Hemp 

Yes you have to add two time in page one for desktop and one for mobile.

You have to hide one in desktop and hide one for mobile.

Suppose add this css class ("desk_hide") in side where you added code for mobile position.

and add "mobile_hide" class in which where you want to hide like in mobile:

Add this css in asset->theme.scss at bottom of page:

@media only screen and (min-width: 767px) {
.desk_hide{display:none; }
}
@media only screen and (max-width: 767px) {
.mobile_hide{display:none; }
}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted

Hi Jasolia,

Thanks so much for your solution! 

 

I've been working at this the last hour or so and haven't been able to implement it properly. Admittedly, my skills are quite basic. Here's what I've done, if you're able to let me know what I've done wrong, I'd appreciate it.

 

I added the following to the bottom of my theme.scss.liquid file:

@media only screen and (min-width: 767px) {
  .desk_hide{display:none; }
}
@media only screen and (max-width: 767px) {
   .mobile_hide{display:none; }
}

On the product page template (product-template.liquid), I added the following code:

 

{% comment %}
     <div class="product-title">
       <h1 itemprop="name">
      <div class="mobile_hide">
         {% unless section_onboarding %}
        {{ product.title }}
      {% else %}
        {{ 'homepage.onboarding.product_title' | t }}
      {% endunless %}
             </div>
    </h1>
              </div>
{% endcomment %}    
eCommerce Director | Straight Hemp
0 Likes
Highlighted

Sorry, I accidentally hit "Post"

 

The original product page code for that snippet was:

 

          {% comment %}
        <div class="product-title">
    <h1 itemprop="name">
      {% unless section_onboarding %}
        {{ product.title }}
      {% else %}
        {{ 'homepage.onboarding.product_title' | t }}
      {% endunless %}
    </h1>
          </div>
    {% endcomment %}  

Because I don't have a staging site, I wanted to first try hiding the page title for mobile only; once successful, I'd add the code for hiding the product title for desktop.

 

Thanks again for your reply.

Bill

 

 

eCommerce Director | Straight Hemp
0 Likes
Highlighted
Shopify Expert
2732 468 602

send me your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted

Our store URL is:

https://straighthemp.com/

 

A product page URL is:

https://straighthemp.com/products/straight-hemp-cbd-oil

 

Thanks.

eCommerce Director | Straight Hemp
0 Likes
Highlighted

Success.

Shopify Expert
2732 468 602

Hi @Straight-Hemp 

open Section->product-template.liquid file and find bellow code:

 

<h1 itemprop="name">{{product.title}}</h1>

and add class mobile_hide in this <h1> like bellow:

<h1 class="desk_hide" itemprop="name">{{product.title}}</h1>

2. Now copy it and paste just before 'images-container' class and add mobile_hide in <h1> like bellow:

 

<h1 class="mobile_hide" itemprop="name">{{product.title}}</h1>

3. add thic s css in asset->theme.scss file at bottom:

@media only screen and (min-width: 767px) {
  .mobile_hide{display:none; }
}
@media only screen and (max-width: 767px) {
   .desk_hide{display:none; }
}

Note: you can ad class in same review div

 

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted

Thank you! Worked great!

eCommerce Director | Straight Hemp
0 Likes
Shopify Expert
2732 468 602

If worked then close this post so user can find it 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes