Announcement

Collapse
No announcement yet.

Product Design Page - Image pIxelation

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Product Design Page - Image pIxelation

    First product I added to the software is just a picture of a ticket. On the product detail page the image is massive and taking up the entire page and very pixelized. I just want the layout to have a small photo on that page. Do I have to modify the php template to fix that? Is it a CSS issue? Is it a page layout issue in WP Admin? How can I get it to look good?

    https://wildernessclubmontana.com/st...on-golf-passes

  • #2
    The product details page is designed to be a 2 column layout, half image, half the product details... It will use whatever your theme sets up for a content area, so if it's wide, it will use 1/2 of that area for the image and 1/2 for the details... this makes it consistent... You may want to edit your image and perhaps add whitespace to it, or add a variety of techniques to make it workable in that area.

    thanks

    Comment


    • #3
      If you load a 1000 x 1000 image, it is automatically reduced to a maximum of 512 X 512. Shopify's own recommendations are 1024 x 1024 at 72 dpi (dots per inch resolution). While this is the recommendation, the platform does support product images up to 2048 x 2048. Magento recommends three different image sizes.

      Comment


      • #4
        With EasyCart, we recommend 800x800 or 1000x800 or so in images... They just need to be large enough that they are clear. Our images are inserted through the media library, so they can really be any size and even oversized which can slow things down... so we recommend resizing and getting down into that 800 or 1000 size range for best quality.

        The problem is if you get too small, say 500 or 400 pixels in size, they can become pixelated as the image needs to take about half the content area and zoomability often. Depending on themes, that content area may be large, or it may be small, but it will usually use half that size... so we error on the side of larger for clarity and better looks.

        Comment

        Working...
        X