Printfection is trusted by over 20,000+ customers.
Large and small companies alike, find out why.
Sign up for free at any time to give our service a try. Curious to learn more?
- Why Printfection is the best merchandise marketing solution
- How we make sure you and your customers are happy
- See our plans and pricing, no contract, no credit card, upgrade or downgrade anytime.
Store CSS
When designing stores there are various blocks of code created by Printfection.com which are inserted in place of your tags. Although it is not possible to modify this code you can completely change the default look to match that of your store using CSS. Listed below are the CSS styles which you can modify and a brief description about each one. To add CSS to your store, but sure to select a theme other than the Printfection default.
If have any further questions feel free to ask other Printfection.com store owners or the Printfection.com staff through our forums. See our forums.
Sections
Class: sectionsTable1
Tag: <table>
Usage: The table surrounding all of the sections
Class: sectionsTD1
Tag: <td>
Usage: The TD surrounding each section.
Class: sectionsTable2
Tag: <table>
Usage: The table surrounding the individual section’s image, teaser and name.
Class: sectionImage
Tag: <img>
Usage: The image tag for the section image
Class: sectionTitleLink
Tag: <a>
Usage: Surrounds each section title.
Class: sectionTeaser
Tag: <font>
Usage: The tag around the teaser of each section.
Class: sectionTitleText
Tag: <font>
Usage: The font tag around each section title.
Depreciated: Use sectionTitleLink
Products
Class: productsTable1
Tag: <table>
Usage: The table surrounding all of the products
Class: productsTable2
Tag: <table>
Usage: The table surrounding the individual product’s image, name and price.
Class: productTitleLink
Tag: <a>
Usage: The tag around each product’s title.
Class: productNumColorsLink
Tag: <a>
Usage: The tag around the number of colors each product comes in.
Class: productNumColorsPriceDivider
Tag: <font>
Usage: The tag around the divider (|) between the number of colors and the price.
Class: productImage
Tag: <img>
Usage: The image tag for the product’s image.
Class: productPrice
Tag: <font>
Usage: The font tag around each product’s price.
Class: productTitle
Tag: <font> The font tag around each product’s title.
Usage: Depreciated: Use productTitleLink
Product Detail Page
Class: productDetailTable1
Tag: <table>
Usage: This is the table surrounding the whole Product Detail Page.
Class: productDetailTitleText
Tag: <font>
Usage: Depreciated: Use pageHeader
Class: productDetailColorOutOfStock
Tag: <div>
Usage: This is the div which is displayed over a color swatch when a user rolls over the color swatch of a color which is out of stock.
Product Detail Pricing Table
Class: pricingTable
Tag: <table>
Usage: The table which holds the pricing data.
Class: pricingHeader
Tag: <td>
Usage: The cell surrounding each pricing quantity range.
Class: pricingColorName1/ pricingColorName2
Tag: <td>
Usage: The two classes which contain the color name. Both classes should match exactly except for the background color as it rotates based on the pricing breaks.
Class: pricingSwatch1/ pricingSwatch2
Tag: <td>
Usage: The two classes which contain the color swatch. Both classes should match exactly except for the background color as it rotates based on the pricing breaks.
Class: pricingPrice1/ pricingPrice2
Tag: <td>
Usage: The two classes which contain the price. Both classes should match exactly except for the background color as it rotates based on the pricing breaks.
Product Detail Tabs
Class: productDetailTabTable
Tag: <table>
Usage: The table surrounding the tabs.
Class: productDetailTabExtra
Tag: <td>
Usage: The extra space at each end of the tabs.
Class: productDetailTabFocus
Tag: <td>
Usage: This is the tab which is currently in focus
Class: productDetailTabUnfocus
Tag: <td>
Usage: These are all the tabs which are not in focus.
Class: productDetailTabTextFocus
Tag: <font>
Usage: This is the text within the tab in focus.
Class: productDetailTabTextUnFocus
Tag: <font>
Usage: This is the text within the tabs which are not in focus.
Product Detail Ready to Buy Box
Class: buyBoxTable
Tag: <table>
Usage: This is the table surrounding the box.
Class: buyBoxHeaderTD
Tag: <td>
Usage: This is the header column tag (td).
Class: buyBoxHeaderText
Tag: <font>
Usage: This is the font tag around ‘Ready to Buy?’.
Class: buyBoxItemPrice
Tag: <span>
Usage: This is the span tag around each item price in the buy now box.
Class: buyBoxProductNumber
Tag: <span>
Usage: This is the span tag around the product number at the bottom of the buy now box.
Size Chart
Class: sizeChartTitleText
Tag: <font>
Usage: This surrounds the headings for the size equivalencies and product measurements.
Class: sizeChartTable
Tag: <table>
Usage: This is the table for each set of measurements.
Class: sizeChartHeaderTD
Tag: <td>
Usage: The cell surrounding each header cell which contains some text.
Class: sizeChartHeaderTDSpacer
Tag: <td>
Usage: This is the header cell which controls the spacing between each header cell containing text
Class: sizeChartHeaderDIVSpacer
Tag: <div>
Usage: This is the div within each sizeChartHeaderTDSpacer to control the font size and right border
Class: sizeChartTD
Tag: <td>
Usage: Every cell within the table which contains data
Class: sizeChartDIV
Tag: <div>
Usage: This is the div within each sizeChartTD which adds some spacing to the cell.
Class: sizeChartTDName
Tag: <td>
Usage: The cell containing the row’s name (far left column)
Class: sizeChartTDSpacer
Tag: <td>
Usage: The cell which controls the spacing between all the cells in the table
Class: sizeChartDIVSpacer
Tag: <div>
Usage: The div within each sizeChartTDSpacer to control the font size and right border
Cart
Class: cartTitleText
Tag: <font>
Usage: This is the font tag around the title of the shopping cart i.e. ‘Shopping Cart’. Depreciated: Use pageHeader
Class: cartTable
Tag: <table>
Usage: This is the table surrounding the whole cart.
Class: cartHeadTR
Tag: <tr>
Usage: This is header row.
Class: cartHeadText
Tag: <font>
Usage: This is the header text for each column in the cart.
Class: cartTD
Tag: <td>
Usage: This is each cell within the cart.
Class: cartLineTD
Tag: <td>
Usage: This is the last cell after every row in the cart. Used to create the line between items.
Menu
Class: menuTable
Tag: <table>
Usage: This is the class of both the sections menu and the pricing menu. This class indents the menu by default.
Class: menuSelectedText
Tag: <font>
Usage: This class is in a font tag around each menu item when it is selected.
Class: menuLink
Tag: <a>
Usage: menuLink This is the class around each menu item which is not selected.
Class: menuLevel1/ menuLevel2/ etc.
Tag: <font> and <a>
Usage: This is a secondary class used to specify the level of a section within the menu.
A store with 2 sections:
Section A
Section B
Section B is inside of Section A. Section A is on level 1 and Section B is on level 2.
Class: breadcrumbLink
Tag: <a>
Usage: This is the tag around each section in the breadcrumb
Class: breadcrumbProduct
Tag: <font>
Usage: This is the tag around the product title in the breadcrumb.
Help Center
Class: helpCenterStoreArticleText
Tag: <div>
Usage: This surrounds the help article text. Most articles have some predefined formatting which cannot be changed such as bolding and sizing.
Class: helpCenterSubHeaderTD
Tag: <td>
Usage: This surrounds each help sub section. It defaults to a single line under each header.
Depreciated: Use helpCenterStoreArticleText
Class: helpCenterSubHeader
Tag: <font>
Usage: This surrounds the header text of each help sub section. Depreciated: Use helpCenterStoreArticleText
Other
Class: underlineHeader
Tag: <td>
Usage: This sets all text within the cell as bold and puts a blue border on the bottom of the cell.
Class: underlineHeaderPurple
Tag: <td>
Usage: This sets all text within the cell as bold and puts a purple border on the bottom of the cell.
Class: pageHeader
Tag: <font>, <div>
Usage: This is used for all headers across the store. For instance the product’s title on the product’s detail page as well as the headers displayed on the up-sell page after a customer places an item in to their cart. This is also used for the headers in the help section of the store.
Class: cellChanged
Tag: <td>
Usage: This is the class applied to the surrounding element (usually a td) of items which have been changed in the cart on the up-sell page when the page does not refresh.
Class: infoRed
Tag: <div>
Usage: This class is applied to a div surrounding an error message. Currently only used on the product’s detail page when a customer selects a color which is out of stock.
