Meeeee

I love answering my own questions by finding bits of CSS code and tying them together.  Especially when it works (it mostly doesn't!) Either way it's good way to spend quarantime.  This seems to be right @tuanphan, is it though?! 🙂

@media screen and (max-width:767px) {.ProductItem-relatedProducts .list-grid 
{grid-template-columns: repeat(2,minmax(0,2fr)) !important;
    display: grid;
    grid-column-gap:3px;
    grid-row-gap: 1px;
}
}

thanks alot! @tuanphan can you help me format so on mobile the view is 2 across?

@tuanphan can you help with mine then, the OP?! 😉I've been looking at ways to change the relateditems grid, but it's not doing anything except making it smaller, while keeping the same number.  On desktop I prefer just want 2 related items only....and on mobile 4 related, but in columns of 2 if vertical/portrait display or 4 across in landscape.

https://www.jalley.art/sstest l

thanks!

No, it doesn't.  I guess no one ever thought that having this option would be useful in design.  There must be a css way around this insanity!

Yeah I'm looking for 7.1, which -- yeah -- doesn't have this styles page.

Hi All, 

I'm looking to see how I can show just 3 related items on a product page, not all of them.

I've looked through the guides, forums and can't find the answer which seems to be a no-brainer.   I feel like I've even seen it before, but not here: https://support.squarespace.com/hc/en-us/articles/360033322792

Thanks,
J

@paul2009 would your wish list work alongside the cart?  I didn't get that sense in the samples..thanks!

I'm actually also shocked it's not within SS's native commerce settings world (for mid-enterprise customers especially!)  Shopify does this really well, clean and gives lots of options in the backend to get data and lists.  

https://apps.shopify.com/i-wishlist

https://wishlist-demo-shopapps.myshopify.com/collections/frontpage/products/boatneck-open-back-dress-in-cream

Did anyone find a solution to this search icon feature?  plugin maybe?  It's pretty important, and I can't believe that mid-enterprise sort of ecommerce companies wouldn't have it.  And frankly it's pretty standard across every other single website.  

I wanted to continue to update this as it seems I'm not the only one with this issue.  I came across the "auto" aspect ratio in 7.1 when doing a product summary block, which is fantastic.  I'm not sure why it can't be included in default options, because when you then click on the image itself, it has the default setting, which looks not great.  

sorry for so many followups, but the only downside is that in mobile it doesn't look great and is bit off center.  

Okay -- so when I changed the height to width, that actually seems to help my cause.  Not perfect, but pretty close.  

.ProductItem-gallery-slides-item-image {
    width: auto !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}
.ProductItem-gallery-slides-item.selected.going-next.loaded {
    padding-bottom: 50% !important;
}

@tuanphan not sure it works -- see site.  It still crops at the bottom of the 4:3 image to 3:2 size.  Granted in design setting it does show the aspect ratio is 3:2. But if I set to 4:3 I have the opposite effect.  

thanks @tuanphan would this be for the product pages/tag link results?

@tuanphan jalley.art pw:testtest

Hi all, 

In Design -> Product Items -> Aspect Ratio it gives you just a single option.  The problem that I'm having is that some images on a website i'm building are (generally) either 4:3 or 3:2, shot natively on different cameras.  Is there a better way to address this so images maintain their original aspect ratio and don't follow this setting?

I found this post and some code:

.summary-thumbnail-image.loaded {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

.sqs-block-summary-v2 .img-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 0px !important;

But it doesn't affect product details page...see attached screenshots.  

Thanks for your help!
J