Re: Product page layout help! (Description & Reviews)

Solved

Product page layout help! (Description & Reviews)

orby
Tourist
18 0 2

Hi, I have 2 issues with my product pages on my store and need some help!

 

1. On desktop view, the product description is tucked on the right side of the page. I want it to be in the middle of the page instead so it’s wider and easier to read.

IMG_1881.jpeg


2. My reviews are working great, I just need help because the reviews are so stretched out from page to page on mobile and desktop view, I want to make it less wide and not touch the sides of the page.

IMG_1882.jpeg

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8536 1683 1692

This is an accepted solution.

Hi @orby 

You can PM your store URL so I can check and give you the solution. 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)
orby
Tourist
18 0 2

Can I PM you?

Made4uo-Ribe
Shopify Partner
6961 1656 2041

Hi @orby 

Would you mind to share your store URL? And also the reviews is an app? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Dan-From-Ryviu
Shopify Partner
8536 1683 1692

This is an accepted solution.

Hi @orby 

You can PM your store URL so I can check and give you the solution. 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Made4uo-Ribe
Shopify Partner
6961 1656 2041

Thanks for the info, check this one. 

1. Go to customize > Product > 

Made4uoRibe_0-1718317129908.png

Add Section > Find Custom-Liquid add on it. 

When you click the Custom-Liquid on the right there will be tab opens. 

Made4uoRibe_1-1718317286164.png

Paste this code below same on the image above. 

 

<div class="page-width">
{{ product.description }}
</div>

 

And save. 

Result: 

Made4uoRibe_2-1718317342227.png

You can drag the custom-liquid so it will next to the product. 

2. This is an app. Try if this code works. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (min-width: 992px){
.jdgm-widget:not(.jdgm-review-widget--small,.jdgm-review-widget--medium) .jdgm-rev-widg__summary {
        width: 15%;
    }
.jdgm-widget:not(.jdgm-review-widget--small,.jdgm-review-widget--medium) :not(.jdgm-histogram-wrapper)>.jdgm-histogram {
    width: 20%;
}
.jdgm-widget:not(.jdgm-review-widget--small,.jdgm-review-widget--medium) :not(.jdgm-revs-tab__content-header)>.jdgm-widget-actions-wrapper {
    width:15%;
}
}

 

And Save. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
orby
Tourist
18 0 2

Screenshot 2024-06-13 at 6.28.18 PM.png

 I can not figure out where "Add Section > Find Custom-Liquid add on it. " is. I am on the product page and see this: 

Screenshot 2024-06-13 at 6.28.52 PM.png

orby
Tourist
18 0 2

The judge.me review code didn't work either. In assets, I have these 3:  

Screenshot 2024-06-13 at 9.44.29 PM.png

which one do i paste it in?

Brian-Judgeme1
Visitor
1 0 0

Hi there,

 

I'm Brian from Judge.me Support.

 

To help you address the issue, could you please provide your store URL? This will allow us to assist you more effectively.

 

Please reach out to us at support@judge.me!

 

Regards,