Blog

Prettier small grids in v3.3 release of NiftyGridZPro

In the next release (Edit: now released!) we’ve got:

  • improved layout for small grid cell sizes,
  • better nav layout for 1-product grids,
  • bug fix for inbuilt search form,
  • general speed improvements.

read on, McDuff…

Auto-calculated margins between cells

When you were using small product grid cell sizes, the distance between them was overly-generous.

Now we calculate the margins to use based on the cell_max_width size you give. The end result is a much more balanced appearance, one which you’ll love!

See the difference


Here’s a larger one – compare the gaps:

 

We also removed an extra line space after the grid that wasn’t supposed to be there.

What do you think?

Another layout improvement

When using a page-size=1, we now automatically center the navigation elements (if you’ve set them up to show)

<1 of 20+>
<1 of 20+>
Search for:
How many to get (max 120):


Use the search form to change the number shown to 2 or more and see the difference.

The main use for this will be without the search form, in places where space is limited. For example, in a single-product grid as part of a paragraph in your article.

Bug fix with inbuilt search form

When a visitor had paged through a product grid and then did a search using the in-built search form, things got a bit unruly.

All fixed now and order has been restored in the upcoming release.

General speed improvements

To improve the speed, we’ve shaken up how we allow for sorting product grids after we get their details from Zazzle.

All product grids will display a little quicker as a result – those with large numbers of products in them will benefit the most.

Creative product grid use – how to improve your posts

Here’s an example post that demonstrates various ways that NiftyGridZPro can be used creatively to improve your blog posts. You’re not restricted to plain old grids between some paragraphs, not when you get a bit creative!

We’ve used wedding-themed products – pretend that instead of all the “how it’s done” stuff, there’s a gorgeously written article all about weddings, illustrated with occasional products.

Embedded on the right in a paragraph

Update Oct 11 2017: Now catered for using new shortcode option: paragraph_embed

Something for the Bachelorette?

Here’s what we did to get this paragraph looking like this. In text mode we enclosed the shortcode for the grid in a div. Still in text mode, we gave that div an inline style that floats it to the right of the text that follows.
Here’s the enclosing div and shortcode we used:   <div style="float: right;">[niftygridzpro title_font_size="12px" cell_max_width="200px" cell_border_color="#aaaaaa" description_font_size="12px" description_length="0" search_term="bachelorette party" page_size="1" page_number="1" product_background_color="#ffffff" tracking_code="ngrdz_blg_eg_layts"]<div style="font-size:small;text-align:center;margin-top:-30px;">Something for the Bachelorette?</div></div>

Embedded on the left

Update Oct 11 2017: Now catered for using new shortcode option: paragraph_embed

In the following paragraph, a page_size=4 grid has been used. Instead of it being floated to the right, this time it’s floated to the left. More than that, the inline style sets its max width to half that available.

One thing to remember, make sure that there’s enough width for those viewing on mobile! It’s easy to overlook but remember that 50% of your visitors, more as time goes on, are going to be using mobile devices. Ok, here’s the div-wrapped shortcode: <div style="float: left;max-width: 50%;">[niftygridzpro title_font_size = "9px" title_alignment = "center" cell_max_width = "110px" cell_border_color = "#aaaaaa" cell_background_color = "#ffffff" cell_font_color = "#333333" description_font_size = "12px" description_length = "0" include_product_names_in_titles = 0 use_message_slot = 0 store_or_collection = "" search_term = "chevron wedding" department_id = "252145500430512226" page_size = "4" page_number = "1" product_background_color = "#ffffff" tracking_code = "ngrdz_blg_eg_layts"]</div>

Creative, or wot?!

So make with the divs, don’t be afraid to go small and when you do, mess around with the details that are shown for each product. We’ll leave it as an exercise for you to work out how to show no details at all 🙂

Tip

If you’re going to use single-product grids somewhere that space is tight, make sure you have a generic fallback grid the same size mentioned in your shortcode.

That way your layout will be preserved should Zazzle go down. The same goes for any layout where the number of products matters.

V3.2 Released – new Google Ads feature

We’re pleased to announce the release of V3.2 of NiftyGridZPro, the gold standard WordPress plugin for Zazzle!

In this release you can now improve your earnings! And like every other aspect of NiftyGridZPro, it works on mobile too!

  • earn by displaying Google Ads from your Google Adsense account, globally across all (eligible) product grids
  • choose the balance between showing ads and showing your other global slot messages

When you’ve got it switched on, a random position (slot / cell) gets chosen in each (eligible) product grid and the ad is displayed there. But only if the roll of the dice says it should or you’ve got it set to always show.

setting up Google Ads
admin settings page: setting up a Google Ad

Goolge Ads are another type of global slot message and behave pretty much the same way. This means from one spot, you can control their display globally across your site, just like with the global slot messages.

You’ve got tons of flexibility in choosing when they’re shown, even being able to switch them on or off for a particular page/post’s product grid. Here’s one where we’ve forced the ad to appear all the time by using use_google_ad_code=9 in the shortcode (9 means always, 1 means rarely – it’s a scale from 1-9).

<1 of 20+>
<1 of 20+>

 

See full details here in the FAQ and find out all there is about setting up and controlling your Google Ads and what makes a grid eligible.

Shortcode used

As usual, here’s the shortcode we used for the product grid above:

[niftygridzpro title_font_size="12px" title_alignment="center" cell_max_width="280px" cell_border_color="#aaaaaa" cell_background_color="#ffffff" cell_font_color="#333333" description_font_size="12px" description_alignment="center" description_length="0" include_product_names_in_titles=1 include_by_line=0 include_price_line=1 store_or_collection="hightonridley" search_term="pillows" sort_type="popularity" sort_direction="desc" page_size="6" page_number="1" product_background_color="#ffffff" allow_interaction=1 show_visitor_search_form=0 tracking_code="ngrdz_blg_pplr_outr_spc" use_google_ad_code=9]

Now store and rotate up to 5 global slot messages

Now store up to five global slot messages and rotate them according to the priority you want!

What are slot messages?

Remember, a slot message is where a randomly chosen product grid slot / cell has its contents replaced with an optionally linked image.

<1 of 15>
<1 of 15>

What are global slot messages?

A global slot message is one displayed in all eligible product grids across your site in real time. You set them up in the NiftyGridZPro page of your Admin panel settings.

setting up global slot messages
admin settings page: setting up global slot messages

Eligible product grids are those:

  • with 4 or more products in them
  • ones without their own slot message in their shortcode
  • ones without slot messaging switched off in their shortcode

How does rotation work?

In real time…

It’s all about choosing which of the slot messages to display – and doing it in real time.

You see, whenever someone visits a post / page of yours with a NiftyGridZPro shortcode, then NiftyGridZPro gets kicked into action to do its stuff.

Part of that stuff is checking if Global Slot Messaging is switched on and, if it is – and this grid is elligible for them – then it randomly chooses a message and displays it in a randomly chosen position (slot) in the grid.

How a slot message is chosen (rotated)

Think of a lottery draw. Each of the 5 possible global slot messages has its own weighting, a number you give from 1 to 9. That’s the number of its tickets that get thrown into the hat.

Once all tickets are in the hat, one is drawn at random.

Say you have two global slot messages set up. You give both a weighting of 1. Both get one ticket in the hat, so there’s a 50/50 chance of each being drawn.

Say instead, you give a weighting of 1 to the first and 2 to the second. The first gets one ticket in the hat and the second gets two tickets. There’s now a 33% chance the first gets chosen and a 66% chance it’s the second that sees the light of day.

Simple! Now go up there ^^ and page through the grid to see the rotation of the global slot message. You’ll get a new randomly chosen one (rotation) every time a new page of the grid is shown.

At the time of writing, we’ve got got 4 messages set up, 3 are for Halloween, each with a weighting of 1, and the other one is the announcement about the release of V3 of NiftyGridZPro. That’s 8 tickets in the hat.

That last one we’ve weighted at 5 so it’s got a 5/8 chance of being shown each time. The others (flappy bats, frankenwalker and happy halloween) each have a 1/8 chance of being shown.

Setting up and using Global Slot Messaging

You can also think of it as message / promotion injection.

Here’s a 7 min 30 sec YouTube video taking you through the steps and showing the results. It covers:

  • Swtiching global slot messaging on and off
  • Setting up your own global slot message
  • How to prevent a particular post’s/page’s from showing global slot messages
  • How to set up a specific slot message using your post’s/page’s grid shortcode

Here it is:

If we’ve currently got global messaging switched on, you’ll see the current one in the grid below 🙂

<1 of 20+>
<1 of 20+>

Important points to remember

  • Global slot messages are real-time
  • Only eligible grids will display your global slot message
  • Product grids with fewer than four products in them aren’t eligible
  • Product grids with a slot message defined in their shortcodes aren’t eligible
  • Product grids that include use_message_slot=0 in their shortcode options aren’t eligible
  • The position a slot message displays in a grid is chosen randomly each time

Turn that on its head and you should get that every product grid that makes no mention of slot messages in its shortcode will automatically display the global one (as long it has four or more products in its grid).

Great feature – how can I use it?

The bare facts are that you get to define the web address of an image you want to display and the web address it gets linked to.

Armed with those two facts, here’s some obvious examples

  • Feature a different designer or brand store from time to time
  • Announce major Zazzle promotions and link either to Zazzle’s suggested landing page or to their coupon page
  • Feature your own specific product when you launch a new design
  • Provide an affiliate image/link for, say Amazon, or wherever else you might affiliate
  • Promote other pages of your own site
  • Make a short campaign in the run up to special holidays (hello “Halloween”!)
  • You could even sell that “ad space” to who you choose

We’d love to hear about ways you’d use it, so if you don’t mind sharing, drop off a comment 🙂