Card Condition Guide - Custom

Did you know you can override the default Card Condition Guide page with your own content/markup?

Daniel Patten avatar
Written by Daniel Patten
Updated over a week ago

Assuming your Crystal Commerce website theme has been updated or created after 2021 January 25th, yes, you can simply replace the default Card Condition Guide page we provide for all of our clients by simply adding your new content to the "Card Condition Guide" site page in your admin.


Your site will have this option if:

  • Theme created after 2021 January 25th

  • Theme updated after 2021 January 25th


Start to use the Custom Card Condition Guide Override

To override the default Card Condition Guide you must log into your Crystal Commerce admin panel and click into the "Design" section. In that link menu you'll then want to click the "Site Pages" link as highlighted in the following screenshot.

Once in the site pages section, locate and/or create the page "Card Condition Guide." It must have the SEO name of "card_condition_guide."

  • If the page already exists, as it should, simply click the "Edit" link to the far right.

  • If the page does not yet exist, you can make one by clicking the blue "+" icon on the top right corner of the site pages menu to continue.

As seen below, you'll be able to use the WYSIWYG editor input to make the page be whatever it is you need it to be, from scratch. As soon as you save the page with new content in that input area, the default condition page will be completely replaced by your new content.

  • If you've had to create your Card Condition Guide page, you'll want to first make sure to title it "Card Condition Guide" exactly. And if you like being certain things work right, input the SEO Name as "card_condition_guide" as well.

You can use the editor as mentioned, but, if you've got the skills, you can instead opt to utilize code to layout your own unique card condition guide page as your coding skills can provide.


If you want to use code or our layout code template

To use code to setup your custom page, first check the box above the content section that reads:

  • Page contains Liquid Markup [ ] This will disable the WYSIWYG editor on this page after save. See CrystalCommerce liquid documentation for more details.

Once that box is checked, go ahead and FIRST save the page before you do any editing to the content area. This is because the input field will be replaced by a simple text editor input and any code written within the WYSIWYG editor format will NOT correctly carry over due to the paragraph styles that would be added in.

Below is a copy of the markup we use on the default card condition guide page. Feel free to use this as a template for your own edited version. Simply copy/paste the following code into your site page editor while the box is check marked and augment it as you see fit.

<h1 class="page-title">{{ page.title }}</h1>
<div class="row spacing-bottom">
<div class="small-12 medium-6 column">
<img src="{{ 'img/grading/nm.png' | asset_url }}" alt="Near Mint cards" title="Near Mint cards">
</div>
<div class="small-12 medium-6 column">
<h4>Near Mint (NM)</h4>
<p>
Near Mint condition cards show minimal or no wear from play or handling and will have an unmarked surface, crisp corners, and otherwise pristine edges outside of minimal handling. Near Mint condition cards appear "fresh out of the pack," with edges and surfaces virtually free from all flaws.
</p>
</div>
</div>
<div class="row spacing-bottom">
<div class="small-12 medium-6 column">
<img src="{{ 'img/grading/lp.png' | asset_url }}" alt="Lightly Played cards" title="Lightly Played cards">
</div>
<div class="small-12 medium-6 column">
<h4>Lightly Played (LP)</h4>
<p>
Lightly Played condition cards can have slight border or corner wear, or possibly minor scratches. No major defects are present, and there are less than 4 total flaws on the card. Lightly Played condition foils may have slight fading or indications of wear on the card face.
</p>
</div>
</div>
<div class="row spacing-bottom">
<div class="small-12 medium-6 column">
<img src="{{ 'img/grading/mp.png' | asset_url }}" alt="Moderately Played cards" title="Moderately Played cards">
</div>
<div class="small-12 medium-6 column">
<h4>Moderately Played (MP)</h4>
<p>
Moderately Played condition cards have moderate wear, or flaws apparent to the naked eye. Moderately Played condition cards can show moderate border wear, mild corner wear, water damage, scratches , creases or fading, light dirt buildup, or any combination of these defects.
</p>
</div>
</div>
<div class="row spacing-bottom">
<div class="small-12 medium-6 column">
<img src="{{ 'img/grading/hp.png' | asset_url }}" alt="Hevily Played cards" title="Hevily Played cards">
</div>
<div class="small-12 medium-6 column">
<h4>Heavily Played (HP)</h4>
<p>
Heavily Played condition cards exhibit signs of heavy wear. Heavily Played condition cards may include cards that have significant creasing, folding, severe water damage, heavy whitening, heavy border wear, and/or tearing.
</p>
</div>
</div>
<div class="row spacing-bottom">
<div class="small-12 medium-6 column">
<img src="{{ 'img/grading/dmgd.png' | asset_url }}" alt="Damaged cards" title="Damaged cards">
</div>
<div class="small-12 medium-6 column">
<h4>Damaged (D)</h4>
<p>
Damaged condition cards show obvious tears, bends, or creases that could make the card illegal for tournament play, even when sleeved. Damaged condition cards have massive border wear, possible writing or major inking (ex. white-bordered cards with black-markered front borders), massive corner wear, prevalent scratching, folds, creases or tears.
</p>
</div>
</div>

So if you feel our default condition page isn't quite what your business needs it to be, you now have the option to make it the way you need it to be. Take care and don't hesitate with any questions.

Did this answer your question?