Formgong

Scamper theme documentation

Scamper is a Shopify theme for small product brands, starting with pet stores. This guide covers version 1.1.1. Stuck, or something here doesn't match your store? Contact Scamper support. We reply within 2 business days.

Getting started

Install Scamper

  1. Download Scamper-1.1.1.zip from the Scamper page. Don't unzip it: Shopify takes the file as it is.
  2. In Shopify admin, go to Online Store → Themes, then Add theme → Upload zip file, and choose Scamper-1.1.1.zip.
  3. Scamper appears in your theme library. Click Customize to open the theme editor, and Publish when you're ready. Your current theme stays in the library, so you can switch back.

What you get and what you don't

Shopify installs the theme files and settings only. You get:

  • Scamper's layout, colors, fonts and settings.
  • A home page with these sections, in this order: Image banner, Scrolling text, Collection tiles, Featured products, Image with text, Featured product, Shop the set, Testimonials and Email signup. Replace their sample text with your own.
  • A product page with the Product information and Related products sections.

You don't get the demo store's products, photos, collections, pages, menus, blog posts or discounts. Shopify never copies store content along with a theme.

Until you add your own content:

  • Image banner and Image with text show placeholder drawings until you pick images.
  • Collection tiles show placeholders until you pick collections. Shop the set shows empty slots until you pick products.
  • Featured products fills itself: until you pick a collection, it shows products from your whole catalog. Featured product shows your first product until you pick one.
  • Testimonials shows placeholder quotes. Replace them with real ones.

Before you edit code

Most changes need no code. Use the theme editor. If you do edit the theme code, duplicate the theme first (Online Store → Themes, then Duplicate in the theme's menu), so you have a copy to go back to. Code edits are not carried over when you update Scamper. For custom work, we recommend hiring a Shopify Partner.

Theme settings

Open the theme editor and choose Theme settings. Scamper's settings are in these groups.

Logo and favicon

  • Logo: shown in the header and on the password page. Without a logo, your store name shows as text.
  • Logo width: from 60 to 300 px.
  • Favicon: the small icon in the browser tab. Use a 32 x 32 px PNG.

Colors

Scamper uses color schemes. A scheme is a set of colors that a section uses together. Scamper comes with five. Edit them here or add your own, then pick one in each section's Color scheme setting. A change to a scheme shows everywhere that scheme is used.

Each scheme has these colors:

  • Background and Text.
  • Secondary text: less important text, like notes and captions.
  • Card background and Card text: product card wells and panels. Product cards mix Card background with the scheme's other colors, so cards next to each other get different tints.
  • Button background and Button label: main buttons.
  • Accent: links and the outline that shows keyboard focus.
  • Border: outlines, for example on secondary buttons and tabs.

Keep enough contrast between text and background colors, so everyone can read your store.

Typography

  • Heading font and Body font: pick any font from Shopify's font library.
  • Heading size: from 80% to 130%. Scales every heading.
  • Body text size: from 90% to 120%.

Layout

  • Page width: Narrow (1200 px), Standard (1320 px) or Wide (1600 px). How wide the content gets on large screens.
  • Card corner radius: from 0 to 36 px. Use 0 for square corners.
  • Button shape: Pill, Rounded or Square.
  • Show scroll effects: parallax, image reveals and slide-ins as customers scroll, plus a short animation when a product goes into the cart. Scamper turns them off by itself for customers whose device asks for reduced motion.

Shopper profiles

  • Show shopper profiles in the header: turns the "Shopping for" picker on or off.
  • Heading: the picker's label. The default is "Shopping for".
  • Label for showing everything: the choice that shows the whole store. The default is "Everyone".
  • Profile 1 to Profile 4: each has a Name, a Product tag and an Icon.

How profiles work and how to set them up: Shopper profiles.

Cart

  • Cart type: Drawer opens a side panel when a customer adds a product. Page takes them to the cart page.
  • Show cart note: a box where customers can leave a note with their order. You see the note on the order in Shopify admin.

Product cards

These apply to product cards everywhere: collections, search, featured products and recommendations.

  • Image shape: Square, Portrait or Landscape.
  • Show second image on hover: shows the product's second image when a customer points at the card. The product needs at least two images.
  • Show product rating: shows stars when a reviews app fills the standard product rating fields. See the FAQ about review apps.
  • Show quick add button: a round button on the card. A product with one variant goes straight into the cart. A product with options opens its product page, so the customer can choose.

Formgong

Optional. Paste a Formgong access key (it starts with fk_) and the Contact form section sends messages to Formgong instead of Shopify's contact email: they land in a Formgong inbox, on Telegram at once and in an email, with spam filtering. Get a free key at formgong.com/new. The key is public by design: it can send to your form, not read it. Leave the field empty to keep Shopify's own contact form.

Social media

Paste the full link to each profile: Instagram, TikTok, Facebook, Pinterest, YouTube and X (Twitter). The icons show in the footer's Brand block when Show social media icons is on. Leave a field empty to hide that icon.

Shopper profiles ("Shopping for")

Shopper profiles let customers say who they're shopping for, for example dogs or cats. The store then shows that profile's products. Profiles run on product tags, so you don't need an app.

How profiles work

  • A picker in the header reads "Shopping for: Everyone". Customers open it and choose a profile. On small screens, it sits in a row under the header.
  • The choice is saved in the customer's browser, so it's still there on their next visit from that device.
  • Collection links in menus, collection tiles, banner buttons and the collections list open the collection filtered to the profile's tag. For example, /collections/toys becomes /collections/toys/dog. This is Shopify's own tag filter.
  • Collections that already belong to a profile keep their normal link. With the tag dog, that's a collection whose handle is dog or dogs, or starts with dog- or dogs-.
  • A collection page opened for a profile says "Showing items for Dogs", with a link to show everything.
  • Featured products sections with Show products for the customer's shopper profile on show that profile's products. If none of the section's products have the tag, all of them show.
  • Choosing "Everyone" (your Label for showing everything) shows the whole store again.
  • If the browser has JavaScript off, customers see the whole store with no filtering.

Set up profiles

  1. Tag your products in Shopify admin, one tag per profile, like dog, cat or small-pet. A product can have several profile tags. A toy for dogs and cats gets both.
  2. In Theme settings → Shopper profiles, fill in Name (what customers see), Product tag (the tag from step 1) and Icon for each profile. You can set up to 4 profiles.
  3. Check that Show shopper profiles in the header is on.

A profile appears only once at least one product has its tag. Leave Name empty to hide a profile. When no profile can show, the picker is hidden.

Scamper compares tags in lower case, with hyphens for spaces. A product tagged "Small pet" matches the profile tag small-pet.

The defaults are Dogs (dog), Cats (cat) and Small pets (small-pet). Profile 4 starts empty. Other kinds of stores can use other profiles, like age groups in a toy store.

Sections

Add sections in the theme editor with Add section. Each section below has a Color scheme setting, and most have Top padding and Bottom padding. The Announcement bar and Header sit in the header area, and the Footer in the footer area.

Announcement bar

Short messages at the very top of the store, above the header.

  • Add up to 4 Announcement blocks, each with Text and an optional Link.
  • With two or more, they take turns. Change announcement every sets the time, from 3 to 10 seconds.
  • The bar stops while a customer hovers over it or tabs into it, and it has a pause button. Customers who prefer reduced motion see only the first announcement, so put the most important one first.

Header

  • Main menu and Customer account menu: the menus the header shows. The account icon appears when customer accounts are on in your Shopify settings.
  • Keep header visible when scrolling. With it on, Hide header when scrolling down hides the header as customers scroll down and brings it back as soon as they scroll up.
  • Drop-down menu: Color scheme, Image, Image caption and Image link for the menu panel. See the FAQ about the mega menu.
  • The search icon opens a search box that suggests products, collections, pages and blog posts as customers type.

Image banner

A large photo with a heading, text and buttons. It works best at the top of the home page.

  • Image: 3:2 recommended. Leave space for the text. Mobile image is optional, 4:3 recommended.
  • Height: Small, Medium or Large. Text position: Left, Center or Right.
  • Blocks: Badge, Heading, Text and Buttons (two buttons, each with a label and a link). In the heading, set a word in italic to color it.

Scrolling text

A strip of short messages that moves across the screen.

  • Add up to 8 Text blocks.
  • Time for one loop: from 10 to 60 seconds. Higher is slower.
  • Pause on hover stops the strip while a customer points at it. It also has a pause button.
  • For customers who prefer reduced motion, the strip stands still and the messages wrap onto separate lines.

Collection tiles

Up to 4 large tiles that link to collections.

  • In each Collection block, pick a Collection. Image and Heading are optional. Without them, the tile uses the collection's image and name. Subheading adds a short line under the name.
  • Fly tiles in from the sides plays once when the tiles come into view. It follows Show scroll effects in Theme settings.

Products from a collection, in a grid or in a moving strip.

  • Add up to 4 Collection tab blocks. With two or more, customers switch between them with tabs. Tab label is optional and defaults to the collection name. A tab with no collection picked shows products from your whole catalog.
  • Products to show: from 2 to 12. Columns on large screens: from 2 to 5.
  • Layout: Grid, or Moving strip, where the cards slide sideways in a loop. Moving strip: seconds per product sets the speed, from 2 to 8. Higher is slower.
  • The moving strip stops while customers hover over it or tab into it, and a pause button sits next to the heading. For customers who prefer reduced motion it doesn't move. They scroll the row themselves.
  • Show view all button links to the collection.
  • Show products for the customer's shopper profile: see Shopper profiles.

Image with text

A photo next to a panel with a heading, text, feature points and a button.

  • Image position on large screens: Left or Right.
  • Blocks: Heading, Text, up to 4 Feature blocks (each with Icon, Heading and Text) and a Button.
  • Text panel color scheme colors the panel. Section color scheme colors the space around it.

One product with its photos, price and buy buttons, on any page.

  • Product: pick one. Until you do, the section shows the first product in your catalog.
  • Blocks: Title, Product rating, Price, Text, Buy buttons, Link to product, Custom Liquid and app blocks. Leave Text empty to show the start of the product description.

Shop the set

Up to three products that customers add to the cart together, with one button.

  • Add up to 3 Product blocks and pick a product in each.
  • The section shows each product's price and the total. All products start ticked; customers can untick any of them, and the total updates. The button adds one of each ticked product, in its first available variant. A sold-out product is marked as sold out and left out.
  • Button label is the button text. Note under the total is for a short message, like a set discount.
  • Scamper doesn't change prices. To give a set discount, create an automatic discount in Shopify admin and mention it in Note under the total.

Testimonials

Quotes from your customers.

  • Up to 6 Testimonial blocks, each with Quote, Customer name, Detail (for example a city or the product they bought), Photo and Stars (0 to 5).
  • Use real quotes from real customers.

Email signup

A signup box for your newsletter, with a Heading and Text. Panel color scheme colors the box and Section color scheme the space around it.

Each signup is saved as a customer in Shopify admin, subscribed to email marketing and tagged newsletter.

Product recommendations, usually under the product information.

  • Shopify chooses the products automatically from what customers buy together. You can adjust them in the Search and Discovery app.
  • Products to show: from 2 to 8. Columns on large screens: from 2 to 5.

Contact form

A form with Name, Email, Phone number and Message fields, and a Heading. Shopify sends the messages to your store's sender email, which you set in Shopify admin under Settings → Notifications.

With a key in Theme settings → Formgong, the same form posts to https://formgong.com/submit instead. The thank-you text shows only after Formgong confirms the message was stored; a wrong key shows Formgong's error message under the button. Without JavaScript the visitor sees Formgong's own thank-you page.

Apps

A place for app blocks, for example a product reviews widget, anywhere on a page.

Custom Liquid

A box for Liquid code, for app snippets or advanced changes. We can't support code added here. See the support policy.

  • Up to 6 blocks: Brand (Logo, Text and Show social media icons), Menu (Heading and Footer menu) and Email signup.
  • Show country/region selector and Show language selector: each appears only when your store sells in more than one country or language.
  • Show Follow on Shop: customers need the Shop app, and Shop Pay must be turned on.
  • Show payment icons: the payment methods your store accepts.

Pages

Product page

The product page uses the Product information section, with Related products under it. You can add, remove and reorder these blocks:

  • Title (with Show vendor), Product rating, Price, SKU, Variant picker and Description.
  • Buy buttons: Show quantity selector, Show dynamic checkout buttons (customers see the payment method they use most, like PayPal or Apple Pay), Show pickup availability and Show recipient form for gift cards. Subscription options show when a product has them.
  • Text: a short note, like care instructions or a size tip.
  • Collapsible tab: Heading, Icon and Text. Or use Text from a page to show the same page, like your shipping policy, on every product.
  • Benefits: up to three short lines with icons, like your shipping offer and returns policy.
  • Complementary products: products that go with this one. Choose them in the Search and Discovery app. Products to show: from 1 to 6.
  • Share, Custom Liquid and app blocks, for example from a reviews app.

The price shows sale prices and unit prices, and Shop Pay Installments when your store offers them. The variant picker shows a button for each option value, or a swatch when you have set a color or an image for that value in Shopify admin.

The media gallery shows photos, videos and 3D models. Large screens show a grid, and on small screens customers swipe. Customers can open images in a larger view.

Collection pages

Collection pages use the Product grid section.

  • Products per page: from 8 to 36. Page numbers show at the bottom.
  • Columns on large screens: from 2 to 5. Columns on small screens: 1 column or 2 columns.
  • Show collection description and Show collection image.
  • Enable filtering: the filters come from Shopify's Search and Discovery app. Choose there which filters customers see, like availability, price or product type. On small screens, filters open in a drawer.
  • Customers sort products with the Sort by menu. It sits with the filters, or above the products when filtering is off or the collection has no filters.
  • An empty collection says "No products in this collection yet." When filters match nothing, customers see "No products match these filters." Both show a button to see everything.
  • Cards show a Sale badge for products with a compare-at price, and a Sold out badge for sold-out products.

The collections list page uses the Collections list section and shows all your collections.

The search results page uses the Search results section: Results per page (8 to 36) and Enable filtering. Results include products, pages and blog posts.

Cart

Choose a cart drawer or a cart page in Theme settings → Cart. The cart page is always there at /cart.

  • Each item shows its options, price and quantity, with buttons to change the quantity or remove it.
  • The summary shows discounts, the order note (if Show cart note is on), a line about taxes and shipping, and accelerated checkout buttons like Shop Pay or PayPal. Those buttons come from your payment settings in Shopify.
  • The Cart section on the cart page has Color scheme and Order summary color scheme.

Blog

  • Blog posts section: Posts per page (3 to 24) and Show date. When your posts have tags, links at the top filter posts by tag.
  • Blog post section: Show author. Tags show under the post. Comments show when you allow them in the blog's settings in Shopify admin. If comments are moderated, new ones wait for your approval.

Contact page

Create a page in Shopify admin and set its theme template to contact. The page shows your page text, then the Contact form section. Messages go to your store's sender email (Settings → Notifications in Shopify admin).

Password page

While your store is password protected (Shopify admin, Online Store → Preferences), visitors see the password page. It shows your logo or store name, the Heading of the Password page section ("Opening soon" by default), the message from your password settings, an email signup, and a button that opens the password field.

Other pages

  • Page not found: a short message, a search box and a button back to the home page.
  • Gift card: the page customers get with a gift card. It shows the code, a QR code, an Add to Apple Wallet button and a print button.

Accessibility and motion

  • A "Skip to content" link comes first on every page, for keyboard users.
  • Keyboard focus shows a 3 px outline in the color scheme's Accent color.
  • Buttons and form fields have labels that screen readers announce, icon-only buttons included.
  • Everything that moves by itself has a pause button: the Announcement bar (with two or more announcements), Scrolling text, and Featured products in the Moving strip layout.
  • When a customer's device asks for reduced motion, Scamper keeps still. There are no scroll effects and no add-to-cart animation, the moving strip becomes a row customers scroll themselves, scrolling text stands still, and announcements don't rotate. The pause buttons are hidden then, because nothing moves.
  • Show scroll effects in Theme settings → Layout turns scroll effects off for everyone.

Your part: add alt text to your images in Shopify admin, use link text that says where a link goes, and check contrast when you change colors.

FAQ

Why doesn't my store look like the demo store?

Shopify installs the theme files and settings only. The demo store's products, photos, collections, menus, pages and blog posts stay in the demo store. Add your own products and photos, then pick them in the theme editor. Image sections show placeholder drawings until you do.

How do I get the mega menu?

Any top-level item in your main menu with links nested under it opens a drop-down panel. Nest a third level to get columns: second-level links become column headings, and third-level links are listed under them. To add a picture to the drop-down, set Image, Image caption and Image link under Drop-down menu in the Header section. The header shows the menu picked in its Main menu setting.

How do I change the colors?

Open Theme settings → Colors and edit a color scheme. Every section that uses that scheme changes with it. To color one section differently, pick another scheme in that section's Color scheme setting.

How do I add product reviews?

Install a reviews app from the Shopify App Store. Add its widget as an app block in the Product information section or in an Apps section. Stars on product cards and in the Product rating block appear when the app fills Shopify's standard product rating fields (reviews.rating and reviews.rating_count). The app's documentation says whether it does.

Why doesn't a shopper profile show in the header?

Check four things. Show shopper profiles in the header is on. The profile has both a Name and a Product tag. At least one product in your store has that tag. The tag matches: Scamper compares tags in lower case with hyphens for spaces, so a product tagged "Small pet" matches the profile tag small-pet, but not small-pets. You can have up to 4 profiles.

How do I update Scamper?

Download the new version from the Scamper page on formgong.com and upload it in Online Store → Themes → Add theme → Upload zip file. It arrives as a new, unpublished theme with Scamper's default settings; your current copy stays as it is. To keep your setup, open Edit code on your current copy and copy config/settings_data.json and the files in the templates folder into the new one, or write to support and we'll help. Check the new version, then publish it. What changed is in the release notes on this page.

Why isn't my moving strip moving?

Check that Layout is set to Moving strip in the Featured products section and that its collection has products. The strip also stops while a customer hovers over it, after someone presses its pause button, and for customers who prefer reduced motion.

How do I give a discount on Shop the set?

Scamper doesn't change prices. Create an automatic discount in Shopify admin that applies to those products, then mention it in Note under the total. The discount shows in the cart and at checkout.

Where do contact form messages go?

Shopify sends them to your store's sender email, set in Shopify admin under Settings → Notifications. If you can't find a message, check that mailbox's spam folder. With a Formgong access key in Theme settings → Formgong, they go to your Formgong inbox, Telegram and email instead.

My collection pages have no filters. Why?

Turn on Enable filtering in the Product grid section, then choose filters in Shopify's Search and Discovery app. A filter shows only when products in the collection have values for it.

How do I turn off animations?

Turn off Show scroll effects in Theme settings → Layout. Set Featured products to the Grid layout, and remove the Scrolling text section if you don't want it. An Announcement bar with one announcement doesn't rotate.

Can I edit the theme code?

Yes, but duplicate the theme first, so you have a copy to go back to. Code changes are not carried over when you update Scamper, and we can't support them. For custom work, hire a Shopify Partner.

Support policy

Write to us through the Scamper support form. We reply within 2 business days.

We help with:

  • bugs in Scamper, like a broken layout, a dead link or a feature that doesn't work as this page describes;
  • questions about Scamper's settings and features;
  • finding the setting for what you want to do.

We don't cover:

  • custom code changes, including code added in Custom Liquid;
  • third-party apps, including setting them up and problems they cause;
  • store setup, like adding products, writing content or design work.

For custom work, hire a Shopify Partner. If your copy of Scamper has code edits, we may ask you to check the problem on an unedited copy.

Release notes

Version 1.1.1

  • Optional Formgong contact form: with an access key in Theme settings → Formgong, the Contact form section sends to Formgong (inbox, Telegram, email, spam filtering). Without a key nothing changes.

Version 1.1.0

  • Page titles now translate the "tagged" and "Page 2" parts, shared links show image alt text, and blog posts carry article structured data for search engines.
  • Unused starter files removed. All code in Scamper is now Formgong's own.

Version 1.0.0 (first release)

  • Shopper profiles ("Shopping for"): customers choose who they shop for, and the store shows those products first. Built on product tags, with no app.
  • Color-block product cards, with a second image on hover and quick add.
  • Shop the set: up to three products into the cart with one button.
  • A moving product strip (Featured products) and Scrolling text, each with a pause button.
  • Home page sections: Image banner, Scrolling text, Collection tiles, Featured products, Image with text, Featured product, Shop the set, Testimonials, Email signup and Custom Liquid.
  • Product page with swatches, dynamic checkout buttons, pickup availability, benefits, collapsible tabs, complementary and related products, and app blocks for reviews.
  • Collection pages with filters, sorting, page numbers and an empty state.
  • Cart drawer or cart page, with an order note and accelerated checkout.
  • Mega menu, predictive search, customer accounts, country and language selectors, and Follow on Shop.
  • Reduced-motion support, visible focus, and scroll effects you can turn off.