Jump to content

Change aspect ratio of product by category?

Recommended Posts

Posted

Currently editing my 7.0 site with the Jones preview template, so its not live yet.
I have two products I'm selling, posters and stickers, and I enjoy the look of the selected aspect ratio for one, but would very much like to alter the look of the "stickers" category. I realize this may mean I need to target individual product item slides in the css, just didn't know if there was a way to target tagged categories? If not that's fine too. 

  • Replies 12
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...
Posted

I'm having the same issue! I have a site with images in different categories, and the aspect ratio effects all the images. When I want to use different aspect ratio's for each category. EG. Portrait and landscape

  • 1 month later...
Posted

This has been the biggest issue for me, as well! I'm currently in a 2 week trial and setting up a demo site for a photographer. The widescreen aspect ratio is great for a horizontal 10x20 photo but terrible for a vertical 8x12...seems odd that the same ratio has to apply to all categories. I won't be surprised if this ends up being a deal-breaker for my photographer.

  • 2 months later...
Posted
On 12/12/2020 at 12:06 AM, bregvz said:

Hi! I have same issue, I need another aspect ratio (3:2 Standard) on this category https://www.ak-workshop.dk/shop-akworkshop/opslagstavler   password: ak2020 

Is it possible to change that??

Thank you very much!

Add to Above category page settings > Advanced > Header

<style>
  .grid-image-wrapper.has-hover-img {
    padding-bottom: 66.667% !important;
}
</style>

 

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!)

  • 1 month later...
Posted

Thank you @tuanphan for your time! it works but changes all the other categories (even when I added the code in to the Page Header Code Injection of the category)  any other solution?

Posted
10 hours ago, bregvz said:

Thank you @tuanphan for your time! it works but changes all the other categories (even when I added the code in to the Page Header Code Injection of the category)  any other solution?

Your site is private...

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!)

Posted
On 1/25/2021 at 2:26 AM, bregvz said:

I'm sorry www.ak-workshop.dk

password: ak2021

Try adding this to Design > Custom CSS

body#collection-5f758d461158a96d1ace20d5 .grid-image-wrapper.has-hover-img {
    padding-bottom: 66.667% !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!)

  • 2 years later...
Posted (edited)
On 8/25/2020 at 3:25 PM, AdeleThomas0 said:

I'm having the same issue! I have a site with images in different categories, and the aspect ratio effects all the images. When I want to use different aspect ratio's for each category. EG. Portrait and landscape

Has anyone been able to figure this out? I am having the same issue.

Edited by jeffli
Posted

If you need to show landscape and portrait product images on Squarespace 7.1, please see my guide:

Product image aspect ratios on Squarespace 7.1

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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.