Big Cartel Theme Support

How do I show, hide and add effects to the product thumbnail text?

How do I show, hide and add effects to the product thumbnail text?

All of the following instructions involve adding CSS to your custom style coding area. For details on how to navigate to and use this area, refer to Where do I add custom style code?

Don’t forget to click the Done and Save links to apply your changes.

Hiding the product thumbnail text

To hide all product thumbnail text, add the following CSS to your custom style coding area:

/* Hide thumbnail text */
.product.tile .detail-wrap {
	display: none;
}

To hide only the price in the product thumbnail text, add the following CSS to your custom style coding area:

/* Hide thumbnail price */
.product.tile .detail-wrap .price-wrap {
	display: none;
}

To hide only the product name in the product thumbnail text, add the following CSS to your custom style coding area:

/* Hide thumbnail name */
.product.tile .detail-wrap .name-wrap {
	display: none;
}

Displaying (unhiding) the product thumbnail text

If your product thumbnail text is already hidden and you wish to display it, first check the following:

  1. If you hid the text using the methods in the previous section of this article, find the relevant CSS you added and delete it from your custom style coding area.
  2. If the text is hidden by default for your theme, check for theme-specific CSS — see The theme-specific custom styles — that hides the text and, if found, delete it from your custom style coding area.

If neither of the above items applies, your thumbnail text is most likely hidden via core theme CSS. You can override this by adding the following CSS to your custom style coding area:

/* Show thumbnail text */
.product.tile .detail-wrap {
	display: block;
}

Note the similarity of this code to the previous code for hiding all of the thumbnail text. If only the thumbnail price or name is hidden on your theme, we can take the relevant code from above in the same way and change the display: none; to display: block;. For example, to force the thumbnail price to display we would use:

/* Show thumbnail price */
.product.tile .detail-wrap .price-wrap {
	display: block;
}

For details on displaying the price for sold and coming soon products, refer to How do I display the price for sold and coming soon products?

Display thumbnail text on mouseover / hover

If your theme already has this hover effect enabled, you can still copy the optional styles from the CSS below to apply additional styling. Do not copy the required styles in this case.

To to display the product thumbnail text when the viewer places their cursor over the thumbnail, add the following CSS to your custom style coding area:

/* - - - - Begin Thumbnail Text Hover Effect */


/* 1 - Required: Reposition text and set opacity to 0 */
.product.tile > .inner {
	position: relative;
}
.product.tile .detail-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 30px 12px 0;
	margin: 0;
	opacity: 0;
}

/* 2 - Required: Set opacity to 1 on hover */
.product.tile > .inner:hover .detail-wrap {
	opacity: 1;
}

/* 3 - Required: Hide text on mobile to allow single click to product */
.mobile-ui-on .product.tile .detail-wrap {
	display: none;
}

/* 4 - Required: Set text align and background colour */
.product.tile .detail-wrap {
	text-align: center;
	background-color: {{ very_subtle_borders }};
}

/* 5 - Optional: Enable fade in effect */
.product.tile .detail-wrap {
	-webkit-transition: opacity 0.15s linear;
	transition: opacity 0.15s linear;
}

/* 6 - Optional: Enable text motion effect */
.product.tile .detail-wrap > * {
	position: relative;
	top: 20px;
	-webkit-transition: top 0.3s ease-out;
	transition: top 0.3s ease-out;
}
.product.tile > .inner:hover .detail-wrap > * {
	top: 0;
}

/* 7 - Optional: Add little divider after price */
.product.tile .detail-wrap .label-wrap:before {
	content: "";
	display: block;
	width: 20px;
	margin: 5px auto 5px;
	border-bottom: 1px solid {{ product_price }};
}

/* 8 - Optional: Position text in vertical center */
.product.tile .detail-wrap {
	padding-top: 0;
}
.product.tile .detail-wrap:before {
	content: " ";
	display: block;
	height: 50%;
	margin-bottom: -40px;
}

/* 9 - Optional: Display text in normal position on mobile devices */
.mobile-ui-on .product.tile .detail-wrap {
	display: block;
	padding: 0;
	margin-top: 10px;
	opacity: 1;
	text-align: left;
	background-color: transparent;
}
.mobile-ui-on .product.tile .detail-wrap,
.mobile-ui-on .product.tile .detail-wrap > * {
	position: static;
}
.mobile-ui-on .product.tile .detail-wrap:before,
.mobile-ui-on .product.tile .detail-wrap .label-wrap:before {
	content: none;
}


/* - - - - End Thumbnail Text Hover Effect */

The sections of CSS labelled “Optional” can be removed to suit your preferences. Additionally, some of the CSS properties can be changed if desired. For example:

  • The text-align property in item 2 could be set to left or right
  • The background-color property in item 2 is set to automatically use the very subtle border colour from your theme settings. Instead a standard colour value could be used here — see CSS-colour tutorial — for example: rgba(215, 44, 44, 0.6)
  • The divider width value in item 7 could be changed to another pixel value. For example: 55px
  • The margin-bottom value in item 8 could be adjusted to fine tune the vertical position of the text. Negative values move the text upwards. For example, to move the text further down we could set the value to -25px Positive values are also allowed.

Refer to the CSS tutorial for more information on editing custom CSS.

AarcadeHow do I show, hide and add effects to the product thumbnail text?