Product Image Rounded Corners - Simple Layout


1. Plugin Info

Add rounded corners to the product’s image gallery and thumbnails.

  • Works with Squarespace 7.1

  • Compatible with Simple Layout

  • Uses Custom CSS


2. Add this code to Custom CSS

// Product Image Rounded Corners (Simple Layout) - Ghost //

@product-img-radius: 10px;
@thumbnail-img-radius: 10px;

/* --- Do Not Edit Below ---- */

.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item, .tweak-product-basic-item-gallery-design-carousel .ProductItem-gallery-slides-item, .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-slides img { border-radius: @product-img-radius !important; } .ProductItem-gallery-thumbnails-item img { border-radius: @thumbnail-img-radius !important; }

// Product Image Rounded Corners (Simple Layout) - Ghost //

3. Customizable Options

  • Product Image Border Radius

  • Product Thumbnail Border Radius

The product’s image ratio and other styles can be change in Squarespace like normal.


4. Plugin Notes

  • Product page must be set to Simple Layout in design settings.

  • Applies to the Slideshow and Stacked gallery styles.


Previous
Previous

Invert Product Image Gallery Arrows

Next
Next

Gradient Read More Button - For Blog