Jump to content
Sign in to follow this  
vonsommerfeldt

Jigoshop Product Thumbnail Resizing

Recommended Posts

vonsommerfeldt

So I've poured over any information I can find concerning making the product thumbnails in jigoshop larger.

 

I've changed the settings in Jigoshop

I've changed the settings in the Dashboard media section

I've regenerated all my thumbnails

 

..and nothing. They're still 150x150

 

Everything I've found online to help with this subject has not done a thing for me. PLEASE HELP 150x150 is just too tiny! 

Share this post


Link to post
Share on other sites
James B

I've just had a go using the instructions on that previous thread and it's worked.

 

From - http://screencast.com/t/4eziA1J37ev to http://screencast.com/t/DS7dMwvH

 

If that's not working try inserting the following css.

 

 

ul.products li a img {

    max-width: none !important;

}

.products li a img {
    display: block;
    height: 300px !important;
    margin: 0 0 8px !important;
    width: 300px !important;
}
 

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
vonsommerfeldt

So interestingly enough, last night before you answered, I tried inputing this code in the Pagelines CSS 

 

.products li {width: 300px !important;height: 300px !important;}

 

That widened the images, but didn't effect their height. So I hoped in to the frontend css of Jigoshop and edited the height there. Those two combined worked. Any idea why? And is your code a superior way of doing this?

Share this post


Link to post
Share on other sites
vonsommerfeldt

NVM the code you suggested didn't work. It made them bigger, and then stacked them on top of each other overlapping 

Share this post


Link to post
Share on other sites
James B

You've managed to get this working now on the code you've added? Using css you'll be able to edit the size of the images set in jigshop, there's no superior code, its just finding the correct selector that gives the result you want on the page.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
vonsommerfeldt

Yeah it was weird, the code you supplied made them wider but overlapped them. I had to use a mix of suggestions to get it to work, and then someone from Jigoshop supplied me with this:

Subject: Cannot change Catalog Image size

/* enlarge catalog images */
.products li a img {width:312px !important; height:auto !important;}
.products li {
    width:30% !important; 
    margin-right:1.6% !important;
    margin-left:1.6%; !important;
}


/* smaller related products images */
.type-product .related .products li a img {width:150px !important; height:auto !important;}
.type-product .related .products li {
    width:20% !important; 
    margin-right:2% !important; 
    margin-left:3% !important;
}

 

 

 

 

Plug that in to the custom code part of Pagelines and it works like a charm!

Share this post


Link to post
Share on other sites
James B

Ah brilliant, glad you got it working.

 

Thank you for posting that code, that will definitely help others in future with Jigoshop :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×