[IMPULSE THEME] Change product title and review stars place

Shopify Discussion
1

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
title.png2040×1392 322 KB

Thank you

2

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;
# {{ product.title }}

then you can edit it to

# {{ product.title }}
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.
# {{ product.title }}
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

3

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
made4Uo_0-1686242473678.png802×921 143 KB

1 Like
4

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

1 Like
5

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

How can i do it?