Theme Documentation
<p>Welcome! This guide covers everything you need to install, configure, and customize the KidsDepot theme for your Shopify store — no coding required. If you get stuck, visit our <a href="/pages/support">Support</a> page, use the <a href="/pages/contact">Contact form</a>, or email <a href="mailto:kidzdepotpk@gmail.com">kidzdepotpk@gmail.com</a>. We reply within 2 business days.</p>
<h3>Table of contents</h3>
<ul>
<li><a href="#getting-started">Getting started</a></li>
<li><a href="#global-settings">Global settings: colors, fonts & shape</a></li>
<li><a href="#homepage">Building your homepage</a></li>
<li><a href="#header-footer">Header, footer & sidebar menu</a></li>
<li><a href="#product-pages">Product pages</a></li>
<li><a href="#collections-search">Collections & search</a></li>
<li><a href="#cart">Cart & checkout</a></li>
<li><a href="#niche-sections">Toy-store features: Shop by Age & Safety Badges</a></li>
<li><a href="#advanced">Subscriptions, B2B, gift cards & apps</a></li>
<li><a href="#troubleshooting">Troubleshooting & FAQ</a></li>
<li><a href="#contact">Contact & support links</a></li>
<li><a href="#changelog">Version & changelog</a></li>
</ul>
<h3 id="getting-started">Getting started</h3>
<p>After installing the theme from the Shopify Theme Store:</p>
<ol>
<li>Go to <strong>Online Store > Themes</strong> and click <strong>Customize</strong> on the KidsDepot theme.</li>
<li>Add your logo and favicon under <strong>Theme settings > Brand</strong>.</li>
<li>Set your primary font under <strong>Theme settings > Typography</strong>.</li>
<li>Review the homepage sections that ship by default and replace the placeholder images/copy with your own (see <a href="#homepage">Building your homepage</a>).</li>
<li>Set up your navigation menus under <strong>Online Store > Navigation</strong>, then assign them in <strong>Header</strong> and <strong>Footer</strong> settings.</li>
<li>Preview on both desktop and mobile before publishing.</li>
</ol>
<h3 id="global-settings">Global settings: colors, fonts & shape</h3>
<p>KidsDepot uses a single, centralized design system so your brand stays consistent everywhere — change a color or font once in <strong>Theme settings</strong> and it updates across every page, section, and component automatically. No section has its own hardcoded colors.</p>
<h4>Colors</h4>
<p>Under <strong>Theme settings > Colors</strong> you can control:</p>
<ul>
<li><strong>Brand colors</strong> — your primary color (buttons, links, badges) plus hover/active states and a soft tint used for backgrounds.</li>
<li><strong>Accent colors</strong> — teal, gold/sunshine, berry, and sky accents used for playful highlights, tags, and the age-group tiles.</li>
<li><strong>Surface colors</strong> — background, canvas, and card surface tones.</li>
<li><strong>Text colors</strong> — strong (headings), body, muted, and inverse (text on dark/colored backgrounds).</li>
<li><strong>Lines</strong> — border colors used for dividers, cards, and inputs.</li>
<li><strong>Corner radius</strong> — four adjustable roundness levels (small through extra-large) plus a separate radius for form inputs, so you can dial the whole theme from sharp to very rounded.</li>
</ul>
<h4>Typography</h4>
<p>Choose your storefront font under <strong>Theme settings > Typography</strong>. The theme automatically generates the weights it needs (regular, medium, semibold, bold) from your chosen font family.</p>
<h4>Layout</h4>
<p>Control the maximum page width and minimum side margins under <strong>Theme settings > Layout</strong> — useful if you prefer a narrower, more boutique feel or a wider, more spacious layout.</p>
<h3 id="homepage">Building your homepage</h3>
<p>The homepage is built entirely from sections you can add, remove, and reorder in the <strong>Customize</strong> editor. Recommended sections include:</p>
<ul>
<li><strong>Full-width hero carousel</strong> — your main banner with autoplaying slides, eyebrow labels, and call-to-action buttons.</li>
<li><strong>Shop by Age</strong> — color-coded tiles that route shoppers straight to the right age range (see <a href="#niche-sections">below</a>).</li>
<li><strong>Homepage trust bar</strong> — a row of value props (free shipping, easy returns, secure payment, etc.).</li>
<li><strong>Best sellers / Hand-picked products / Featured collection promo</strong> — merchandising sections for showcasing curated or best-selling products.</li>
<li><strong>Homepage showcase hub</strong> — a flexible panel combining featured deals, a testimonial, and a bestsellers banner.</li>
<li><strong>Feature highlights</strong> — a "why shop with us" grid of value propositions.</li>
<li><strong>Toy buying help</strong> — an FAQ-style accordion for pre-purchase questions.</li>
<li><strong>Instagram social carousel</strong> — a scrolling gallery linking to your social presence.</li>
<li><strong>Newsletter & services</strong> — an email signup paired with customer-service info.</li>
<li><strong>Video</strong> and <strong>Rich text</strong> — general-purpose sections for brand storytelling, embedded video (YouTube, Vimeo, or a Shopify-hosted upload), and free-form content blocks.</li>
</ul>
<p>Every section has its own settings panel — click the section name in the left-hand list of the editor to reveal its options (headings, images, colors overrides where relevant, spacing, and visibility toggles for mobile/desktop).</p>
<h4>Keeping your homepage fast (recommended)</h4>
<p>The theme ships with a deliberately lean default homepage (about 10 sections) so it loads quickly. You can add more, but for the best speed and a focused shopping experience we recommend:</p>
<ul>
<li>Keep the homepage to roughly <strong>8–14 sections</strong>. More is possible, but each product/collection section adds images and requests.</li>
<li>Use <strong>1–3 product-merchandising sections</strong> (e.g. Best sellers + one Featured collection), not all of them at once.</li>
<li>Set a real <strong>collection</strong> on each merchandising section, and keep "products to show" reasonable (4–8 on the homepage).</li>
<li>Use the section <strong>Hide on mobile / Hide on desktop</strong> toggles to trim heavier sections on phones.</li>
<li>Optimize your images before uploading (the theme serves responsive, lazy-loaded images automatically, but starting with reasonably sized files helps).</li>
</ul>
<h4>First-time setup checklist</h4>
<p>The theme installs with placeholder content (no demo products/images transfer on install — that's standard for Theme Store themes). To make it look like a real store:</p>
<ol>
<li>Add your <strong>products and collections</strong> in Shopify admin.</li>
<li>Open each homepage section and select a <strong>collection</strong> (Best sellers, Featured collection, Shop by age links, etc.).</li>
<li>Replace hero, promo, and banner <strong>images</strong> with your own.</li>
<li>Set your <strong>logo, favicon, colors, and font</strong> in Theme settings.</li>
<li>Configure <strong>menus</strong> (Online Store > Navigation) and assign them in the Header/Footer.</li>
<li>Review the <strong>Shop by age</strong> tiles and <strong>Age & safety badges</strong> to match your catalog.</li>
</ol>
<h3 id="header-footer">Header, footer & sidebar menu</h3>
<p>The <strong>Header</strong> and <strong>Footer</strong> are managed as section groups, so you can add blocks (menu links, social icons, a newsletter form, payment icons) without editing code. The <strong>Sidebar menu</strong> is a slide-out navigation panel (opened from the header on mobile, or as a persistent category menu) that supports color-coded category groups, contact cards, and quick links — ideal for organizing a large toy catalog by category or age group.</p>
<h3 id="product-pages">Product pages</h3>
<p>The product page supports:</p>
<ul>
<li>Image, video, YouTube/Vimeo, and 3D/AR model media, with a zoomable gallery and thumbnail strip.</li>
<li>A variant picker that handles color/image swatches, sold-out and unavailable combinations, and updates price, media, and availability instantly as options are selected.</li>
<li>Quantity rules, unit pricing, and volume pricing where configured in Shopify.</li>
<li>Dynamic checkout buttons (Shop Pay, etc.) and Shop Pay Installments.</li>
<li>Local pickup availability.</li>
<li><strong>Age & safety badges</strong> — a toy-specific trust strip (age range, safety certification, shipping, returns).</li>
<li>Complementary and related product recommendations.</li>
<li>A sticky add-to-cart bar on mobile for long product pages.</li>
</ul>
<h3 id="collections-search">Collections & search</h3>
<p>Collection pages include filtering (by price, availability, and any product tags/metafields you've set up as filters in Shopify), sorting, and pagination — all handled natively, with no extra apps required. The <strong>Shop by Age</strong> section can also be added beneath any collection grid to help shoppers cross-navigate. Search includes full predictive (type-ahead) search from the header, plus a dedicated search results page with type filtering (products, pages, articles).</p>
<h3 id="cart">Cart & checkout</h3>
<p>Shoppers can use either the full cart page or the slide-out cart drawer — both share the same line-item, discount-code, and free-shipping-progress components, so behavior is always consistent. Configure the free-shipping threshold under <strong>Theme settings > Cart</strong>. Gift cards support a "send to a recipient" option with a scheduled send date and personal message.</p>
<h3 id="niche-sections">Toy-store features: Shop by Age & Safety Badges</h3>
<p>Two sections are unique to this theme's toy-store focus:</p>
<ul>
<li><strong>Shop by Age</strong> — add one block per age range (e.g. 0–2, 3–5, 6–8, 9–12, 12+), each with its own image, label, link, and accent color. Great for the homepage or the bottom of a collection page.</li>
<li><strong>Age & Safety Badges</strong> — a row of trust badges for the product page (recommended age, safety certification, shipping promise, returns policy). Each badge has an emoji/icon, title, short note, and color.</li>
</ul>
<h3 id="advanced">Subscriptions, B2B, gift cards & apps</h3>
<ul>
<li><strong>Subscriptions</strong> — if you use a Shopify subscriptions app, the variant/selling-plan picker and cart are already wired to support recurring purchases.</li>
<li><strong>B2B / wholesale</strong> — a dedicated registration page lets business customers apply for wholesale access. Enable it under <strong>Theme settings</strong>.</li>
<li><strong>Apps</strong> — the theme includes designated app-block slots in the header, footer, product page, and cart drawer/page, so most reviews, loyalty, upsell, and chat apps can be added directly from the theme editor without developer help.</li>
</ul>
<h3 id="troubleshooting">Troubleshooting & FAQ</h3>
<h4>My images look stretched or cropped oddly.</h4>
<p>Use images close to the aspect ratio suggested in each section's settings panel (most image pickers show a recommended ratio). The theme crops intelligently, but starting with well-cropped images gives the best result.</p>
<h4>I changed a color but part of the page didn't update.</h4>
<p>Almost all color is controlled globally — if something looks unchanged, check whether that specific section has its own color override in its settings panel (a few marketing sections allow a custom background/text color for that section only).</p>
<h4>A section I added isn't showing on the storefront.</h4>
<p>Check the section's <strong>Hide on mobile / Hide on desktop</strong> toggles, and confirm any required content (e.g. a selected collection or product) has been set — several sections show a placeholder only in the editor until real content is selected.</p>
<h4>How do I translate my store into another language?</h4>
<p>Use Shopify's built-in <strong>Translate & Adapt</strong> app (or your preferred localization app) alongside <strong>Settings > Languages</strong>. The theme's own interface text is fully translatable, and the theme automatically displays right-to-left layout for right-to-left languages.</p>
<h4>Still stuck?</h4>
<p>We're happy to help. Reach our team via the <a href="/pages/support">Support</a> page, the <a href="/pages/contact">Contact form</a>, or by email at <a href="mailto:kidzdepotpk@gmail.com">kidzdepotpk@gmail.com</a> — we reply within 2 business days.</p>
<h3 id="contact">Contact & support links</h3>
<ul>
<li><strong>Documentation:</strong> <a href="/pages/theme-documentation">kidzdepot.pk/pages/theme-documentation</a></li>
<li><strong>Support:</strong> <a href="/pages/support">kidzdepot.pk/pages/support</a></li>
<li><strong>Contact form:</strong> <a href="/pages/contact">kidzdepot.pk/pages/contact</a></li>
<li><strong>Email:</strong> <a href="mailto:kidzdepotpk@gmail.com">kidzdepotpk@gmail.com</a></li>
</ul>
<h3 id="changelog">Version & changelog</h3>
<p><strong>Current version: 1.0.0</strong></p>
<ul>
<li>1.0.0 — Initial Theme Store release.</li>
</ul>