Scope General Manual

Overview  /  Options  /  Installation

Overview

Scope is a simple but powerful product viewer for Shopify. Packed with three distinct ways to show off your high-resolution images, Scope allows your customers to zoom, expand and explore your products in ways that most shops do not.

Scope displays a distinct yet unobtrusive magnifying glass icon when hovering over product images, inviting your customers to zoom in.

zoom_icon

Each main product image also feature a “view full-screen” icon, nestled into the image’s top right corner.

full_screen_icon

Here’s an example of a zoomed product image.

Screen Shot 2013-12-10 at 2.51.41 PM

Options

Three lightbox layouts

Anchored modal: This modal viewer is anchored to the top of the page. Image widths are restricted to the width of the modal container, but image heights are unrestricted.

Floating modal: This modal viewer floats in the center of the screen, and restricts both the height and width of product images, so that they are always completely in view no matter what size screen they are being viewed on.

Simple lightbox: This no-frills lightbox provides the maximum amount of height and width for your images, keeping them completely in view regardless of window size.

Invert overlay background

When enabled, the translucent background behind the modal viewer will switch from dark (80% black) to light (80% white).

Invert modal background

When enabled, the modal viewer’s background will switch from dark (black) to light (white).

Show captions in modal

When enabled, shows the alt text for each image as an image caption. If no alt text is provided, the product title will be displayed as the image caption.

Modal padding

Denotes the amount of white space surrounding the main image and thumbnails in modal view.

Note: This option only applies to the Anchored and Floating modals.

Zoom image size

Large: Zoomed images have a max-width of 1024px.

High resolution: Zoomed images have a max-width of 2048px.

Note: Zoomed images must be at least 1.4 times wider than the product image area for the zoom functionality to be triggered (e.g., if you product image area is 500px wide, your uploaded image must be at least 700px wide).

Thumbnail position

Placement of thumbnails in relation to the main product image.

Thumbnail spacing

Denotes the pixel value of white space separating each thumbnail, as well as the pixel value of white space separating thumbnails from the main product image. Note: the minimum distance between thumbnails and the main product image is 5 pixels.

Embed padding

Denotes the amount of white space, equal to the value entered, around the Scope app on your product page.

Installation

We’ve prepared specific installation instructions for a bevy of themes, and will continue to add to the list, but, if you cannot find your theme’s instructions in our list, the installation procedure is as simple as heading into your template editor, and:

  1. Opening your theme.liquid layout file.
  2. Inserting {{ 'scope.css' | asset_url | script_tag }} just before the closing </head> tag.
  3. Inserting {{ 'scope.js' | asset_url | script_tag }} just before the closing </body> tag.
  4. Opening your product.liquid template.
  5. Replacing your current product image area with {% include 'scope' %}.

We recognize that the last step of this process can be pretty tricky, and welcome any requests for installation help to support@pixelunion.net. Just be sure to also send an admin invite to your shop, so that we have access to your theme code.

Note: Admin invites can be sent via the Account page of your Shopify backend, and should also be addressed to support@pixelunion.net