Jump to content

Why can I see all of my product images stacked on top of each other on my product page?

Recommended Posts

I've been adding product photos to my shop and each photo added appears behind the previous image in the product gallery. I'm using png since that are already added to my site for other uses, do I have to upload separate images with a white background for use in the shop? I'd really rather not have to create, save, and add two versions of each product photo for my entire inventory.

image.png

Screen Shot 2024-02-29 at 1.50.09 PM.png

Link to comment
4 hours ago, yooper906 said:

I've been adding product photos to my shop and each photo added appears behind the previous image in the product gallery. I'm using png since that are already added to my site for other uses, do I have to upload separate images with a white background for use in the shop? I'd really rather not have to create, save, and add two versions of each product photo for my entire inventory.

image.png

Screen Shot 2024-02-29 at 1.50.09 PM.png

we can use some css tweaks to add a white background to each slide, could you share the site url?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

I just ended up doing jpeg versions of everything.

Though I am now having an issue where I can't change the font for the product prices on the product pages. It doesn't respond to any changes in the theme and no CSS I've tried has worked either. I added custom css to change the font for product page headings, so I assume it somehow is messing with the price below it, but I can't figure out how. 

Link to comment
On 3/7/2024 at 7:13 AM, yooper906 said:

The site isn't public yet.

https://www.yooperlife.net/
pw: Yooperl1f3

If you can't change product price size on Site Styles, use this code to Website > Website Tools > Custom CSS

/* product price */
.product-price {
    font-size: 30px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
9 hours ago, yooper906 said:

@tuanphan that worked, but it changed the price size on all the image blocks on the page as well. Is there something I can add so it only effects the pricing on the item-view/product page? Thanks!

Use this new code

/* product price */
body.view-item .product-price {
    font-size: 30px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.