Canvas Documentation

1. Getting Started

Canvas is a visual design workspace for Shopify storefronts. Compose each image, video, text layer, crop, link, and stacking decision on a true artboard, connect the work to Shopify content, then publish through your theme without editing Liquid.

1. Open the Canvas app in your Shopify admin
2. Click Create canvas to begin from a blank artboard, or optionally bring in an existing composition
3. Name the project for its theme destination (e.g. "homepage")
4. Choose a canvas mode — Stage, Atmosphere, or Full Page
5. Select which page it appears on (Homepage, About, Collection, or Custom)
6. Add images from the sidebar — Products, Files, or Upload
7. Drag to reposition, resize by pulling the corner handle
8. Click Publish when you're happy with the layout

2. Adding Canvas to Your Theme

After publishing, you need to add the Canvas block to your Shopify theme once. After that, all future updates publish instantly.

1. Go to Online Store → Themes → Customize
2. Navigate to the page where you want Canvas to appear
3. Click Add section → Apps → Canvas
4. In the Canvas block settings, enter your canvas name exactly as you created it (e.g. "homepage")
5. Optionally set a background color
6. Click Save — your layout is now live

Tip: Canvas works with any OS 2.0 theme. The canvas name is case-sensitive and must match exactly.

3. Canvas Modes

When creating a canvas, choose one of three modes that controls how your layout interacts with the page:

• Stage — Your canvas owns a defined zone on the page with a fixed height. Desktop and mobile get separate layouts. Best for hero sections, lookbooks, and dedicated editorial areas.
• Atmosphere — Images float above your existing page content as an overlay. Perfect for adding visual depth without changing your theme layout.
• Full Page — The entire page becomes your canvas. A blank, full-height space to compose freely. Ideal for standalone editorial pages or visual storytelling.

You choose the mode when creating a canvas. The mode is stored with your layout and affects how the theme block renders on the storefront.

4. Block Controls

Every image on your canvas is a block. Click any block to select it and reveal controls in the left sidebar:

• Drag — Click and drag to reposition anywhere on the canvas
• Resize — Drag the handle in the bottom-right corner, or use the Size slider
• Rotation — Tilt images from -45° to 45° for an editorial scatter look
• Opacity — Fade images from 20% to 100% transparency
• Layer order — Use Bring forward / Send back to control which blocks appear in front
• Delete — Click the X on the hover toolbar or the delete button in the sidebar

5. Hover Effects

Add interactive hover states to your blocks. Choose from four modes in the Hover section of block controls:

• Ghost — A subtle white overlay fades in at 15% opacity. Clean and minimal.
• Lift — The block scales up slightly and gains a shadow, creating a "lift off the page" feel.
• Shop — A product card slides up showing product name, price, and "Shop →". Only available for product links.
• Reveal — Crossfades to a second image on hover. Great for before/after or color variants.

Smart defaults: Product links default to Shop, other links to Ghost, no link to None.

6. Linking Blocks

Make any block clickable by setting a link destination:

• Product page — Link to a product by handle (e.g. /products/my-product)
• Collection page — Link to a collection (e.g. /collections/my-collection)
• Pinterest — Link to a pin or board. Opens in new tab.
• ShopMy — Link to a ShopMy affiliate page. Opens in new tab.
• External URL — Any https:// URL. Opens in new tab.
• Lightbox — Opens the image fullscreen in an overlay.

7. Styling & Borders

Fine-tune the look of each block:

• Border width — 0 to 8px
• Border color — Any hex color
• Corner radius — 0 to 24px
• Opacity — 20% to 100%

8. Desktop & Mobile Layouts

Canvas stores separate positions for desktop and mobile. Use the Desktop / Mobile toggle to switch views.

• Desktop — Full-width canvas for large screens.
• Mobile — Constrained to 390px phone frame with independent positioning.

Auto-layout: First mobile switch auto-generates a stacked layout sorted by desktop Y position.

Mobile layout activates below 749px screen width.

9. Media Manager

The Media page gives you a dedicated view of all images in your Shopify Files library:

• Browse a 4-column grid of all uploaded images
• Upload new images directly to Shopify Files
• Edit alt text, copy CDN URLs, delete images
• Add any image directly to an existing canvas

10. Gallery Templates

Pre-designed canvas templates to help you get started:

• Homepage scatter — Editorial image scatter
• Minimal scatter — Clean, spaced-out layout
• Bold overlap — Overlapping images for impact
• Product focus — Product photography layout
• Story portrait — Vertical narrative layout
• Summer editorial — Seasonal mood board

11. Preview Mode

Toggle Preview to see how your canvas looks on the live storefront:

• Fetches actual storefront HTML behind the canvas
• Hides sidebar, block overlays, and selection
• Shows "CURRENT LIVE SITE" badge for comparison
• Disables block interactions

12. Publishing & Versions

Auto-save: Every 2 seconds as you work.

Publishing: Click Publish to push live. Shows a diff summary first.

Version history: Last 3 published versions kept. Restore any from the canvas list.

Community sharing: Optional checkbox in the publish dialog.

13. Plans & Billing

• Seven-day trial — Full creative and publishing access, plus five local image generations and five local video generations in Canvas Desktop; no card required
• Canvas ($19.99/mo) — Unlimited canvases and blocks, Shopify publishing, the desktop companion, and access to local image and video generation
• Local-only AI — Prompts and source media are processed by Canvas Desktop; the Canvas web app does not invoke hosted models

Billing managed through Shopify. Upgrade, downgrade, or cancel anytime.

14. FAQ & Troubleshooting

15. Support

We're here to help. Reach out and we'll respond within one business day.

• Support: Available through the Canvas app.
• Include: Your store URL, canvas name, and a description of the issue
• Screenshots help us resolve issues faster

Visit the Canvas support portal or email howdy@tarx.com.