Pop
Setup guide

1. Install the theme

1. In your Shopify admin: Online Store → Themes.
2. Add theme → Import a zip file.
3. Pick pop.zip, the inner file from the package you downloaded, not the whole package.
4. It appears in your library as POP, unpublished. Customize to work on it; publish when you are ready.

If Shopify says the file is not a valid theme, you have almost certainly uploaded the outer package. Unzip it first.

2. The accent

The theme ships one style, Play, already applied: cream paper, one ink for the text and the 2 px strokes, a coral accent. The one choice to make is the accent. In the editor, open Theme settings → Colours → Accent: Coral, Violet, Mint, Yellow or Custom, in which case the Custom accent colour underneath is used.

• The accent paints the buttons on hover, the stack price, the stars and the dot of the logo.
• Whatever you pick, the theme mixes it step by step towards the ink until it passes 4.5:1 on the paper and on the peach tint, and uses that darker version for text. A pale yellow stays legible.
• The five pastel tints under the products (peach, mint, butter, sky, lilac) are part of the design and do not change.

3. Theme settings

• Colours: Ink (text, the strokes, the solid buttons), Paper, the Accent above, Secondary text.
• Typography: nothing to set. Young Serif (the display sizes) and Manrope (everything else) are loaded from Google Fonts by the theme, with a preconnect; there is no font picker. Both are under the SIL Open Font License, which allows self-hosting if you prefer.
• Layout: Container width (1100 to 1440 px) and Side gutter (16 to 40 px).
• Brand: the Wordmark and the Second word after the accent dot (“pop” and “play” in the demo; leave the second empty for a single word), or a Logo image with its height (20 to 48 px), plus the Share image used when a page has none.
• Header: show or hide the search and account buttons. The header is always a sticky pill.
• Product tiles: Image fit, Contain keeps a cut-out or a drawing whole on the tint, Cover fills the frame with a photograph; the price, the material line and Materials shown (1 to 3), the Badge source, and the round “+” that adds the default variant to the cart.
• Cart: Open the drawer after adding, Show the free-shipping bar and Free shipping from (0 to 200, in the shop currency; 0 hides the bar).
• Social: Instagram, TikTok, Pinterest; they become the Follow column of the footer.
• Motion: Enable animations. The marquee, the wiggle and the tilts stop when it is off, and always for visitors who prefer reduced motion.

4. The home page

Ten sections are in place when you install, in this order:

• Hero: eyebrow; heading, Accent word (accent colour, italic) and End of the heading; text; two buttons (the first falls back to all products, the second needs a label and a link); a Social proof line with five stars on or off; the Piece (a cut-out on a transparent background works best; until then the theme draws a pendant); Blob colour (accent, a tint or ink); two stickers, top right in ink and bottom left on paper.
• Marquee: an ink band, tilted. Duration of one loop (10 to 60 s), Tilt (−3° to 3°), up to eight message blocks.
• Product grid: heading, collection, products to show (4 to 16), Show the filter chips. Up to six Filter blocks, one chip each: a collection and an optional label. The chips narrow the tiles already on the page; without JavaScript each chip links to its collection. Anchor #shop.
• Bestsellers carousel: heading, Show the heart, collection (its order gives the rank), products to show (3 to 12). The rank sits in an accent badge, the review count under the name when reviews.rating_count is set, and the price is a button that adds the default variant.
• Stack builder: collection (the eligible pieces), products to show (3 to 12), Pieces per stack (2 to 4), Discount (5 to 50 %), eyebrow, heading, End of the heading, text. Anchor #stack. See section 6.
• Reviews: five stars on or off, heading; up to six Review blocks with a quote, a first name, a product, a tint and a tilt.
• Seen on you: heading, the house handle and its link; up to twelve Image blocks with an image, a handle, a link, a tint and a tilt. Square frames that grow and tilt on hover.
• Quiz: collection (the products it picks from), eyebrow; up to five Question blocks. An ink section. See section 6.
• Newsletter: heading, text, button label. A Shopify customer form; the subscriber is created as a customer tagged newsletter.
• FAQ: heading, Open the first question; up to twelve Question blocks. Anchor #faq.

Every section has Top spacing and Bottom spacing (0 to 160 px on the home page sections, 0 to 200 px on the others, steps of 4); screens under 720 px keep 70 % of the value. Ten more sections wait under Add section: featured product, collection tiles, address (with the contact form), page hero, prose, video, custom Liquid, divider, related products and the footer. Every one carries translated demo copy: leave a field empty and the theme’s text shows in the visitor’s language; type anything and yours wins. Switch Show demo copy when empty off once your content is in.

5. Products: tints, badges, materials, swatches, sizes

Every tile reads your tags or metafields:

Theme settings → Product tiles → Badge picks the badge source: the tag by default, the metafield, or none.

The product page reads your option names:

Both lists are editable in the product section settings, comma-separated.

• Gallery: stroked, rounded cards on a tint with a rail of round thumbnails, a 4:5 stage; left or right of the details (Gallery position); on small screens a snapping slider with dots. A variant with its own media brings that view forward.
• Button: the price inside “Add to cart”, following the variant; it reads “Added to your bag ✓” after adding and opens the drawer when the cart setting says so. A Reassurance line under the button is yours to write.
• Accordions: up to eight rows, a title and a text or a page; Use the product description shows the description in a row. Three rows ship: Materials & care, Delivery & returns, Sizes.
• Selling plans: when a product has them (a subscriptions app creates them), they appear as purchase options above the button.
• Express checkout buttons: off by default; switch Show dynamic checkout buttons on in the product section once wallets are enabled under Settings → Payments.
• Complete your stack: the row under the product follows Shopify’s Product Recommendations, so the pairs set in Search & Discovery; 2 to 10 products.

6. The stack and the quiz

The stack builder adds the chosen pieces (their default variant, quantity 1) to the cart in one request, each line carrying the same _stack_id property, then opens the drawer when the cart setting says so. Once every slot is filled, the card shows the full total struck through and the indicative total after the section’s Discount. The theme applies no discount itself. Create it in the admin: Discounts → Create discount → Amount off products, as an automatic discount, for example a percentage on a minimum quantity of 3 items from your stackables collection, or a Shopify Function for finer rules. Keep its percentage equal to the section’s, so the cart matches the card.

The quiz: each Question block has a title, three options and, for each option, comma-separated tags: a product tag such as minimal, a collection handle such as rings, or a budget tag such as budget:low. The quiz reads up to 24 products from the section’s collection. An answer keeps the products that match at least one of its tags; an option with no tags does not filter; an answer that would leave nothing is ignored, so there is always a result. After the last question the first product left, in the collection’s order, pops in as a card with its tint, name, material, price and an add-to-cart button. The demo carries copy for three questions; a fourth and a fifth show placeholders until you type them. The section sits on the home page and alone on the quiz page template.

7. Menus and pages

• Header menu: Online Store → Navigation. The header reads your Main menu; under 900 px it moves into a floating drawer, nested links as collapsible groups, with an optional Mobile drawer secondary menu below.
• Footer: a 2 px rule, the wordmark, a Baseline; one column per Menu column block (up to four; the title falls back to Shop, Help, Follow, More), a Follow column from the social settings, then the year and shop name, the Legal menu or the shop policies, the language and country selectors, and the payment logos (Show payment method logos). The two columns ship pointing at menus called pop-shop and pop-aide; pick your own.
• Quiz: template quiz. The hero’s second button and the demo menu point to /pages/quiz, so give the page that handle.
• Contact: template contact, the form with up to eight address blocks.
• About: template about: page hero, your text as prose, then reviews.
• FAQ: template faq.
• Size guide: any page with the default template, then point the product section’s Size guide link to it.

8. Collection, cart, search

The collection page shows a breadcrumb, the product count, a Filters button and a sort pill. Filters come from Shopify’s free Search & Discovery app: install it, enable the filters you want, and they open in a left drawer with the number of active ones; without the app, the button simply does not appear. Filters and sorting are a plain form, so the page works without JavaScript. Settings: products per page (6 to 48), show filters, show sorting, spacing.

The cart drawer is a floating stroked panel: the free-shipping bar under its title reads “X more for free shipping”, then “Free shipping unlocked”; each line shows a tinted thumbnail, the options and the material, a quantity chip (0 removes the line); then the subtotal, checkout, and the Note under the button. Line properties starting with _, such as _stack_id, stay hidden. The cart page adds an order note on or off, a Shipping line value and a Fine print.

The search panel shows the Suggestion links (a menu) before the visitor types; results appear as they type. The results page has Results per page (6 to 48).

9. Illustrations

Eighteen line drawings ship with the theme: solitaire, halo and band rings, a pair of bands, pendant, pearl and sapphire necklaces, earrings, a hero ring, a close-up, two atelier scenes and six looks. They fill every image slot until you set an image: tiles, gallery, hero, stack, quiz, cart. They are released CC0, so you may keep, edit or replace them; the demo uses their PNG renders as product images.

10. Languages

The interface ships in English by default with a complete French translation included, storefront and editor (locales/fr.json and fr.schema.json). To sell in French: Settings → Languages → Add language → French, then publish it. The storefront follows the language of the URL the visitor is on, demo copy included. The footer’s language and country selectors appear as soon as your store publishes more than one language or ships to more than one market.