Theme documentation
Hopscotch
A playful, colourful theme for children’s brands: toys, kids’ clothing and baby goods. Built to help parents find the right age or size in one tap.
Need help? Send us a message and we reply within two business days.
Getting started
- In the Shopify Theme Store, open Hopscotch and click Try theme. The theme is added to Online Store → Themes in your Shopify admin.
- Click Customize to open the theme editor. Everything in this guide is done there, without code.
- Choose a style, set your colours and fonts under Theme settings, then build the home page section by section.
- When you are happy, click Publish on the theme. You pay for the theme only when you publish it.
The three styles
Hopscotch comes with three styles. They share the same sections and settings and differ in colours and mood.
- Hopscotch: Sky blue and red. Made for toy shops.
- Sunbeam: Sunshine yellow and red. Made for kids’ clothing.
- Mitten: Warm peach and berry. Made for baby brands and knitwear.
To switch, open Theme settings (the cog icon) in the theme editor, find Theme style and choose Change theme style.
Build the home page
The demo home pages use these sections, in this order. Add them from the theme editor with Add section.
Hopscotch: Hero → Number tiles → Featured collection → Trust band → Steps banner → Blog posts → Email signup
Sunbeam: Hero → Number tiles → Featured collection → Trust band → Steps banner → Blog posts → Email signup
Mitten: Hero → Number tiles → Featured collection → Trust band → Steps banner → Blog posts → Email signup
Shop by age, size or month
Add the Number tiles section and one Tile block for each group. Type the number in Big text (for example 0–1 or 6+), the unit in Small text (years, months) and choose a collection in Link. Create one collection per group first, for example with a product tag such as age-0-1.
Age stickers on product cards
Product cards can show a small sticker with a value from a product metafield. In your Shopify admin go to Settings → Custom data → Products and add a definition of type Single line text, for example with the namespace and key custom.age. Fill it in on each product (for example “1–2 yrs”). Then open Theme settings → Product cards and type the same namespace and key in Sticker metafield.
Fact tiles on the product page
On the product template, add the Fact tiles block. It has four labels and four values. Type a value to show the same text on every product, or click the connect icon next to a value and choose a product metafield to show a different value for each product.
Explain something in three steps
Add the Steps banner section and one Step block per step. Use it for gift boxes, size swaps or how your subscription works. If you do not choose an image, the banner shows a drawn gift box.
Theme settings
Theme settings apply to the whole store. Open them with the cog icon in the theme editor.
Colors
| Setting | Type | Notes |
|---|---|---|
| Page | ||
| Background | Color | |
| Text and outlines | Color | |
| Cards and header | ||
| Background | Color | |
| Text | Color | |
| Color 1 | ||
| Background | Color | |
| Text | Color | |
| Color 2 | ||
| Background | Color | |
| Text | Color | |
| Color 3 | ||
| Background | Color | |
| Text | Color | |
| Color 4 | ||
| Background | Color | |
| Text | Color | |
| Buttons | ||
| Background | Color | |
| Text | Color | |
| Dark sections and footer | ||
| Background | Color | |
| Text | Color | |
| Shapes | ||
| Shape color 1 | Color | |
| Shape color 2 | Color | |
Typography
| Setting | Type | Notes |
|---|---|---|
| Headings | Font | |
| Heading size | Slider | From 80 to 130 %. |
| Body text | Font | |
| Body text size | Slider | From 14 to 20 px. |
Layout
| Setting | Type | Notes |
|---|---|---|
| Page width | Choice | Options: Standard, Wide. |
| Page margin | Slider | From 12 to 60 px. |
Outlines and corners
| Setting | Type | Notes |
|---|---|---|
| Outline thickness | Slider | From 1 to 4 px. |
| Sticker shadow size | Slider | From 0 to 8 px. |
| Button corner radius | Slider | From 0 to 40 px. |
| Card corner radius | Slider | From 0 to 36 px. |
| Input corner radius | Slider | From 0 to 40 px. |
Product cards
| Setting | Type | Notes |
|---|---|---|
| Sticker metafield | Text | A product metafield shown as a sticker on product cards, for example an age range. Write it as namespace.key. |
Social media
| Setting | Type | Notes |
|---|---|---|
| Text | https://instagram.com/shopify | |
| Text | https://facebook.com/shopify | |
| TikTok | Text | https://tiktok.com/@shopify |
| YouTube | Text | https://www.youtube.com/shopify |
| Text | https://pinterest.com/shopify | |
| X | Text | https://x.com/shopify |
Favicon
| Setting | Type | Notes |
|---|---|---|
| Favicon image | Image | Shown at 32 x 32 px in browser tabs. |
Header and footer
Announcement bar
A single line above the header for delivery thresholds, offers or opening hours.
| Setting | Type | Notes |
|---|---|---|
| Text | Text | |
| Link | Link | |
| Color | Choice | Options: Dark, Color 1, Color 2, Button color. |
Header
Logo, main menu, search, account and cart. Menus support up to three levels: a top-level item, a dropdown and one more level inside the dropdown.
| Setting | Type | Notes |
|---|---|---|
| Logo | Image | |
| Logo width | Slider | From 60 to 280 px. |
| Menu | Menu | Shown as a row of pills. Works well for ages, categories or occasions. |
| Give each menu pill its own color | Checkbox | |
| Customer account menu | Menu | Shown when customers select the account icon. |
| Keep the header visible while scrolling | Checkbox |
Footer
Your store name with a short text, menu and text columns, social icons, country and language selectors and payment icons.
| Setting | Type | Notes |
|---|---|---|
| Text under the store name | Text | |
| Show social media icons | Checkbox | Add your links in Theme settings > Social media. |
| Show Follow on Shop button | Checkbox | Shop Pay must be enabled for the button to show. |
| Show country/region selector | Checkbox | |
| Show language selector | Checkbox | |
| Show payment icons | Checkbox |
Block: Menu
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | Leave empty to use the menu name. |
| Menu | Menu |
Block: Text
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Text | Text |
Up to 4 blocks.
Sections
These sections can be added to the home page and to most other pages.
Hero
A full-colour first screen with a sticker label, a large heading, text and up to two buttons. Playful shapes are drawn around the text. You can switch them off or add an image.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Color 1, Color 2, Color 3, Color 4, Page background. |
| Show playful shapes | Checkbox | A sun, a hill and a few toys drawn in your shape colors. |
| Sticker above the heading | Text | |
| Heading | Text | |
| Text | Text | |
| Button label | Text | |
| Button link | Link | |
| Second button label | Text | |
| Second button link | Link | |
| Image | Image | Optional. Shown under the buttons in a sticker frame. |
Number tiles
Big tiles with a number or a short word. Use them to send shoppers to a collection by age, size or month.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text |
Block: Tile
| Setting | Type | Notes |
|---|---|---|
| Big text | Text | A number or a very short word, like 0–1 or 6+. |
| Small text | Text | |
| Description | Text | |
| Link | Link | |
| Color | Choice | Options: Color 1, Color 2, Color 3, Color 4, Card background. |
Up to 6 blocks.
Featured collection
A row of products from one collection, with a heading and a link to the full collection.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Collection | Collection | |
| Products to show | Slider | From 2 to 12. |
| Columns on desktop | Slider | From 2 to 5. |
| Link to the collection | Text |
Collection list
Colour tiles that link to your collections, each with a title and a short line of text.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text |
Block: Collection
| Setting | Type | Notes |
|---|---|---|
| Collection | Collection | |
| Title | Text | Shown when no collection is selected. |
| Short text | Text | Leave empty to use the collection description. |
| Color | Choice | Options: Color 1, Color 2, Color 3, Color 4, Card background, Dark. |
| Show collection image | Checkbox |
Up to 6 blocks.
Trust band
A band of short reasons to buy from you, each with an icon, a heading and a sentence.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Card background, Page background, Color 1, Color 2. |
Block: Reason
| Setting | Type | Notes |
|---|---|---|
| Icon | Choice | Options: Check mark, Drop, Return arrow, Heart, Star, Delivery truck. |
| Heading | Text | |
| Text | Text |
Up to 4 blocks.
Steps banner
A coloured banner that explains something in numbered steps, with a button and an optional image.
| Setting | Type | Notes |
|---|---|---|
| Color | Choice | Options: Color 2, Color 1, Color 3, Color 4, Card background. |
| Sticker above the heading | Text | |
| Heading | Text | |
| Button label | Text | |
| Button link | Link | |
| Image | Image | Optional. Replaces the drawn gift box. |
Block: Step
| Setting | Type | Notes |
|---|---|---|
| Text | Text |
Up to 5 blocks.
Image with text
An image next to a heading, text, a short list of points and a button. Use it to tell your story.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Dark, Page background, Card background, Color 1, Color 2, Color 3, Color 4. |
| Image | Image | |
| Image position on desktop | Choice | Options: Left, Right. |
| Heading | Text | |
| Text | Text | |
| Button label | Text | |
| Button link | Link |
Block: Point
| Setting | Type | Notes |
|---|---|---|
| Text | Text |
Up to 5 blocks.
Blog posts
The latest posts from one blog, with image and title.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Blog | Blog | |
| Posts to show | Slider | From 2 to 6. |
| Link to the blog | Text |
Email signup
An email signup box. New subscribers appear under Customers in your Shopify admin.
| Setting | Type | Notes |
|---|---|---|
| Color | Choice | Options: Color 1, Color 2, Color 3, Color 4, Card background. |
| Heading | Text | |
| Text | Text | |
| Button label | Text |
Contact form
A contact form, used on the Contact page. Messages are sent to the sender email of your store.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Show phone field | Checkbox | |
| Button label | Text |
Custom Liquid
A place for your own Liquid or HTML, for example a snippet from an app.
| Setting | Type | Notes |
|---|---|---|
| Liquid code | Code | Add app snippets or other code to create advanced customizations. |
Custom section
An empty section that accepts theme blocks, for simple custom layouts.
| Setting | Type | Notes |
|---|---|---|
| Background | Image |
Product, collection and other pages
Each page type has its own template. Open one from the page selector at the top of the theme editor.
Product
The product page. Its blocks can be reordered, hidden or removed in the theme editor.
| Setting | Type | Notes |
|---|---|---|
| Image fit | Choice | Options: Fill the frame, Show the whole image. |
Block: Vendor (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Title (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Price (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Description (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Variant picker (up to 1)
This block has no settings. It shows the matching part of the product.
Block: Buy buttons (up to 1)
| Setting | Type | Notes |
|---|---|---|
| Show quantity selector | Checkbox | |
| Show dynamic checkout buttons | Checkbox | Customers see their preferred payment method, like PayPal or Apple Pay. |
| Show pickup availability | Checkbox |
Block: Text
| Setting | Type | Notes |
|---|---|---|
| Text | Text |
Block: Fact tiles (up to 1)
| Setting | Type | Notes |
|---|---|---|
| Label 1 | Text | |
| Value 1 | Text | Connect a product metafield to show a different value for each product. |
| Label 2 | Text | |
| Value 2 | Text | Connect a product metafield to show a different value for each product. |
| Label 3 | Text | |
| Value 3 | Text | Connect a product metafield to show a different value for each product. |
| Label 4 | Text | |
| Value 4 | Text | Connect a product metafield to show a different value for each product. |
Block: Collapsible row
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Content | Text | |
| Content from a page | page | Replaces the content above. |
| Open by default | Checkbox |
Block: Custom Liquid
| Setting | Type | Notes |
|---|---|---|
| Liquid code | Code | Add app snippets or other code to create advanced customizations. |
This section also accepts app blocks.
Related products
Products that Shopify recommends for the product being viewed.
| Setting | Type | Notes |
|---|---|---|
| Heading | Text | |
| Products to show | Slider | From 2 to 8. |
| Columns on desktop | Slider | From 2 to 5. |
Collection
The collection page: a colour header with the collection description, then filters, sorting and the product grid.
| Setting | Type | Notes |
|---|---|---|
| Header color | Choice | Options: Color 1, Color 2, Color 3, Color 4, Page background, Dark. |
| Show collection description | Checkbox | |
| Products per page | Slider | From 8 to 36. |
| Columns on desktop | Slider | From 2 to 4. |
| Enable filtering | Checkbox | Customize filters with the Shopify Search & Discovery app. |
| Enable sorting | Checkbox |
Collections grid
The page that lists all your collections.
| Setting | Type | Notes |
|---|---|---|
| Show collection images | Checkbox | |
| Collections per page | Slider | From 6 to 30. |
Cart
The cart page, with an optional free shipping message, an order note and dynamic checkout buttons.
| Setting | Type | Notes |
|---|---|---|
| Free shipping from | Number | Order value in your store currency. Leave empty to hide the progress bar. It does not create the shipping rate; set that up in Settings > Shipping and delivery. |
| Show order note | Checkbox | |
| Show dynamic checkout buttons | Checkbox |
Blog
The blog page, with tag links and pagination.
| Setting | Type | Notes |
|---|---|---|
| Header color | Choice | Options: Color 1, Color 2, Color 3, Color 4, Page background, Dark. |
| Show tag links | Checkbox | |
| Posts per page | Slider | From 3 to 24. |
Article
A single blog post, with comments if you have them enabled in your Shopify admin.
| Setting | Type | Notes |
|---|---|---|
| Header color | Choice | Options: Color 1, Color 2, Color 3, Color 4, Page background, Dark. |
| Show author | Checkbox |
Search
The search results page.
| Setting | Type | Notes |
|---|---|---|
| Header color | Choice | Options: Color 1, Color 2, Color 3, Color 4, Page background. |
| Results per page | Slider | From 8 to 36. |
| Columns on desktop | Slider | From 2 to 4. |
Predictive search
The suggestions that appear while a shopper types in the search field. It has no settings.
Page
A standard page. It shows the page title and content and has no settings.
Not found
The page shown when an address does not exist.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Color 1, Color 2, Color 3, Color 4, Page background, Dark. |
Password
The page shown while your store is password protected.
| Setting | Type | Notes |
|---|---|---|
| Background | Choice | Options: Color 1, Color 2, Color 3, Color 4, Page background, Dark. |
| Heading | Text | |
| Show email signup | Checkbox |
Gift card
The page a customer sees after buying a gift card: balance, code, a QR code and an Add to Apple Wallet button. It has no settings.
Frequently asked questions
The age sticker does not show on my product cards.
Check three things: the product has a value in the metafield, the metafield type is Single line text, and Theme settings → Product cards → Sticker metafield contains the same namespace and key, such as custom.age.
Can I switch off the shapes in the hero?
Yes. Open the Hero section and untick Show playful shapes. You can also change the two shape colours in Theme settings → Colors.
Can every menu pill have its own colour?
Yes. Open the Header section and tick Give each menu pill its own color. The pills then cycle through your four highlight colours.
How do I switch between the three styles?
In the theme editor, open Theme settings (the cog icon), find Theme style and choose Change theme style. Switching style changes colours and fonts. It does not change your sections or your content.
How do I make a dropdown menu?
In your Shopify admin go to Content → Menus and open your main menu. Drag a menu item slightly to the right under another item to nest it. The theme shows up to three levels.
Why do some cards say “Choose options” instead of “Quick add”?
Quick add appears on products with a single variant, because they can go straight to the cart. Products with sizes, colours or other options show Choose options and open the product page. Sold-out products show View.
The vendor name does not show on my product cards.
Cards show the vendor only when it is different from your store name. If every product is made by you, the line is hidden to keep the cards clean.
How do I change wording such as “Add to cart”?
In your Shopify admin go to Online Store → Themes, click the three dots next to the theme and choose Edit default theme content. Search for the text and type your own.
Can I use the theme in another language?
Yes. The storefront text can be translated with the free Shopify Translate & Adapt app, and you can edit any phrase under Edit default theme content.
How do I hide the author on blog posts?
Open a blog post in the theme editor, select the blog post section and untick Show author.
How do I add the Contact page?
Create a page in Online Store → Pages and choose the template contact. A new store already has a Contact page that uses it.
Does the theme work with apps?
Yes. The product page accepts app blocks, and every page accepts app embeds. We cannot fix problems inside an app, but we will tell you if the theme is the cause.
How do I update the theme?
When a new version is available, your Shopify admin shows a notice on the theme under Online Store → Themes. The update keeps the changes you made in the theme editor. Changes made by editing code are not carried over.
Can I edit the code?
You can, but please duplicate the theme first (three dots → Duplicate) and work on the copy. Code changes are not covered by support. For custom work we suggest hiring a Shopify Partner.
Support policy
We answer every message sent through the support form within two business days, Monday to Friday.
Included with the theme: answers to questions about the theme and its settings, and fixes for bugs in the theme.
Not included: custom design or code changes, setting up your store or your content, and problems caused by third-party apps or by edited theme code. For this kind of work we suggest hiring a Shopify Partner.
Before you edit any code, duplicate your theme and work on the copy.
Changelog
Version 1.0.0: first release.