Increase image size, remove shadow on box + add text below product price

This topic has 10 replies, 2 voices, and was last updated 8 years, 9 months ago ago by Jack Richardson

  • Avatar: netmined
    netmined
    Member
    March 22, 2016 at 08:24

    Hello,

    Could you please advise how to remove the shadow effect on the box (container) layout view and to increase the size of the product pictures on the listing pages – on the category and all other pages where multiple products are listed together?

    I know that the width of the image is somewhat restricted by the overall size of the container but right now there are still large gaps in between the individual product images when they appear side by side and these gaps could be reduced. Could you please advise how to increase the width and length of the images on those pages?

    I also need to add specific text to appear below the price on every individual product page – is there a way to be able to do this?

    Many thanks in advance for your assistance

    9 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 22, 2016 at 08:57

    Hello,

    To remove box shadow add this code in custom.css file:

    .wrapper-boxed .containerInner {
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    If you change images sizes via css your pictures may be distorted, try to use this code and check:

    #products-grid.products_grid .product-grid img {
       width: 300px !important;
    }

    Unfortunately there is no option to add text under price. You have to edit source files or search for some plugin.

    Best regards,
    Jack Richardson.

    Avatar: netmined
    netmined
    Member
    March 22, 2016 at 13:05

    Many thanks Jack.

    If the height is adjusted proportionally as well as the width, would that stop the distortion?

    What would be the code to adjust both? Do you know what the height and width are currently set to?

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 22, 2016 at 15:44

    Hello,

    Please try to use this css code:

    #products-grid.products_grid .product-grid {
       height: 400px;
    }
    #products-grid .product-image {
        height: 320px;
    }
    #products-grid.products_grid .product-grid img {
        width: 300px;
        height: 300px !important;
    }
    .product-image .img-wrapper {
        height: 320px;
    }
    #products-grid.products_grid .product-grid .product-image:hover {
        height: 320px !important;
    }

    Best regards,
    Jack Richardson.

    Avatar: netmined
    netmined
    Member
    March 23, 2016 at 07:31

    Hi Jack,

    Many thanks for that. I tried the second lot of code you sent. Some images distorted, others were fine but almost all were elongated. What are the Blanco resolution settings for those product image boxes?

    In the code you gave me above, you seemed to have the image dimensions as 320px high x 300px wide.
    Can you give me the default Blanco theme dimension sizes, I’ll try to see if I can make the increase proportional to those.

    Thanks again

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 23, 2016 at 08:44

    Hello,

    The default sizes are 220px * 220px. I just gave you custom size value. You can change it to any you wish.

    Best regards,
    Jack Richardson.

    Avatar: netmined
    netmined
    Member
    March 23, 2016 at 10:00

    Many thanks for that. Do you know if Blanco has a separate default or minimum resolution setting for the pictures? I noticed that regardless of size, some stayed sharp while others blurred.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 23, 2016 at 11:05

    Hello,

    All your original images should have similar sizes. Try to change them in photoshop and reupload the images for your products.

    Best regards,
    Jack Richardson.

    Avatar: netmined
    netmined
    Member
    March 23, 2016 at 11:46

    Hi Jack,

    That bit I’m ok with just want to check before I adjust the images what the resolution settings for the theme are. In some themes these are different to the image box dimensions.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 24, 2016 at 15:26

    Hello,

    There are no special resolution settings for the theme.
    On our demo we used images with original sizes 1,500px × 1,500px.

    Best regards,
    Jack Richardson.

  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.