Query Strings

Use query strings in storefront URLs to enable debugging, manipulate images, troubleshoot theme files, etc., as listed in this topic. To set a query string, place a ? character at the end of a storefront URL, followed by the query string name, an = sign, and the value you want to set the query string to. When applying multiple query strings, separate the query strings with & characters.

Syntax:

yourSite.com/somePage?queryString1=0&queryString2="value"&queryString3=100

Storefront Debugging

Use the debugMode query string for general debugging purposes on your storefront. To enable debug mode, set the query string to true.

URL Parameter Example:

yourSite.com/somePage?debugMode=true

Note:  While useful during development, ensure debug mode is off on production sandboxes.

Theme Debugging

Use the mz_debugflags query string for theme debugging purposes. This query string provides debug options that allow you to readily view the files Kibo eCommerce is generating for your theme. You can apply the debug options one at a time or in multiples, separated by commas.

URL Parameter Example:

yourSite.com/somPage?mz_debugflags=disablecdn,unminified,showerrors

Field Description
disablecdn Routes image, CSS, and JavaScript files through the primary host instead of the CDN. This option is useful for determining whether CDN caching is responsible for failing to display updates or causing other unexpected behavior.
unminified Disables CSS minification for easier troubleshooting of generated CSS files.
showerrors Displays theme parsing errors.
none Reverts all options to default, non-debugging behavior.Note:  While useful during development, make sure to disable all the debugging flags on production sandboxes to prevent performance issues.

CDN Image Manipulation

To process an image hosted on the Kibo eCommerce CDN, append these query strings to the image path after a ? character and separated by & characters.

Note:  To avoid incorrect image rendering, do not apply the image manipulation fields to images that contain a dimension greater than 30,000 pixels in length.

URL Parameter Example:

http://cdn.mozu.com/22440-m1/cms/files/filename?max=500&quality=75&crop=10,10,-10,-10

Field Description
max Specifies a pixel limitation for the largest side of an image.
maxWidth Specifies a pixel limitation for the width of the image, preserving the aspect ratio if the image needs resizing.
maxHeight Specifies a pixel limitation for the height of the image, preserving the aspect ratio if the image needs resizing.
width Specifies an exact width dimension for the image, in pixels.
size Same as width. Provides backwards-compatibility for an earlier syntax.
height Specifies an exact height dimension for the image, in pixels.
crop

Usage: crop=x1,y1,x2,y2 in URLs and crop="x1,y1,x2,y2" in the make_url tag.

Crops the image based on the specified coordinates. The reference point for positive coordinates is the top or left side of the image, and the reference point for negative coordinates is the bottom or right side of the image.

You can use this field to easily crop an equal amount of pixels from every edge of the image. For example, crop=10,10,-10,-10 removes 10 pixels from all edges of the image (crop=0,0,0,0 leaves the image uncropped).

You can also use this field to specify a subset of the image. For example, crop=150,-300,-150,300 crops the following image as shown.

Note:  Using positive or negative coordinates is up to you. For example, you can crop the same subset of the example image using coordinates that are all positive, all negative, or a different combination from the one shown in the example, such as crop=+,+,-,-.

The only thing to remember is that you must always specify x2 to the right of x1 and y2 to the bottom of y1, otherwise no cropping takes effect.
quality Adjusts the image compression for JPEG files (other image types do not support this field). Accepts values from 0-100, where 100 = highest quality, least compression.