NiftyGridZPro FAQ


Not yet a Zazzler?

How do I become a Zazzle affiliate?

Visit Zazzle’s Associate Program page and sign up there.

What are the benefits?

Zazzle’s program is one of the best in the affiliate marketing world. As long as you’re able to get relevant eyeballs to your site / blog, then you’ll be able to earn referral commission.

  • 15% per sale
  • Volume bonus: up to 17% per sale
  • Cookie length: 45 days

Beginners

How do I make sure I get any referral commission due

You use the shortcode option associate_id="238582202591969585", substituting your associate (aka referral) id in place of the example one shown here.

Note: If you’re using the free version or the licensed version you purchased has expired, the associate id used will be ours. As soon as you purchase a new license version, all old and new links will once again use yours.

Is there an easy way to set up my shortcode?

Yes. There’s a helper page on our sister site. You set all your options there and
it gives you the shortcode to use. The option choices you make on that page can also be saved for next time (via a bookmark link you’re given).

NiftyGridZ shortcode builder screenshot

Can I change the styling of the product grid?

Yes. See the complete list of shortcode options, below.

What are the fallback files for?

They hold static product grids and are automatically substituted when there’s difficulty ‘pulling’ your live grid from Zazzle.

The fallback file whose name you give in your shortcode (or the default, if you don’t) gets displayed under two circumstances:

  1. Zazzle’s rss feed mechanism is down
  2. For some reason, your setup is getting 0 results from Zazzle

You can use the provided fallback files or make your own with the Nifty Promo Control panel’s code generation (static product grid) option (another tool on our sister site)

NB With the supplied fallback files, the number of products included in its grid are given by the last number in the filenames. If you make your own, I suggest you do the same so it’s easy to choose the right one for your page.

How do I test my chosen fallback file / grid?

Simple, just make a test post with a shortcode that names the fallback grid file you want to use. Use a search term with it that’s guaranteed to fail – i.e. that will pull zero products – ghtwyz works for me 🙂

For example, suppose you’ve made and uploaded a fallback grid file called my-generic-pattern-grid4.html, then a shortcode to test it would be:

[niftygridzpro fallback_filename="my-generic-pattern-grid4.html" search_term="ghtwyz"]

(If you’re on the ball you’ll have spotted that the fallback files are actually in a folder called “fallback” – NiftyGridZPro automatically looks
there, so no need to specify it in your shortcode.)

What is the full list of shortcode options?

Here they are, grouped by styling, display content and getting designs for your grid:

Custom styling of product display

  • the size of each product’s title in pixels
    eg title_font_size = "14px"
  • title alignment (center / left / right)
    eg title_alignment="center"
  • cell max width in pixels (governs the image size used)
    eg cell_max_width="280px"
  • cell border color
    eg cell_border_color="#ffffff"
  • cell background color
    eg cell_background_color="#ffffff"
  • cell font color
    eg cell_font_color="#333333"
  • color of visited links
    eg cell_vlink_color="#aaaaaa"
  • product description font size in pixels
    eg description_font_size="15px"
  • product description alignment
    eg description_alignment="left"
  • product description length
    eg description_length="140"

Customise content shown for each product

  • exclude product type in titles (useful if you use say, business cards, for something else)
    eg include_product_names_in_titles=0 (note that 1 means include them, 0 means exclude them)
  • include byline (linked to store with ref id, tracking code and promo code, if used)
    eg include_by_line=0 (note that 1 means include it, 0 means don’t include it)
  • include a tags line (limited to first 80 characters)
    eg include_tags_line=0 (note that 1 means include it, 0 means don’t include it)
  • include a price line
    eg include_price_line=1 (note that 1 means include it, 0 means don’t include it)
  • promo code (once expired, the links will still work – no need to do anything)
    eg promotion_code="BIGMONEYOFF"
  • choose the length of description text (in characters)
    eg description_length="140"

Getting designs for your product grid

  • store, collection id or none (= market place)
    eg store_or_collection="hightonridley"
    eg store_or_collection="collections/119212250951084501"
    eg store_or_collection="" (market place)
  • search term (works identically to Zazzle search)
    eg search_term="black and white"
  • sort type (date created or popularity)
    eg sort_type="popularity"
    eg sort_type="date_created"
  • sort direction (ascending or decending)
    eg sort_direction="desc"
    eg sort_direction="asc
  • page size (number of products requested)
    eg page_size="15" (max 120)
  • page number (first, second etc page of results)
    eg page_number="2"
  • department id
    eg department_id="252657725253948300" (clothing)
  • category id
    eg category_id="196164623942056618" (one of my categories)
  • product background color
    eg product_background_color="EFEAE4"
  • tracking code
    eg tracking_code="make_one_up_yourself" – only letters, numbers and _ (underscore)
  • Define your own fallback grids to suit your site’s needs (easy peasy with our Nifty Promo Control Panel). They’re displayed whenever a feed request returns no results
    eg fallback_filename=”backup-file2-birthday6.html”
    Four fallback files are included, with the one above set as the default (6-product grid)

Other

  • Set interaction mode on or off. When on, by default an inbuilt search form and grid navigation elements are included.
    eg allow_interaction=1 (note that 1 means on, 0 means off)
    IMPORTANT: If you want to use more than one within the same widget, the same post or the same page then you need to give
    each a unique, non-zero value for the allow_interaction option. It makes sure only the one supposed to respond to the
    interaction, does.
  • When interaction mode is on, you can
    • hide the on-by-default inbuilt search form with show_visitor_search_form=0.
    • hide the on-by-default product grid navigation elements with show_grid_navigation=0
  • set the text on up to 3 product template text items, as defined by the product’s designer. To change a template text item to what you want, you set the pair:
    eg ztmpl_url_text_parameter_0_name="text0" and ztmpl_url_text_parameter_0_value="Sally"
    ..will change the text displayed on your product for template text item “text0” to “Sally”
  • sort the grid using different methods, once pulled
    eg grid_sort_method="price" – other choices: “title”, “date”, “byline”, “pulledorder”NB “Pulled order” is the default and, when used, grid_sort_direction is ignored
  • grid sort direction (once pulled)
    eg grid_sort_direction="highlow" – other choice is “lowhigh”

What are the shortcode option defaults?

Each shortcode option has a default that will be used if you don’t give it a value. They are:

  • store_or_collection => “”
  • search_term => “”
  • associate_id => “238582202591969585”
  • sort_type => “popularity”
  • sort_direction => “desc”
  • page_size => “15”
  • page_number => “1”
  • department_id => “”
  • category_id => “”
  • product_background_color => “EFEAE4”
  • tracking_code => “wp_nifty_gridz”
  • title_font_size => “16px”
  • title_alignment => “center”
  • cell_max_width => “280px”
  • cell_border_color => “#ffffff”
  • cell_background_color => “#ffffff”
  • cell_vlink_color => “#aaaaaa”
  • cell_font_color => “#333333”
  • description_font_size => “15px”
  • description_alignment => “left”
  • description_length => “140”
  • include_product_names_in_titles => 1
  • include_by_line => 0
  • include_tags_line => 0
  • include_price_line => 0
  • promotion_code => “”
  • fallback_filename => “backup-file2-birthday6.html”
  • allow_interaction => 0
  • show_visitor_search_form => 1 (won’t show unless allow_interaction is on)
  • show_grid_navigation => 1 (won’t show unless allow_interaction is on)
  • grid_sort_method => “pulledorder”
  • grid_sort_direction => “highlow”
  • ztmpl_url_text_parameter_0_name => “”
  • ztmpl_url_text_parameter_0_value => “”
  • ztmpl_url_text_parameter_1_name => “”
  • ztmpl_url_text_parameter_1_value => “”
  • ztmpl_url_text_parameter_2_name => “”
  • ztmpl_url_text_parameter_2_value => “”

Intermediate

How does the inbuilt visitor search form work?

To switch on the search form, use allow_interaction=1. Your visitor can search using:

  • a search term
    (passed to Zazzle where it’s interpreted and the results passed back)
  • the number of products to get

Here’s a screenshot of the inbuilt form. Note that the form styling is determined by the theme used (twentyfifteen here).

When using search, at the top and bottom of the grid and off to the right you’ll see forward and back buttons. These are so your visitor can browse the product grid pages. They can be switched off, if you like, with show_grid_navigation=0

Searches are restricted as per the other options you used in your shortcode (but see Limitations with Zazzle Collections, below).

Visitor search form and Collections

If you’re pulling from a collection, search ignores the collection and the market place is searched instead. This is due to how Zazzle handles collections (see Limitations, below). It’s a case of “Hobson’s Choice”, so there you go.

Limitations with Zazzle Collections

Starting on a positive note, the maximum page size with collections is 240 but before you use such large collections, think of your visitor and their internet connection / data allowance.

Even though there are limitations, collections are a great way to go because you can be sure the designs will all go together in some way. This is a great way to get multiple referrals.

When you use a collection as the product grid source, there are some things you should know about that Zazzle doesn’t cater for in requests. These are:

  • Department
  • Category
  • Search term
  • Page size
  • Page number

Even though the following aren’t supported directly by Zazzle, NiftyGridZPro makes the following possible:

  • Page size (the full collection is still pulled but is then cut down to the page_size you give)
  • Sort type (price, date, title, byline)
  • Sort direction (hightolow or lowtohigh)
  • Search ignores the collection and the market place is searched instead. Switch off the search form if you don’t want this behaviour

Advanced – All about interaction mode

What is “interaction mode”?

Interaction mode is all about letting visitors interact with the grid so they can see more of the same or search for different designs / products / occasions.

In its simplest form, you can get either or both of grid navigation and a search form. At it’s most sophisticated, you can provide a complete storefront. This mode is available in posts, pages and widgets.

Here’s a screenshot of one with complete control:

To switch the mode on, use allow_interaction=1.

In its simplest use (no coding required) the inbuilt search form lets your visitors search in the same location as your shortcode is set up for. For example, if you set your shortcode up to pull from a department, then a visitor’s search will look in that department. Note that searches will look in the market place if you’re pulling from a collection, due to a limitation at Zazzle’s end.

You also get grid navigation controls, grid page number and the number of grid pages at the top and bottom of the product grid so that visitors can browse the different “pages” of the results grid. If you don’t want those elements showing, switch them off with show_grid_navigation=0.

For full control, you can switch off the inbuilt search form (with show_visitor_search_form=0) and do everything yourself, with NiftyGridZPro handling the product grid display. This route requires you, at the very least, to be able to modify some code. Here’s a sample page implementing a Harry Potter storefront and here’s the code file for it.

How do I drive things in code? (only for interaction mode)

You can set any of the “pulling” options (and also a promo code) by opening a page (one using NiftyGridZPro) using a bunch of url parameters.

This functionality is only switched on when in interaction mode (shortcode option: allow_interaction=1)

If you want to take full control, you can hide the inbuilt search form with show_visitor_search_form=0

There are the usual things you can set, plus one for adding a promo code to every link. They are:

  • store name or a collection id
    eg: psc=hightonridley or psc=collections/119457007476489769
  • a query search term
    eg: pqs=outer+space
  • a page number to pull from
    eg: ppg=1
  • the page size when pulling
    eg: pps=18
  • sort type
    pst=popularity or pst=date_created
  • sort direction
    psd=desc or psd=asc
  • department id
    eg: pdp=252657725253948300
  • category id
    eg: pcg=196466803266351700
  • product background color
    eg: pbg=ffffff
  • tracking code
    eg: ptc=ngrdzwp_exstp1
  • promotion code
    eg: ppm=BIGMONEYOFF

An example set of parameters to add to a page url might be:
?psc=hightonridley&pqs=outer+space&ppg=1&pps=18&pst=popularity&psd=desc&pdp&pcg&pbg=ffffff&ppm&ptc=ngrdzwp_exstp1

Where a value isn’t provided for a parameter, the shortcode option setting is used instead. If that wasn’t given, then the default gets used.

Armed with the above, you can now create an entire store with your own custom page template(s).

Here’s a sample page implementing a Harry Potter storefront and here’s the code file for it.

How do I create a storefront using NiftyGridZPro?

You’ll need a custom template page whose purpose is to provide virtual “navigation” around your store, with NiftyGridZPro doing the gruntwork of product grid display. Think of the “navigation” as being between different store sections, whether on different pages or implemented on the same page. (see “How can I drive things in code”, above)

Your custom template page might have dropdowns, tabs and other ways of presenting and getting a visitor’s choices. All you have to do is build the set of (url) parameters and, in code, request the page using them with something like window.open(buildFullUrl(), '_self')

When the page is first visited it might have no url parameters at all – in which case it will display the grid as per your shortcode options.

If a visitor navigates around and then bookmarks your page, then the url parameters will also be recorded. This means that when they next visit the bookmark, your page will display the same results as before. There will be some shifting around because of, for example, changes to popularity since their last visit.

You could have one such template page per major section you want your store divided into, so you can brand each one differently. That way, each could have its own specific graphics and navigation choices. A sports store might use a page each for golf, football, basketball, swimming, gymnastics etc.

Here’s an example based on Superheroes and here’s the php code file for it, saved as a text file so you can see it at the link. It used the twentyfifteen theme’s page.php as a starting point as that’s the theme we’re using.

It breaks down into (click any image to see larger):

    • Set up the input fields that the visitor is to be able to use- each is given the same onchange event

    • Set up the rest of the possible input fields as ‘hidden’you use these behind the scenes to limit grid contents how you want, while still letting a visitor interact with the inputs they can see

    • An inline javascript section takes any url parameters found and populates the matching input fields with them

    • There’s an inline javascript onload function to deal with any initialization needed

    • There’s an inline javascript for the onchange function that’s triggered when a visitor interacts with an input field

When the web page is visited, the principle is:

  • Display the product grid as determined by any url parameters
  • If there are none, display the product grid as defined by the shortcode options
    (or the defaults where no shortcode option is given)
  • When a visitor interacts with an input, the onchange function is triggered, which builds the new url together with its parameters and then reopens the page with them. This causes the new products to be pulled and displayed.

However you can conceive it, NiftyGridZPro has got your back!

Can I use more than one grid on a single web page?

Yes.

You can even mix some in interaction mode and some not. You might have one as a widget in your side bar and then interaction mode on a series of blog posts. If you do that, then when someone looks at your blog they’ll see, on one web page, the one in the side bar and some in the blog posts on display on that page.

Summary

  • Only using one interaction mode grid per page/post/widget? Safely ignore the rest of this FAQ entry
  • Using more than one? Use allow_interaction=1 for the first, 2 for the second, 3 for the third etc.

Behind the scenes, each grid using interaction mode has its own unique id. This is to allow any visitor interaction only to apply to the grid they’re interacting with.

That’s fine with any widgets, posts or pages using only one grid in interaction mode. This is because the unique id is derived from the timestamp of the post/page. However, if you have a single widget/post/page with more than one grid in interaction mode, uniqueness isn’t achieved using the timestamp alone. Instead it’s up to you to help by using a unique (non-zero) number for the allow_interaction.

Huh? Normally you’d use allow_interaction=1 but if you have more than one on the widget/post/page, each allow_interaction must be given a different number. Then, behind the scenes, the timestamp is added to that number and uniqueness is achieved 🙂