Solved

[IMPULSE THEME] Change product title and review stars place

RaphGO
Excursionist
13 0 5

Hi ! My store is ed4ee3.myshopify.com

 

When I'm on a product page, the title is not on top of the page. I would like it to be on the very top, followed by  the review stars. I did some research but couldn't find anything for impulse theme. 
title.png
Thank you 

Accepted Solution (1)

made4Uo
Shopify Partner
3805 713 1128

This is an accepted solution.

Hi @RaphGO 

 

I am assuming you just want this design for mobile only. If so, you can use the less complicated instructions below

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media only screen and (max-width: 750px){
.grid {
    position: relative;
    padding-top: 7rem;
}
    
.product-block.product-block--header {
    position: absolute;
    top: 1rem;
    text-align: center;
    width: 100%;
}

.jdgm-widget.jdgm-preview-badge.jdgm-preview-badge--with-link {
    position: absolute;
    top: 4rem;
    text-align: center;
    width: 100%;
}
}

 

Result here

made4Uo_0-1686242473678.png

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 4 (4)

PageFly-Oliver
Astronaut
840 176 156

Hi @RaphGO

 

To move the title of your product above the images for mobile devices on product pages in your Shopify store using the Sense theme, you will need to modify the theme's code. Please note that making changes to your theme's code requires some technical knowledge, and it's always recommended to create a backup of your theme before making any changes.

 

Here's a general guide to help you achieve this:

  1. From your Shopify admin, go to "Online Store" and select "Themes."
  2. Locate the Sense theme and click on "Actions" > "Edit Code."
  3. In the code editor, find the file called product-template. liquid or product. liquid. This file controls the layout of the product pages.
  4. Look for the code that displays the product title. It may look something like this;

 

 

 

 

 

 

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

 

 

 

then you can edit it to
 

 

 

 

 

<h1 id="dektopProductTitle"  class="product-title">{{ product.title }}</h1>
then you can edit it to

 

 

 

 

  1. To move the title above the images, copy the code below and paste it before the code that renders the product images.

 

 

 

 

<h1 id="mobileProductTitle"  class="product-title">{{ product.title }}</h1>
then you can edit it to

 

 

 

 Go to Online Store->Theme->Edit code.

Search file base.css

Paste the below code at the bottom of this file ⇒ save

 

 

 

 

@media(min-width:767px){
#dektopProductTitle{
display:block;
}
#mobileProductTitle{
display:none;
}
}
@media(max-width:767px){
#dektopProductTitle{
display:none;
}
#mobileProductTitle{
display:block;
}
}

 

 

 



 

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

made4Uo
Shopify Partner
3805 713 1128

This is an accepted solution.

Hi @RaphGO 

 

I am assuming you just want this design for mobile only. If so, you can use the less complicated instructions below

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media only screen and (max-width: 750px){
.grid {
    position: relative;
    padding-top: 7rem;
}
    
.product-block.product-block--header {
    position: absolute;
    top: 1rem;
    text-align: center;
    width: 100%;
}

.jdgm-widget.jdgm-preview-badge.jdgm-preview-badge--with-link {
    position: absolute;
    top: 4rem;
    text-align: center;
    width: 100%;
}
}

 

Result here

made4Uo_0-1686242473678.png

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
RaphGO
Excursionist
13 0 5

WOW top notch solution ! Worked like a charm 🙂
A Huge thank you Made4Uo.

massimoce
Tourist
6 0 1

I want to do the same thing but only for desktop.

How can i do it?