Source: shopify.dev/docs · Latest
Theme Development
Theme Development
Checklist
Use this checklist while building and testing your theme. Run all tests in both the theme editor and the storefront.
Before you start: Populate your store with Shopify's benchmark data and configure features like local pickup, unit pricing, selling plans, and Shop Pay Installments. Refer to the Testing assets guide for setup instructions.
01
Home Page
Add all sections below, then verify they work together. Build up to 25 total sections on the page.
- ✓Add 3 slideshow sections
- ✓Add 5 featured product sections — 3 of which are the same product
- ✓Add 3 featured collection sections (different collections)
- ✓Add 1 collection list section
- ✓Add 3 image with text sections
- ✓Add 1 newsletter section
- ✓Add 1 rich text section
- ✓Add 1 blog post section
- ✓Add 2 video sections (if applicable)
- ✓Add additional sections until the home page has 25 sections total
02
Header
Verify: store name/logo displays and is accessible, header icons/links work, navigation functions and titles are fully visible.
Logo & Store Name
- ✓Long store name fallback (30–40 characters, no spaces)
- ✓Logo — 16:9 aspect ratio (portrait & landscape)
- ✓Logo — 4:3 aspect ratio
- ✓Logo — 3:2 aspect ratio
- ✓Logo — 1:1 aspect ratio
- ✓Logo — transparent background PNG image
- ✓Logo — test scaling behavior
- ✓Logo — test different positions and alignments (if applicable)
Navigation
- ✓Long navigation menu (10+ menu items)
- ✓Single-level navigation
- ✓Two-level nested navigation
- ✓Three-level nested navigation
- ✓Long level-one menu item titles (30–60 characters)
- ✓Long level-two menu item titles (30–60 characters)
- ✓Long level-three menu item titles (30–60 characters)
- ✓Mega menu (if applicable)
03
Footer
- ✓Add 5 columns/blocks (or the maximum number of blocks)
- ✓Add multiple menus
- ✓Add a long navigation menu (10+ menu items)
- ✓Add menu items with long titles (30–60 characters)
- ✓Add all social links
- ✓Newsletter form — input text, submit, error handling, success message
04
Sections
Announcement Bar
- ✓Plain text — 60–100 characters (or max limit)
- ✓Rich text — single, double, triple line breaks; paragraph (40–50 words)
- ✓Internal + external links, same/new window, link styling indicates clickable
Slideshow
- ✓Add 3 slideshow sections; add max slides (or 10 if no limit)
- ✓Image sizes — 2048px retina, 1024px standard widescreen
- ✓Aspect ratios at 72ppi — 16:9, 4:3, 3:2, 1:1 (portrait & landscape)
- ✓Video (if applicable)
- ✓Text — heading, subheading (60 chars), description, rich text variants
- ✓Links — internal, external, same/new window, styling indicates clickable
- ✓Button labels — single word (30 chars), multi-word (30 chars); links internal/external, same/new window
- ✓Autoplay — multiple slideshows autoplay correctly; controls work during autoplay
Featured Product
- ✓Add 5 featured product sections, 3 being the same product
- ✓Select different variants for one of the duplicated products
- ✓Add one duplicated product to cart — verify it updates correctly
- ✓Run product page tests (see Section 05)
Featured Collection
- ✓Add 3 featured collection sections using collections of varying sizes
- ✓Verify all sections work and multiples don't break the page
- ✓Run collection page tests (see Section 05)
Collection List
- ✓Max collections (or 10 if no limit), long title, single-word title (30 chars), multi-word title (30 chars)
- ✓Varying image aspect ratios — 16:9, 4:3, 3:2, 1:1 (portrait & landscape)
- ✓One collection with no featured image — verify fallback to first product image or title
Image With Text
- ✓Add 3 image with text sections
- ✓Text — heading, subheading (60 chars), description, rich text variants
- ✓Links — internal, external, same/new window, styling indicates clickable
- ✓Image sizes — 2048px retina, 1024px standard; aspect ratios 16:9, 4:3, 3:2, 1:1 (portrait & landscape)
Newsletter
- ✓Input text, submit, error handling, success message
- ✓Description — plain text (60–100 chars) or rich text with line breaks and paragraph
- ✓Links — internal, external, same/new window, styling indicates clickable
Rich Text
- ✓Add heading, subheading (60 chars), description, multiple paragraphs (1000+ chars)
- ✓Links — internal, external, same/new window, styling indicates clickable
Blog Posts
- ✓Blog post images — 16:9, 4:3, 3:2, 1:1 aspect ratios
- ✓Long title, single-word title (30 chars), multi-word title (30 chars)
Video
- ✓YouTube video — controls present and functional
- ✓Vimeo video
- ✓MP4 video (if applicable)
- ✓Adding multiple video sections doesn't break the page
Unique Sections
- ✓Add 2–3 instances of the same unique section — verify page doesn't break
- ✓Text — heading, subheading, description, rich text variants
- ✓Links — internal, external, same/new window, styling indicates clickable
- ✓Image sizes — 2048px retina, 1024px standard; aspect ratios 16:9, 4:3, 3:2, 1:1 (portrait & landscape)
05
Pages
Password Page
- ✓Long store name fallback (30–40 chars, no spaces) and with hyphens
- ✓Logo — 16:9, 4:3, 3:2, 1:1 ratios (portrait & landscape), transparent PNG, scales appropriately
- ✓Password form — fill field, submit, error handling, success message
- ✓Password message — 500+ characters
- ✓Background images — 2048px retina, 1024px standard; 16:9, 4:3, 3:2, 1:1 ratios
Collection List Page
- ✓Long title, single-word title (30 chars), multi-word title (30 chars)
- ✓Aspect ratios — 16:9, 4:3, 3:2, 1:1 (portrait & landscape)
- ✓Collection with no featured image — verify fallback displays correctly
Collection Page
- ✓Test group filtering; single-word tag (30 chars), long list of tags (20+)
- ✓Verify limited products on initial load
- ✓Pagination — truncates on 5+ pages; View more; infinite scrolling (if applicable)
- ✓Product title — single word (30 chars), multi-word (30–60 chars)
- ✓Product vendor — single word (30 chars), multi-word (30–60 chars)
- ✓Grid with varying image ratios — 16:9, 4:3, 3:2, 1:1 (portrait & landscape)
- ✓Add to cart disabled/replaced on sold out or unavailable variant
- ✓Sold out badge or message displays when applicable
Product Page
Verify: customer can add selected variant to cart, variant info updates dynamically, customers can't add more than available quantity.
Product Configurations to Test
- ✓Single product (no variants)
- ✓On-sale product
- ✓Product with one option
- ✓Product with more than 1 option including out-of-stock and unavailable variants
- ✓Product with three options
- ✓Product with 100 variants
- ✓Product with no image
- ✓Product with varying media (image, video, 3D model, AR, MP4)
- ✓Product with unit price
- ✓Product title — single word (30 chars), multi-word (30–60 chars)
- ✓Variant selection updates: price, media, SKU, unit price, Shop Pay Installments banner, local pickup banner, inventory quantity
- ✓Add to cart and accelerated checkout buttons disabled on sold out / unavailable variants
- ✓Variant selectors cross out or disable sold out / unavailable variants
- ✓Product images — no image state, ratios 16:9 / 4:3 / 3:2 / 1:1, PNG, image zoom (if applicable)
- ✓Color swatches — option to disable, clear instructions for custom swatch upload
- ✓Product description — 1000+ chars, links (internal/external, same/new window), images display as in RTE
- ✓Error message when adding more than available inventory
Blog Page
- ✓Grid with varying image ratios — 16:9, 4:3, 3:2, 1:1 (portrait & landscape)
- ✓Title, excerpt, author, date, and comment count visible per post
- ✓Blog filtering — single-word tag, long tag list (20+); combining tags doesn't break page
- ✓Pagination — only 5 pages on initial load; View more; infinite scrolling (if applicable)
Blog Post / Article Page
- ✓Content — multiple paragraphs (1000+ chars), links (internal/external, same/new window), images display as in RTE
- ✓Comments — input, submit, error handling, success message; paginate after limit
- ✓Article image ratios — 16:9, 4:3, 3:2, 1:1 (portrait & landscape)
Cart (Page, Modal, or Drawer)
- ✓Add enough products to trigger scrolling — all products remain fully visible
- ✓Setting quantity to 0 removes the product
- ✓Error message when adding more than available inventory
- ✓Automatic discounts update dynamically; cart notes work correctly
Search Page
- ✓Limited results on initial load
- ✓Pagination — truncates on 5+ pages; View more; infinite scrolling (if applicable)
- ✓Filtering, list and grid view (if applicable)
- ✓No results state — empty/error message shown
Pages (Generic Template)
- ✓Page title — single word (30 chars), multi-word (30–60 chars)
- ✓Multiple paragraphs (3000+ characters)
- ✓Links — internal, external, same/new window, styling indicates clickable
- ✓Images display as they appear in the RTE; repeat testing for all existing page templates
Pages (Contact Form Template)
- ✓Input text, test mandatory fields, submit the form
- ✓Error detection and handling; submission success message
Gift Card Page
- ✓Long store name fallback (30–40 chars, no spaces) and with hyphens
- ✓Logo — 16:9, 4:3, 3:2, 1:1 ratios (portrait & landscape), transparent PNG, scales appropriately
- ✓Gift card code is fully visible and not cut off
06
Link Sharing
- ✓Share a store link on Facebook — verify sharing image appears (use Facebook Sharing Debugger)
- ✓Share on Twitter/X — verify card and image appear (use Twitter Card Validator)
- ✓Share on other social platforms — verify thumbnail, title, and description render correctly
07
Local Pickup
Prepare your store for local pickup before testing. Verify the pickup banner changes dynamically when a new variant is selected.
Variant 1 — Available at 5 locations
- ✓Pickup banner appears
- ✓"Check availability at other stores" shows all locations; can scroll to see all info
Variant 2 — Available at only 1 location
- ✓Pickup banner appears
- ✓Link text updates to "View store information"
Variant 3 — Available at 2 locations, sold out at 1
- ✓Pickup banner appears and indicates available/unavailable status
- ✓"Check availability at other stores" link is present; modal shows only 2 locations
Variant 4 — Only at a location that doesn't offer pickup
- ✓Pickup banner is removed
Variant 5 — Sold out at all locations
- ✓Pickup banner is removed
- ✓Add to cart button changes to "Sold out"
- ✓Pickup banner updates dynamically when selecting different variants
08
Unit Pricing
- ✓Unit prices change dynamically when a variant is selected
- ✓Unit price appears on the product page
- ✓Unit price appears on collection page product cards
- ✓Unit price appears in the cart (drawer, page, or popup)
- ✓Unit price appears on the customer order page
09
Rich Media
3D / AR
- ✓Can view and move 3D models on desktop and mobile
- ✓"View in your space" AR button appears on mobile devices
- ✓Can view both AR objects on mobile
Video (YouTube, Vimeo, MP4)
- ✓Video controls are accessible; can mute/unmute; can play/pause
- ✓Variant display updates when the associated variant is selected
Collection Page Product Cards
- ✓YouTube, Vimeo, MP4, and 3D model media — none break the product card layout on collection page
10
Selling Plans
Prepare your store for selling plans before testing.
- ✓Applied selling plans appear on the cart page
- ✓Applied selling plans appear on the customer order page