Working with CrystalHelper plugin

Set up the CrystalHelper plugin on your blog

Matthew Schwartz avatar
Written by Matthew Schwartz
Updated over a week ago

What is the CrystalHelper plugin?

The CrystalHelper plugin allows you to easily insert deck lists, grids, and product links in your WordPress blog posts. The inserted elements will link to those products on your CrystalCommerce store.

Because the plugin uses our global catalog, it is not compatible with custom products which are unique to your store's inventory database.

Example of Decklist (Newer version of plugin)

WordPress Admin Plugin Interface Example

Plugin Versions

Legacy
This plugin works with WordPress versions prior to 5.0 (which uses the Classic Editor for posts). 

New
This plugin works with WordPress versions 5.0+ (which uses the Gutenberg Block Editor).

Updates/features in newer version:

  • Gutenberg blocks for Crystal Helper Products (List, Grid, Single*)

  • Improved appearance of “Shop Now” buttons on product hover

  • Improved appearance of “Buy this List” button

  • Improved plain text list features (“View Plain Text” / “View Formatted” toggle button, “Copy List” button)

  • *Single product block will insert the product name on its own line. If you need the text to be inline within a paragraph, you’ll need to use a “Classic” block for the paragraph text and insert the product link with the legacy plugin icon in the WYSIWYG bar.

How do I install and set up the plugin?

When you sign up for a blog site with CrystalCommerce, the CrystalHelper plugin will come pre-installed and configured. If you need or want to adjust these settings, see the configuration instructions, later in this article.

If, for some reason, the plugin is not installed, please contact your account representative.

I made my own WordPress blog. How do I get the plugin?

Please contact the design department for assistance.

How do I Configuring the plugin settings?

Sign in to your WordPress admin area

Click the "Crystal Catalog Helper" link which you'll find in the main WordPress menu

Store URL

The store URL  is used to generate the URL to which the inserted products will link to. Make sure the link is correct and that you test it, or else all of your product links in your posts will not work.

The store URL link should be formatted like: http://mystore.crystalcommerce.com, where "mystore" is your CrystalCommerce Database name.

IMPORTANT: Do NOT use your own domain name or any other URL other than your unique CrystalCommerce store URL. If you use a different URL, and you ever change your domain name / website address, all of the inserted CrystalHelper links will no longer work.

Default Product Type ID

There are two options for this field:

Option 1: Enter a product type ID
If a product type ID is entered in this field, the CrystalHelper plugin will only search for products within that category. You'll want to use this option if you're only going to use the plugin for one category of products (for example, Magic the Gathering).

Pros:

  • The search is faster

  • The products results will be more relevant

Cons:

  • You'll need to update the product type ID number field every time you want to search within a different category.

Option 2: Leave it blank
If this field is left blank, the plugin will search within, and show product results from, the entire CrystalCommerce catalog.

Pros:

  • You can find products from any category (MTG, Yu-Gi-Oh!, etc)

Cons:

  • The search will be slower

  • If there are many matching results it may be difficult to navigate them

Commonly used product type ID numbers

  • Magic Singles: 208

  • Yugioh Singles: 232

  • Cardfight Vanguard: 139

  • Pokemon Singles: 236

How do I add products to a post or page?

New Plugin (WordPress versions 5.0+, with Gutenberg block editor)

Sign in to your WordPress admin

Navigate to the post or page editing area

To insert a List Product block, Grid Product block, or Single Product block on its own line, you'll use the "Add block" menu.

  1. Find the (+) icon to Add a Block, and click it

  2. In the block popup, find the Crystal Helper section and expand it

  3. Click the option for which product block you'd like to add

  4. When the new block is added to the page, you'll need to click the 'pencil' icon to open up the Crystal Helper popup. Instructions continued below the screenshot...

For Single Product block

  1. Within the popup, type the product name

  2. Select from the displayed results

  3. If desired, adjust the "Displayed text"

  4. Click "Insert Into Post"

For List Product block

  1. Within the popup, if desired, add a Sublist title (you can add as many as needed)

  2. Manually add individual products and quantities (not pictured below) or paste a pre-made list in the larger box and then click "Add to preview" (see example below)

  3. If desired, rearrange sublist titles and products in the Preview area by dragging and dropping them.

  4. When you're done creating the list, click "Insert Into Post"


For Grid Product block

  1. Within the popup, manually add individual products or paste a pre-made list in the larger box and then click "Add to preview"

  2. If desired, rearrange the products in the Preview area by dragging and dropping them.

  3. When you're done creating the grid, click "Insert Into Post"

If you'd like to insert a Crystal Helper Single Product link within a paragraph of text, instead of on its own line, you'll use the Classic block instead of the Crystal Helper block:

  1. Click the (+) icon in Gutenberg to add a new block.

  2. In the "Add Block" popup, search for the "Classic" block

  3. Click the icon to add a classic block

  4. Type or paste your paragraph text within the Classic block

  5. Highlight the portion of the text that you'd like to link to the Crystal Helper product (see screenshot)

  6. Click the "Single Product" icon in the WYSIWYG bar of the Classic block (highlighted in screenshot below).

  7. Type the product name

  8. Select from the displayed results

  9. If desired, adjust the "Displayed text"

  10. Click "Insert Into Post"

Please note that the List and Grid icons do not currently function in the Classic block within Gutenberg (for List and Grid, use the new CrystalHelper blocks)

Legacy Plugin (WordPress versions before 5.0, with classic editor)

Sign in to your WordPress admin

Navigate to the post or page editing area

Single Product (alt+1 or alt+S)

The first icon is for inserting a single product. It displays as a text link, and on hover it shows the product image.

How to insert a Single Product

  1. Place your mouse cursor in the post editing window, where you want the item to be inserted.

  2. Click the Single Product icon or use the keyboard shortcut

  3. Type the product name

  4. Select from the displayed results

  5. If desired, adjust the "Displayed text"

  6. Click "Insert Into Post"

Product List (alt+2 or alt+L)

The second icon is for inserting a deck list or generic list. It displays as a list of text links, with quantities (option), and a single preview image on the side.  As the items in the list are hovered upon, the preview image updates to show the current item.

How to insert a product list

  1. Place your mouse cursor in the post editing window, where you want the list to be inserted.

  2. Click the List icon or use the keyboard shortctut

  3. If desired, add a Sublist title (you can add as many as needed)

  4. Manually add individual products and quantities (not pictured below) or paste a pre-made list in the larger box and then click "Add to preview" (see example below)

  5. If desired, rearrange sublist titles and products in the Preview area by dragging and dropping them.

  6. When you're done creating the list, click "Insert Into Post"

Product Grid (alt+3 or alt+G)

The third icon is for inserting a Grid. It displays as a grid of large images, 4 across per row, and as many rows as you want.

How to add a product grid

  1. Place your mouse cursor in the post editing window, where you want the grid to be inserted.

  2. Click the Grid icon or use the keyboard shortctut

  3. Manually add individual products (not pictured below) or paste a pre-made list in the larger box and then click "Add to preview" (see example below)

  4. If desired, rearrange the products in the Preview area by dragging and dropping them.

  5. When you're done creating the grid, click "Insert Into Post"

How do I edit existing items which I've inserted with the plugin?

New Plugin (WordPress versions 5.0+, with Gutenberg block editor)

  1. Make sure the block you want to edit is active by clicking within the block bounds (but not on a product or link)

  2. To remove the entire block: click the triple-dot icon for more options, then select "Remove Block." To edit the block: click the 'pencil' icon on the block to reopen the Crystal Helper popup

  3. Make edits as needed

  4. Insert into Post

Legacy Plugin (WordPress versions before 5.0, with classic editor)

  1. In the post or page editor window, find the existing single product, list, or grid 

  2. Hover over the item so the background becomes blue.

  3. To delete the entire inserted element, click the red "x" that appears when hovering. To edit the inserted element, click within the blue area.

  4. The plugin interface will pop up and you'll be able to edit the items

Troubleshooting

When I type a search term, it's not found

  • Check the plugin configuration settings to be sure you have the correct product type ID set.

  • Make sure the item you're looking for is not a custom product. (Only products in CrystalCommerce's global catalog are searchable with the CrystalHelper plugin)                

                    

I cannot figure out how to embed full categories, or embed a checkout

  • You cannot embed categories.

  • You cannot embed any store functionality.

Did this answer your question?