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 style a standard price label added with an xd category?

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:

The article How do I display both my standard and sale price for on sale products? details how to use an xd category for displaying both a standard and sale price for a product. The following article expands on this method by providing examples of using advanced styling to customise the way these labels are displayed.

Advanced styling of standard and sale price labels

If we wanted to apply further styling to our labels, we could apply the methods detailed in the support article How do I create custom override styles? to define suitable CSS style groups that will allow us to do this.

Applying these methods we find that the following CSS code will work for most Aarcade themes. We add these style groups to our custom style coding area accordingly.

/* - - - - Products View Sale Label */
.shop_thumb.sale a span.marker.ps,
.shop_thumb.sale a span.product_status {
	
	}
/* - - - - Products View xd Label */
.shop_thumb a span.marker.ps.xd,
.shop_thumb a span.product_status.xd {	
	
	}

/* - - - - Product Page Sale Label */
#product_main.sale .product_img span.marker.ps,
#product_main.sale #product_details .product_label {
	
	}
/* - - - - Product Page xd Label */
#product_main .product_img span.marker.ps.xd,
#product_details .product_label.xd {
	
	}

So let’s say that we wanted to add a line through our xd labels to further communicate that it is the standard product price, we would use the above code groups in our your custom style coding area as follows:

/* - - - - Products View Sale Label */
.shop_thumb.sale a span.marker.ps,
.shop_thumb.sale a span.product_status {
	
	}
/* - - - - Products View xd Label */
.shop_thumb a span.marker.ps.xd,
.shop_thumb a span.product_status.xd {	
	text-decoration: line-through;
	}

/* - - - - Product Page Sale Label */
#product_main.sale .product_img span.marker.ps,
#product_main.sale #product_details .product_label {
	
	}
/* - - - - Product Page xd Label */
#product_main .product_img span.marker.ps.xd,
#product_details .product_label.xd {
	text-decoration: line-through;
	}

Always save your changes in your Big Cartel admin area to permanently apply your new styling.

Positioning Your On Sale and Standard Price Labels

Labels are displayed differently for different themes, but are typically shown on separate lines under the assumption that they are not necessarily directly related to each other.

However, in this case you may wish to edit the positioning of your labels to have the On Sale and Standard Price Labels closer together or on the same line. To achieve this, make sure that the style groups detailed in the previous section are copied and pasted into your custom style coding area, at the very end of all CSS coding – see Where do I add custom style coding in my Big Cartel theme controls?

After pasting the style groups in your custom style coding area you can then add relevant styles (floats, top/bottom, margins, etc.) to achieve the positioning you desire. The best style properties to use will differ depending upon your theme, and it may take some trial and error. Remember this is optional customisation – for information on CSS coding, refer to w3schools.

In our example we are using the Milk theme and the default position of our labels are as follows:

Products Page View

Product Page View

In this example, on both the products and product page, adding a left float to the On Sale label will bring the xd label up to the same line:

/* - - - - Products View Sale Label */
.shop_thumb.sale a span.marker.ps,
.shop_thumb.sale a span.product_status {
	float: left;
	margin-right: 4px;
	}
/* - - - - Products View xd Label */
.shop_thumb a span.marker.ps.xd,
.shop_thumb a span.product_status.xd {	
	
	}

/* - - - - Product Page Sale Label */
#product_main.sale .product_img span.marker.ps,
#product_main.sale #product_details .product_label {
	float: left;
	margin-right: 8px;
	}
/* - - - - Product Page xd Label */
#product_main .product_img span.marker.ps.xd,
#product_details .product_label.xd {
	
	}

We have also added a right margin to the sale labels to create some space between the One Sale and xd labels.

In our example, with the Milk theme and the above styles applied, our labels are now positioned as follows:

Product Page View

Products Page View

Click the Done button and then the Save link at the top of your admin controls, once you have finished editing your CSS styles.

Another Example – The Uptown Theme

In some cases, it may not be obvious how to position the labels if you are not familiar with CSS. For example, when we first add a Standard Price Label using the Uptown theme, the On Sale Label seems to disappear.

What has actually happened is that the Standard Price Label has been positioned on top of the On Sale Label. So, following the instructions at the start of this article section, we add the style groups to our CSS code area.

We now edit these style groups to make each label half the width of the product image (using the width attribute) and position them side by side (using the “left” and “right” attribute):

/* - - - - Products View Sale Label */
.shop_thumb.sale a span.marker.ps,
.shop_thumb.sale a span.product_status {
	width: 50%; /* set width to half of the product image width */
	left: 0px; /* make sure the sale label is to the left */
	text-align: right; /* align the text closer to the xd label */
	}
/* - - - - Products View xd Label */
.shop_thumb a span.marker.ps.xd,
.shop_thumb a span.product_status.xd {
	width: 50%; /* set width to half of the product image width */
	left: auto; /* clear any existing left setting */
	right: 0px; /* make sure the xd label is to the right */
	text-align: left; /* align the text closer to the sale label */
	}

/* - - - - Product Page Sale Label */
#product_main.sale .product_img span.marker.ps,
#product_main.sale #product_details .product_label {
	
	}
/* - - - - Product Page xd Label */
#product_main .product_img span.marker.ps.xd,
#product_details .product_label.xd {
	
	}

Applying the above code will result in:

We can then move the text closer together using the “text-align” attribute. Some browsers may also display a hairline gap between the two labels (as shown in the above image). To remove this, we can slightly increase the width of the each label.

/* - - - - Products View Sale Label */
.shop_thumb.sale a span.marker.ps,
.shop_thumb.sale a span.product_status {
	width: 51%;
	left: 0px;
	text-align: right; /* align the text closer to the xd label */
	}
/* - - - - Products View xd Label */
.shop_thumb a span.marker.ps.xd,
.shop_thumb a span.product_status.xd {
	width: 51%;
	left: auto;
	right: 0px;
	text-align: left; /* align the text closer to the sale label */
	}

Note that we can delete style groups if we are not using them (in this case we deleted the Product page styles).

Applying the above code, and adding the strikethrough style as detailed in the previous section of this artice, will result in:

Remember this is optional customisation – if you need further support for customising the display of your labels refer to How do I customise my Big Cartel theme?

Related articles...