Jump to content

Change aspect ratio of product by category?

Recommended Posts

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. 

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...
  • 1 month later...

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.

Link to comment
  • 2 months later...
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!)

Link to comment
  • 1 month later...
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!)

Link to comment
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!)

Link to comment
  • 2 years later...
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
Link to comment

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  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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.