As of 28th May 2016, only the most current version of Aarcade themes will receive personal support and updates – read more…

  Back to Top

How do I edit the alignment of my product grid images and text?

Filed in Advanced Customisation

Note that advanced customisation support articles are provided as a courtesy to Aarcade and Big Cartel users. Aarcade does not provide support for advanced customisation. Please read the following related articles:

To adjust the alignment of the product images and text on product listing / thumbnail grid pages, pasting the following style group into the style coding area – ref. Where do I add custom style coding in my Big Cartel theme controls? – will work for most Aarcade themes.

/* - - - - Set alignment of product thumbnail text
text-alignment value can be left, center or right */
.shop_thumb_details,
.shop_thumb_title,
.shop_thumb_price,
.shop_thumb_img_holder {
	text-align: center;
	}

Note that the above will have no affect on your images if they are square or landscape dimensions or if your image size is set to “portrait” – see How do I change my Product image size and number of columns?

If your image alignment is not affected, and you believe it should be, you may need to add further styling to set your image margins as follows:

/* - - - - Set alignment of product thumbnail image */
.shop_thumb .product_img {
	margin-left: auto !important; /* change auto to 0 for left aligment */
	margin-right:  auto !important; /* change auto to 0 for right aligment */
	}

Explanation

.shop_thumb_details,
.shop_thumb_title,
.shop_thumb_price,
.shop_thumb_img_holder {
	text-align: center;
	}

Here we have simply identified the relevant elements – using the methods detailed in How do I create custom override styles? – that contain the product thumbnail text and applied the text alignment value we desire. See w3schools > text-align for more information.

.shop_thumb .product_img {
	margin-left: auto !important; /* change auto to 0 for left aligment */
	margin-right:  auto !important; /* change auto to 0 for right aligment */
	}

Here we ensure that we are overriding any default margin settings applied to the product thumbnail images that may be preventing the desired alignment from taking effect. See w3schools > margin-left for more information.

Related articles...