Big Cartel Theme Support

How do I style the previous and next links on my product page?

How do I style the previous and next links on my product page?

Using the built in sharing options

In your Aarcade admin theme settings, the section Product Page Options includes the setting to hide or display the previous and next links on your product page. To update these settings for your installed theme, see How do I edit my theme's styles and options?

The prev / next links will typically be displayed after the product description and sharing area on the product page. However, the links are also duplicated at the top of the product page. To show or hide the links in either location, add the following custom CSS to your custom style coding area - see Where do I add custom style code?:

/* Product prev / next link
** Top of page */
.product > .prev-next-nav {
	display: block;
}
/* After description area */
.details-wrap > .prev-next-nav {
	display: none;
}

The above code will display the prev / next links at the top of the page and hide the links after the description area. You can edit this code by switching display: block; to display: none; (and vice versa) as needed.

Click the Done and Save buttons to apply your changes.

The pagination links include border and background styling for most themes. If you wish to change this styling, add the following custom CSS to your custom style coding area - see Where do I add custom style code?:

/* Product prev / next link style
** Normal state */
.prev-next > li > a {
	color: #ff5eb2;
	border-color: #000000;
	background-color: transparent;
}
/* Hover state */
.prev-next > li > a:hover {
	color: #cc0000;
	border-color: #cc0000;
	background-color: #ffffaa;    
}

In the above we have used hex values to set the text, border and background colours for the prev / next links, however you can use any valid colour value - see CSS-colour tutorial. Remember that setting the colour value to transparent will hide the relevant item, for example border-color: transparent; will remove the border from the links.

You can also add text to the prev / next links via CSS as shown on the Flywheel product page. To do this we add the following custom CSS to your custom style coding area - see Where do I add custom style code?:

/* Product prev / next link text
** Previous */
.prev-next > li.prev > a > span:after {
    content: " prev"
}
/* Next */
.prev-next > li.next > a > span:before {
    content: "next "
}

Additionally, if you wish to display only the text you have added. You can hide the default arrows with the following CSS:

/* Product prev / next link text
** Hide arrows */
.prev-next > li span span {
    display: none;
}

AarcadeHow do I style the previous and next links on my product page?