Theme version 2.1.0

Goodkind documentation.

A practical guide to installing, configuring, and maintaining Goodkind. Every setting and feature below is based on the theme implementation.

A clear first pass

  1. Install safelyAdd Goodkind to the theme library without publishing it.
  2. Set the foundationConfigure brand, typography, color, and layout settings.
  3. Build the storefrontAdd and arrange sections in the theme editor.
  4. Preview, then publishReview products, navigation, search, and mobile layouts.
Documentation index

01 · Foundation

Getting started

Keep Goodkind unpublished while you configure it. This lets you work with real store data and share the preview without changing the live storefront.

Install the theme

  1. In Shopify admin, open Online Store → Themes.
  2. Add the Goodkind ZIP to your theme library using Shopify’s theme upload/import action.
  3. When processing finishes, open Goodkind with Customize. Do not publish it yet.
Before major changes: duplicate your current live theme from its action menu. Shopify stores products, collections, navigation, pages, and orders separately from theme code, but a duplicate preserves your current theme settings and layout as a rollback point.

Make the first pass

  1. Open Theme settings and set the logo, favicon, fonts, colors, layout width, and controls.
  2. Configure the Header and Footer section groups.
  3. Open the Home page template, connect collections and products, then replace demo imagery and copy.
  4. Use the template selector to review product, collection, search, cart, page, blog, article, contact, about, password, and 404 templates.
  5. Preview on desktop and mobile. Test navigation, product variants, add to cart, search, localization, and app blocks before publishing.

Shopify’s preview action provides a private preview link for an unpublished theme. Recheck the storefront while signed out so customer-facing behavior is represented accurately.

02 · Global controls

Theme settings

Global settings create the shared visual system across every template. In the theme editor, select Theme settings rather than an individual section.

Brand
Set a text logo or upload a logo image, choose the uploaded-logo mode, adjust logo width, and upload a favicon. Goodkind also supports bundled fallback assets used by its preview package.
Typography
Choose Shopify-hosted heading and body fonts, adjust the overall type scale, and select the heading letter case.
Layout
Control the maximum page width, desktop side margin, mobile side margin, and global section spacing.
Colors
Configure background and text plus primary, secondary, sage, mist, and ochre surfaces. Separate values cover borders, buttons, and button text.
Shapes and controls
Adjust card and control corner radii, border width, optional card shadows, and uppercase button labels.
Product cards
Show vendor names, reveal a second image on hover, display color swatches, and enable quick add.
Cart
Choose drawer or page cart behavior and decide whether customers can add an order note.
Motion
Enable or disable the theme’s subtle reveal motion. Reduced-motion preferences remain important when evaluating storefront movement.
Social media
Add optional Instagram, TikTok, Pinterest, Facebook, and YouTube URLs. Empty profiles are not shown.

After adjusting colors, review text and controls over every surface color. Merchants are responsible for keeping custom color combinations readable.

05 · Page building

Homepage sections

Add sections through the Home page template in the theme editor, then drag them into the intended order. The following list reflects Goodkind’s actual section schemas.

Hero

Use for: the primary storefront message. Upload separate desktop and mobile images, set image position, eyebrow, heading, rich text, two optional buttons, supporting note, and image badge. Keep the heading concise and use the mobile image when the desktop crop hides the subject.

Collection list

Use for: browsing a small set of product categories. The section has eyebrow, heading, text, and an optional section link. Each Collection block can connect a collection, override its image and position, replace the label and supporting text, and use a custom destination.

Featured collection

Use for: a product-led row or grid. Connect a collection, choose background and image ratio, set the number of products, and optionally show a custom-labeled collection link. Product card behavior follows global product-card settings.

Image with text

Use for: brand story, materials, or an editorial transition. Select an image and focal position, reverse the layout when needed, then add eyebrow, heading, text, and one optional button.

Benefits

Use for: a compact set of service or product principles. Set the section intro, then add Benefit blocks with an icon, heading, and text. Keep the statements specific and verifiable.

Announcement bar

Use for: short, rotating store notices. Choose its color style, rotation interval, and accessible label. Message blocks contain the announcement text and optional link. Avoid putting essential policy detail only in a rotating message.

Slideshow

Use for: a small number of campaigns that need equal prominence. Configure the accessible label, autoplay, and slide interval. Each Slide supports desktop and mobile images, position, overlay, text color, content placement, copy, and buttons. Autoplay can be paused through the section controls.

Rich text

Use for: a focused message without media. Add eyebrow, heading, rich text, alignment, and an optional primary or secondary button.

Full-bleed campaign

Use for: a high-impact image or hosted Shopify video. Configure image/video, autoplay, controls, overlay strength, text color and position, copy, and one button. Use controls for video with meaningful audio and avoid autoplaying distracting content.

Featured product

Use for: selling one product in page context. Select the product, optional editorial image, media label, layout, and color. Blocks include eyebrow, heading, price, description, benefits, variant picker, quantity, buy buttons, Custom Liquid, and compatible app blocks.

Shoppable image

Use for: a styled scene with direct product discovery. Add one image and section introduction. Each Product hotspot connects a product, accepts a custom label, and uses horizontal and vertical position controls. Check every hotspot on mobile after positioning.

Product comparison

Use for: comparing two clear options. Set the background, intro, and column labels. Each Comparison row includes a feature, a value for each column, and optional check icons. Use short entries so the table remains readable on small screens.

Testimonials

Use for: genuine customer feedback. Set the background and introduction, then add Customer quote blocks with quote, customer name, and context. Only publish feedback you have permission to use.

FAQ

Use for: concise pre-purchase answers. Configure background, intro, and an optional button. Question blocks contain the question and rich-text answer.

Logo strip

Use for: approved press, retail, certification, or partner marks. Add the section heading and Logo blocks with image, alternative text, and optional URL. Do not use marks without permission.

Blog posts

Use for: recent editorial content. Connect a blog, set intro copy, choose how many posts appear, enable excerpts when useful, and add an optional blog link.

Newsletter

Use for: Shopify customer email signup. Choose the section color, add eyebrow, heading, text, button label, and a short note such as consent or content expectations.

Video

Use for: product demonstration or brand storytelling. Add intro copy and use either a Shopify-hosted video or supported external video URL. Autoplay and loop are configurable; provide controls and context appropriate to the content.

Apps and Custom Liquid

The Apps section is a container for compatible Shopify app blocks and can include section spacing. The standalone Custom Liquid section renders merchant-supplied Liquid and also includes a spacing control. Review the security note in Apps & Custom Liquid before using it.

Goodkind homepage showing the Hero section and start of the collection area
Goodkind’s Hero combines a structured content panel with separately managed storefront media.

06 · Merchandising

Product pages

The Product information section controls gallery layout, media fit, thumbnail navigation, sticky product information, and the mobile sticky add-to-cart action. Reassurance lines and preview fallback images are also configurable.

Product information blocks

Core details
Vendor, heading, price with unit pricing, SKU, custom text, inventory status, description, divider, share link, and collapsible information.
Variants and swatches
The Variant picker renders product options and disabled values. Native Shopify swatch images or colors appear when the block’s swatch setting is enabled and swatch data exists on the product option.
Purchase options
The Purchase options block shows one-time and selling-plan choices when the product has selling plan groups. Quantity and Buy buttons are separate blocks; dynamic checkout can be enabled in Buy buttons.
Pickup availability
The Pickup availability block lists enabled locations and pickup timing for the selected variant when Shopify returns store availability.
Gift cards
Gift-card products show optional recipient email, name, message, and delivery-date fields within the product form.
Personalization
A Personalization field block creates a line-item property using text or multiline input and can be required.
Extensions
Compatible app blocks and a product-level Custom Liquid block can be placed among native product information blocks.

Recommendations

Add the Product recommendations section to the product template and choose Related products or Complementary products. Complementary results depend on recommendations configured for the product; the section does not invent products when Shopify returns none.

Goodkind product page with media gallery and product information panel
Product Information supports modular content blocks alongside the media gallery.

07 · Catalog

Collection pages

The Collection products section supports a configurable header style, eyebrow, collection description, hero-image fallback, image badge, filtering, sorting, pagination size, desktop columns, and product image ratio.

  • The collection title, image, and description come from the collection in Shopify admin.
  • Enable filtering only after configuring storefront filters in Shopify’s Search & Discovery tools. Availability, price, and other filters come from Shopify’s collection filter data.
  • Sorting uses the collection’s available Shopify sort options.
  • Product cards follow global vendor, secondary-image, swatch, and quick-add settings.
Products not appearing? Verify the product is active, available to the Online Store sales channel, and included by the collection’s manual selection or automated conditions.
Goodkind collection page with header, filters and product grid
The editorial collection header is followed by native filtering, sorting, and the product grid.

09 · Checkout path

Cart

Choose Drawer or Page under Theme settings → Cart. Both modes use Shopify’s cart data and support line-item quantity changes, removal, discounts, subtotal, tax/shipping context, and checkout.

  • The drawer opens from the header and refreshes after supported product forms add an item.
  • The cart page provides a full summary and can show product vendor names.
  • Order notes are available in both modes when Allow order notes is enabled.
  • Additional checkout buttons can appear on the cart page when Shopify provides them.

Always test changes with multiple products, variants, discounts, and a sold-out item before publishing.

10 · Shopify services

Accounts & localization

Customer accounts

Goodkind uses Shopify’s <shopify-account> component in desktop and mobile navigation. The account control appears only when customer accounts are enabled for the store. Account authentication and customer data remain managed by Shopify rather than by the theme.

Countries, currencies, and languages

The Header mobile menu and Footer render Shopify localization forms when the store has more than one available country or language. The country selector displays the country, currency code, and symbol; the language selector displays available language names.

Configure markets, domains, currencies, languages, and translated content in Shopify admin. The theme displays what Shopify makes available; it does not translate product or page content by itself.

11 · Extensions

Apps & Custom Liquid

App blocks

Goodkind supports compatible Shopify app blocks in the Apps section, Product information, and Featured product. Install and configure the app first, open the relevant template in the theme editor, select Add block, and choose the app block when it is offered.

If an app block is unavailable, confirm the app exposes a theme app extension for that template and that the app is installed on the current store. Some apps also require their app embed to be enabled under Theme settings → App embeds.

Custom Liquid

Use the standalone Custom Liquid section or product Custom Liquid block for small, trusted additions. Liquid runs as part of the storefront render and can affect layout, privacy, performance, or behavior.

Security note: only add code you understand and trust. Never paste secret keys, admin tokens, private customer data, or unreviewed scripts into Custom Liquid.

12 · Inclusive storefronts

Accessibility

Goodkind includes semantic headings and controls, visible focus treatment, labeled navigation and dialogs, keyboard-operable disclosure patterns, live regions for dynamic search, and reduced-motion consideration. These foundations do not replace merchant review and are not a certification.

  • Write meaningful alternative text for informative images; leave decorative image alt text empty where appropriate.
  • Keep headings in a logical order and use descriptive link and button labels.
  • Check contrast after changing colors and inspect text laid over campaign media.
  • Test menus, search, filters, sliders, product options, cart, and forms using only the keyboard.
  • Add captions or transcripts for meaningful video and avoid content that flashes.

13 · Storefront health

Performance

Real performance depends on product media, installed apps, custom code, tracking, location, device, and Shopify delivery. No theme can guarantee a particular Lighthouse score.

  • Upload images close to their intended aspect ratio and use Shopify’s focal-point tools where available.
  • Avoid large animated files and unnecessary autoplaying video above the fold.
  • Remove unused app embeds and review the storefront after installing or updating an app.
  • Use a limited font family and weight set; every additional font file adds work.
  • Keep Custom Liquid and third-party scripts small, trusted, and necessary.
  • Measure the published storefront with realistic products and apps, then investigate the largest requests and layout shifts first.

14 · Common fixes

Troubleshooting

An image is cropped unexpectedly

Adjust the section’s image position or product image ratio. For Hero and Slideshow, provide a separate mobile image when one crop cannot preserve the subject at both orientations. Also review Shopify image focal points.

The menu is not showing

In Header, enable Use main menu and select a menu, or add Navigation link blocks. Confirm each linked resource is published to the Online Store channel.

Products are not appearing in a collection

Check product status, Online Store availability, collection conditions, inventory rules, and active filters. Automated collections may take a moment to reflect changed conditions.

Swatches do not appear

Enable swatches in the Variant picker or global product cards. Then configure Shopify swatch color/image data on the relevant product option. Text options without swatch data remain readable option labels.

An app block is unavailable

Confirm the app supplies a theme app extension for the chosen section or template. Reopen the editor after installation, check app embeds, and follow the app developer’s placement instructions.

Changes are not visible

Confirm you edited the correct theme and template, save the editor, then open the preview link in a private window. Check whether the resource is assigned to a different template.

The storefront shows an older theme version

Check which theme is published under Online Store → Themes. Newly uploaded versions are separate library entries; publishing or previewing the intended copy is required.

15 · Quick answers

Frequently asked questions

Can I use Goodkind on more than one store?

Theme usage is governed by the license attached to the Shopify Theme Store purchase. In general, a Theme Store license is associated with the store for which it was purchased. Review Shopify’s current theme licensing terms before using the theme on another store.

Does Goodkind support Shopify apps?

Yes. Goodkind includes app-block locations in the Apps section, Product information, and Featured product. Compatibility still depends on the app’s theme app extension and implementation.

Can I change fonts and colors?

Yes. Heading and body fonts, type scale, heading case, global surfaces, accents, borders, buttons, and text colors are available in Theme settings.

Does Goodkind support multiple languages and currencies?

Goodkind displays Shopify’s available country/currency and language selectors. Configure Shopify Markets, languages, and translations in admin; the theme does not create translations automatically.

Where do I edit the homepage?

Open Online Store → Themes, customize Goodkind, and choose the Home page template. Add, remove, configure, and reorder sections in the editor sidebar.

How do I update the theme?

Add the newer Goodkind version to the theme library and review its templates and settings before publishing. Keep the current published theme as a rollback point while you transfer any required configuration or custom code.

Will an update remove my products or store content?

Products, collections, customers, orders, navigation, pages, and blog content live in Shopify rather than inside the theme ZIP. Theme settings, template arrangements, and code customizations belong to a particular theme copy and may need to be recreated or migrated.

Does Goodkind include product subscriptions?

Goodkind can display selling plans supplied through Shopify and compatible subscription configuration. Creating and managing the plans requires the relevant Shopify or app setup.

Can I add custom code?

Yes, through Custom Liquid and theme code editing. Duplicate the theme first, use only reviewed code, and understand that customizations may require manual work when updating.

Where can I get Goodkind support?

Use the Goodkind Support form for theme setup, bugs, compatibility, and documentation questions. Include the store URL, affected page, reproduction steps, and a screenshot when useful.