Big Cartel Theme Support

Using the article tag to create product specific custom styles

Using the article tag to create product specific custom styles

Editing your theme CSS file (as detailed in this article) is not the preferred method for changing your theme style.

Instead, wherever possible, use the tools provided at your Aarcade admin area per How do I edit my theme's styles and options?

Aarcade themes use an article tag..

<article>

..product images and details..

</article>

..to wrap product thumbnails on the products pages and to wrap the main page content on the product page.

These article tags are assigned a number of classes and a unique id for each product.

For example, our Antler theme preview has a product named Pull&Bear Flared Sweater listed in the home page thumbnails. If we inspect this thumbnail - using our web browser developer tool as explained in the HTML & CSS tutorials for non-web designers - and locate the article tag, we will see the following:

<article id="pullbear-flared-sweater" class="tile product category-women category-women-sweaters total-count-2 count-2 portrait one-image" style="width:25.000%">

If we click the thumbnail to navigate to the Pull&Bear Flared Sweater product page, then use our web browser tool to inspect the article tag that wraps the content there, we will see the following:

<article id="pullbear-flared-sweater" class="single product category-women category-women-sweaters zoom-type-loupe">

We note that the article tag has a unique id pullbear-flared-sweater. This allows us to create product specific styles that will be applied to thumbnails and the product page.

Product specific styles

Let’s say we wanted to label the Pull&Bear Flared Sweater product with the text “Only a few left in stock!”. We could do this using the unique id pullbear-flared-sweater in our custom CSS — added in the custom style coding per Where do I add custom style code? — as follows:

article#pullbear-flared-sweater .label-wrap > .tag {
	display: block;
	padding-top: 10px;
	color: #cc0000;
	font-weight: bold;
}
article#pullbear-flared-sweater .label-wrap > .tag span:before {
	content: "Only a few left in stock!";
}

Thumbnail vs product page

Continuing our example, we note that the article tags include the .tile class for thumbnails and the .single class for the product page.

Let’s say we wanted the “Only a few left in stock!” text on the product page only. We would do this by adding the .single to our element selector as follows:

article#pullbear-flared-sweater.single .label-wrap > .tag {
	display: block;
	padding-top: 10px;
	color: #cc0000;
	font-weight: bold;
}
article#pullbear-flared-sweater.single .label-wrap > .tag span:before {
	content: "Only a few left in stock!";
}

Category specific style

Continuing our example, we note that the article tags include category classes like .category-women-sweaters that allow us to create category specific styles.

Let’s say we wanted all of the products in the subcategory Women - Sweaters to have thumbnails bordered with a thick solid black line. We would do this with the following custom CSS:

article.category-women-sweaters.tile > .inner {
	border: 3px solid #000000;
}

Note the use of the .tile class to limit our style to the thumbnails only.

Status and format targeting

The article tags include additional classes relating to the status and format of the product. For example, if a product is on sale the article tag will have the class .sale. If a product thumbnail is higher than it is wide, the article tag will have the class .portrait.

These classes can be used to target products with a specific status or format.

Custom style targeting

If you wish to create a custom group of products to target for a particular style, a x-a category is perfect for this - see Extended category controls. This has the added advantage of allowing you to apply and remove your specific styles to any product by simply adding or removing that product from the x-a category.

For example, let’s say we had a group of products for which we want the product titles to be all uppercase. First we create a new x-a category specifically for these products, we’ll call it..

x-a Uppercase Titles

..and then we add all of the relevant products to this new category.

Next, we use the same method detailed in the previous section Category specific style to target our x-a Uppercase Titles products. Note that the x-a prefix is removed from the class, so the correct CSS is:

article.category-uppercase-titles h1.name-wrap {
	text-transform: uppercase;
}

Once we create and save this custom CSS, we can have any product display all uppercase titles by adding it to our product category x-a Uppercase Titles, or revert any product to standard case by removing it from this category.

Custom CSS

Use your web inspector tool, built into your web browser, to find the appropriate id or class to use for your own custom CSS. Don’t forget to save after making changes.

For more information on creating custom CSS, refer to How do I create custom style code?

AarcadeUsing the article tag to create product specific custom styles