How would I make the images larger on order forms?

  • annafenton
    Asked on May 27, 2016 at 1:43 PM

    Hi,

    How do I make my images larger on this order form?

    Perhaps the images could be to the side of the order fields.

    Thank you!!

  • Ben
    Replied on May 27, 2016 at 2:36 PM

    You could set the images by using a CSS such as this one:

    .form-product-image, .form-product-image-with-options {
        width: 150px;
    }

    You can of course change the 150 to any other number to match your preferred size.

    I would only recommend 2 things with images:

    1. add smaller ones. Adding images of over 1000px in width will only cause your form to load longer, especially if you are not showing the images in the same sizes

    2. find the size that works best for you and add all images in the same or similar size, so that you can use the CSS (like the one above) that would show them either in their original size or in the size lower than its original - if browsers need to resize your images down, the images look good, however if they resize them upwards, they could end up slightly blurred.

    What I mean is that if you will be showing your images in 150px width, I would recommend adding images with 200px width to your form. That way they will load faster and they would be nicely shown on your form.

    Do of course let us know if you have any questions or issues and to add the CSS to your form, simply follow the steps described here: Inject Custom CSS Codes