Title and price above pictures on product page (Brooklyn theme) (mobile)

Excursionist
46 0 4

Hi All.

Anyway I can get my title and price situated above the product photos on the product page (on mobile)??

Thanks!

 

 

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Philip,

Britton here with the Shopify support team.

This is possible to do, but requires a little rearranging of the html in product.liquid. To start, add this code block: 

  <div class="hide small--show" id="mobile-price">
    <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          {% comment %}
            Optionally show the 'compare at' or original price of the product.
          {% endcomment %}

          {% if product.compare_at_price_max > product.price %}
            <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="product-single__price--wrapper">
              <span id="ComparePrice" class="product-single__price--compare-at">
                {% if current_variant.compare_at_price > current_variant.price %}
                  {{ current_variant.compare_at_price | money }}
                {% endif %}
              </span>
            </span>
            <span id="ComparePriceA11y" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% else %}
            <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          {% endif %}

          <span id="ProductPrice" class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
            {{ current_variant.price | money }}
          </span>
      </div>
    </div>

I added this right below the opening grid div, that is right underneath this code:

<div class="grid product-single">

From there, we need to make sure that our regular price and title don't show for mobile. To do that add a class of "small--hide" to your price and title. You want to find these bits of code (not in the bit you just added mind!): 

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

and 

<span class="product-single__price--wrapper">

and

<span id="ProductPrice" class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">

Then, edit those three lines of code by adding in a class of "small--hide" like so:

<h1 class="product-single__title small--hide" itemprop="name">{{ product.title }}</h1>

and 

<span class="product-single__price--wrapper small--hide">

and

<span id="ProductPrice" class="small--hide product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">

Lastly, we need to add some margin to the bottom of our first code addition so that the product images dont overlap the price information. I added this to the bottom of theme.scss.liquid and it worked well:

#mobile-price {
  margin-bottom: 45px;
}

That should get you set! Make sure you back up your theme by duplicating it before making any code changes though.

I hope that helps!

-Britton

Britton Shopify Guru
0 Likes
Excursionist
46 0 4

Thank you so much Britton!

A minor question I hope you can help with. I also want to add the yotpo star rating beneath the title and price. When I do that, it sits on the same line as the price. I want it beneath and centered (like on desktop).

I have added this code 

<span> <div class="yotpo bottomLine"
data-product-id="{{ product.id }}">
</div>
<style>.yotpo a.text-m, div.yotpo.bottomLine { display: inline-block; }</style>
                
               </span> 

And added it inside the code you provided and beneath 

<span id="ProductPrice" class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
            {{ current_variant.price | money }}
          </span>

And this is what it look like... 

 

I want it to look the same as desktop...

 

Again, thank you so much !

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Philip,

your images appear to me as broken links but I think I get what you mean from your description. The culprit is probably this from your yotpo code:

<style>.yotpo a.text-m, div.yotpo.bottomLine { display: inline-block; }</style>

That style information basically forces it to stay on the same line. I would delete that and see if it helps.

-Britton

Britton Shopify Guru
0 Likes
Tourist
37 0 3

Does this method apply to all themes, or Brooklyn only? I'm trying to do the same with Minimal.

https://ecommerce.shopify.com/c/ecommerce-design/t/movie-product-title-price-add-to-cart-above-image...

0 Likes
Tourist
37 0 3

??

0 Likes
Tourist
3 0 0

I would like to know if this can be done in the Debut Theme as well?????

If not, can you give me the correct code to do so?

Thank you!! =)

0 Likes
New Member
6 0 0

I have pasted  that big line of code right beneath that opening div you said, but it didnt work for me, any chance you could help me out?

0 Likes