Having problems with the product page (Debut)

Solved
Highlighted

Hi guys,

I have two problems with my product page.

1) the main picture is not aligned left as the thumbnails are

2) the thumbnails open in a separate window when you click on it

I'd be so happy to find a solution for these issues.

Thank you in advance!

Best, Brian

 

Website: www.soholost.de

PW: gangmember

0 Likes
Highlighted
Astronaut
1083 178 213

Hello,

Both of these problems come from an issue with your Javascript code. 

You have pasted a CSS code into your Javascript which is causing this.

1. In your theme.js file, find and remove this code circled in red:

dantepw_0-1596503333607.png


It is located at the very bottom of the file.
This ought to solve your problem. Kindly let me know whether it works.

Regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted

Hi Diego,

thank you for your quick help.

I removed the section you've mentioned. The script works now but the change causes two new problems.

https://soholost.de/collections/seasion-i/products/college-t-shirt-splash-pre-order

-> The main picture isn't aligned to the left, looks kind of strange right here: 

Problem 1.jpg

Second problem is on the first page https://soholost.de.

-> The product text isn't aligned to the center of the picture or to the left corner of the picture. Before I removed the code you told me there was a white box around the picture what was looking a bit better.

Problem 2.jpg

 

I would be so thankful if you could help me with this two issues again.

Best regards, Brian

0 Likes
Highlighted

This is an accepted solution.

Hi @soholoststudio,

Just try this code:

.grid__item--collection .grid-view-item {
text-align: center;
}
.grid__item--collection .grid-view-item .price.price--listing {
align-items: center;
}

 It's supposed to fix the problem on the homepage. 

You just need to paste the code into the theme.scss.liquid file.

I hope this helps.

Footnote: Anatomy of a good product page.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
1 Like
Highlighted

Hey @QuangN,

great! exactly what I wanted for my main page. thank you so much!

do you have another code for me to make it just look the same in the section down low called "upcoming next"?

thank you!!!

0 Likes
Highlighted

can you help me again :)?

0 Likes
Highlighted

This is an accepted solution.

Hi @soholoststudio,

Yes, here's the code:

 

 

.grid-view-item {
text-align: center;
}
.grid-view-item .price.price--listing {
align-items: center;
}

 

 

If it works, please like and mark it as a solution  :"D

 

Footnote: The Definitive Guide To Dropshipping Success (Always-Updated).

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
1 Like
Highlighted

Hi @QuangN,

you are great! Thank you so much :-).

I marked your answers as a solution and liked it!

Do you maybe have another solution for my last problem with the product page?

Problem 1.jpg

Thank youuuuuu.

Best, Brian

0 Likes
Highlighted

You are welcome, Brian!

You can try this code to fix the product images problem: (Paste it into theme.scss.liquid file)

.product-single__media-wrapper { margin: 0 !important; }

 

Btw, you should add 1-2 more images of the fabric material so that people know how the shirt will feel like. You can read this article about the types of product images to include in product pages.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
0 Likes