Shopify Online Store 2.0 setup, section configuration, support policy, FAQ and storefront guidance for the Kronox theme.
Shopify Theme Store ready documentation
Kronox is a flexible Shopify Online Store 2.0 theme. This documentation helps merchants install the theme, configure common storefront experiences, understand support coverage, and contact support with the right details.
Kronox is designed to be managed through the Shopify theme editor. Before publishing, duplicate the theme and test your changes on the unpublished copy.
Theme settings are designed around merchant workflows. Global branding, colors, typography, layout widths, header behavior, and footer content can be updated from the theme editor.
The logo, color system, type scale, and spacing rules apply across the full storefront experience.
Homepage, product, collection, blog, and static page content is managed with drag-and-drop sections and blocks.
Metafields and Shopify dynamic sources are supported; avoid hardcoded products or collections.
Global configuration
Use the gear icon in the Shopify theme editor to open Theme settings. These settings control storefront-wide defaults, so changes made here can affect multiple templates and sections at once. Individual sections may still offer their own settings when a more specific override is needed.
Add the store logo from Theme settings > Brand. Select an uploaded image or choose an image from Shopify's free image library. The logo is used in global brand areas such as the header and other theme surfaces that reference the store identity.
Set the primary storefront font from Theme settings > Typography. This font is the default typeface for the theme and helps keep headings, body text, buttons, and form controls visually consistent across the store.
Adjust storefront spacing from Theme settings > Layout. Choose a narrow or wide page width, set the page padding in pixels, and enable or disable the wishlist button. Use a wider layout for image-rich stores or large catalogs, and use narrower spacing when readability is the main priority.
Manage the theme color system from Theme settings > Colors. Edit existing color schemes, add new schemes, and choose the default color scheme for the store. Color schemes can be applied to sections throughout the theme, making it easier to create contrast between promotional, editorial, and product-focused areas without rebuilding section layouts.
Customize the gift card experience from Theme settings > Gift card. You can keep the global primary font or enable separate header and content font overrides, add an optional gift card logo, and edit the heading, subtitle, status labels, balance label, and other customer-facing text.
The lower gift card settings control the gift card code label, copy button text, copied confirmation, primary button label, and bottom meta text. Leave the bottom meta text blank if the gift card should automatically use the store name.
Add small global style adjustments from Theme settings > Custom CSS. Custom CSS is applied to the entire online store, so keep changes focused and test key pages after editing. For larger design changes, update the theme settings or relevant section settings first whenever possible.
The header controls the storefront logo, navigation, account and cart icons, localization selector, wishlist button, and predictive search field.
Choose the color scheme used by the header area.
Use Color scheme when the header needs its own palette. Keep Follow global theme color scheme enabled to use the default theme colors instead.
Control logo size and desktop placement.
Adjust Logo width on desktop and Logo width on mobile to fit the uploaded brand mark. Use Logo position on desktop and Icons position on desktop to place the brand and utility icons on the top row.
Control the navigation font and weight.
Turn on Enable menu font override only when the navigation should use a different font from the rest of the theme. Select Menu font and use Menu font weight to switch between default and bold labels.
Set the lower row alignment for menu and search.
Menu alignment on lower row and Search alignment on lower row support left, center, or right alignment. Use Search width on lower row to balance search visibility with available navigation space.
Select the Shopify menu shown in the header.
Choose the navigation menu from Menu. Keep menu labels short so the two-row header stays readable on desktop and collapses cleanly on smaller screens.
Enable optional image links in dropdown menus.
Turn on Show menu image links to display matching Menu image link blocks beside dropdown menu items. This works best for visual category shortcuts or featured links.
Add an icon to a top-level or submenu item.
Add a Menu item icon block, enter the exact Menu item title, then choose an Icon or upload a Custom icon image. Custom images override the selected icon.
Add helper text under submenu links.
Add a Submenu description block, match the submenu label in Menu item title, then add the short Description shown below that submenu item.
Add visual links beside a parent dropdown.
Add a Menu image link block and match the top-level dropdown label in Parent menu title. Set the Label, Link, and Image. If no image is selected, the fallback icon or fallback custom icon image is used.
Adjust global header-related defaults used by the theme.
Use Default color scheme to choose the fallback scheme used across the theme when a section follows global theme colors. Upload or select a Logo for the storefront brand mark, and use Enable wishlist button to show or hide wishlist actions.
The footer controls the storefront brand summary, trust items, navigation columns, newsletter signup, contact details, social links, and bottom bar. Configure it from Online Store > Themes > Customize > Footer.
Set the footer color treatment and container shape.
Choose a Color scheme, or enable Follow global theme color scheme to use the theme-wide default. Use Corner radius to soften or square off the footer panel.
Control the logo, name, tagline, and intro text.
Upload a Footer logo when the footer should use a different mark from the global logo. Set Brand name, Brand tagline, and Brand text for the footer intro. Blank fields fall back to store name, brand slogan, or brand short description when those values are available.
Show a customer signup panel in the footer.
Enable Show newsletter signup, then edit the heading, body text, email placeholder, button label, and rich text disclaimer. The form uses Shopify's customer newsletter form and shows success or error messages after submission.
Add store support details beside the newsletter panel.
Enable Show contact details to display the contact panel. Merchants can set the heading, email, phone, and service hours. Leave individual fields blank when they should not appear.
Add navigation through Link column blocks.
Footer navigation is managed with Link column blocks rather than section-level menu settings. Add one block for each column, then select the Shopify menu that should appear in it.
Configure copyright, payment icons, and Shop follow.
Set a custom Copyright name and Copyright text, then choose whether to show payment icons and the Follow on Shop button.
Use brand social accounts or manual social blocks.
Edit the Social heading and keep Show social links from brand settings enabled to automatically show the social accounts added in Shopify admin under Settings > Brand. Add manual Social link blocks here only when the footer needs extra platform links or custom URLs.
Control the global fallback values used by the footer.
Default color scheme is used when the footer follows global theme colors. The global Logo can also be used by the footer when no footer-specific logo is selected.
Add targeted styling only when necessary.
Use Custom CSS for small, section-specific adjustments. Keep changes scoped so they do not affect other theme sections.
Footer blocks are drag-and-drop content items. The footer supports up to 16 blocks total, with trust items limited to 4 so the footer stays compact on mobile and desktop.
Create reusable footer navigation columns.
Add a Link column block, enter a heading, and select a Shopify menu. If the heading is blank, the selected menu title can be used as the column heading. Link columns appear as desktop columns and mobile accordion rows.
Highlight short reassurance messages.
Add up to four Trust item blocks. Choose an icon such as Quality badge, Leaf, Return, or Lock, then write a short Label like "Easy returns" or "Secure payments".
Edit each trust item block individually.
The block settings include Icon and Label. Keep the label short so the feature list remains easy to scan beside the footer brand text.
Add manual links in addition to the Shopify brand social accounts.
Shopify brand social accounts are pulled into the footer automatically when enabled. Use this block to add extra manual links by choosing the platform, writing an accessible label, and adding the URL. Supported platforms include Instagram, Facebook, X, LinkedIn, Pinterest, Snapchat, TikTok, Tumblr, Vimeo, and YouTube. If the block link is blank, the matching brand setting can be used when available.
The homepage is built entirely with sections. Merchants can add and reorder hero banners, featured products, featured collections, rich text, image with text, newsletter, and promotional banner sections.
Homepage section
The Home collection links section creates a horizontal set of visual collection shortcuts near the top of the homepage. Use it to help customers move quickly into important categories, seasonal edits, brand campaigns, or any collection that should be easy to discover before they scroll deeper into the page.
Open the Shopify theme editor and choose Home page from the page selector. In the Template area, add or select Home collection links. The section can be reordered with the other homepage sections, so place it where category discovery makes the most sense for the store.
The section lives in the homepage Template area, below the header and above the footer. Add one block for each collection link you want to show. The screenshot shows multiple Collection tile blocks under the section, and the number of tiles can be changed by adding, removing, or reordering blocks.
Select Add Collection tile to add another shortcut. Each block controls one collection selector, which keeps the section flexible for small category menus, campaign rows, or larger collection groups.
Use Color scheme to match the section to the rest of the page. Enable Follow global theme color scheme when you want the section to inherit the storewide default.
Turn on the section font override only when this area needs a different font from the global theme typography. Adjust top and bottom padding to tighten the section or create more breathing room between neighboring homepage sections.
Collection tile blocks are the individual selectors inside this section. Each tile links to one selected Shopify collection, so merchants can guide customers to category pages, campaign pages, sale collections, or curated product lists. When a collection is selected, the tile uses that collection URL and collection image by default. The image can still be overridden when a campaign, category, or seasonal page needs a custom visual. Add more tiles when the homepage needs more shortcuts, or remove tiles when the row should stay focused.
Homepage section
The Home hero with deals section combines a large campaign slider with a compact deals list. Use the slider for seasonal promotions, launches, collection stories, or brand messages, and use the deals panel to feature discounted products beside the hero without sending customers away from the main homepage path.
Add Home hero with deals to the Home page template and place it near the top of the page when the store needs a strong campaign entry point. The section supports up to six Slide blocks, and only slides with an image are displayed on the storefront.
Use Color scheme to style the hero and deals panel. Keep Follow global theme color scheme enabled when this section should inherit the storewide default color scheme.
The slider and deals panel can use the global homepage font, or each area can use its own font. Enable Slider font override or Deals font override only when the campaign content needs a deliberate typography change.
Set Deals heading, then choose the Deals products source. Select individual products for a hand-picked list, or choose a collection when the deals should stay in sync with a sale, clearance, or campaign collection.
Use Deals limit to show between one and eight products. The Deals link label appears only when the source is a collection, because the link automatically points to the selected collection.
Enable Show accelerated checkout buttons when direct payment buttons should be available for single-variant products. Use Auto-rotate slider and Change slides every to control slider movement.
Adjust top and bottom padding to control how tightly the hero sits against the header and nearby homepage sections.
Each Slide block creates one item in the hero slider. A slide needs an image before it appears on the storefront. Optional text fields create the overlay content, and the link turns the slide into a clickable promotion.
Homepage section
The New arrival banner section highlights one selected product in a focused promotional banner. Use it for a recent launch, a restock, a seasonal product, or any item that needs more visual emphasis than a standard product card.
Use Color scheme to match the banner to the surrounding homepage sections. Keep Follow global theme color scheme enabled when the banner should inherit the storewide default colors.
The banner uses the homepage typography by default. Enable Section font override and choose a Section font only when this product feature needs its own type style.
Choose the product to feature. The section links the button to this product and uses the product's first image, falling back to the featured image when needed. If no product is selected, the section is only shown in the theme editor as a setup prompt.
Add a Custom heading when the banner needs campaign copy. Leave it blank to use the selected product title automatically. Use Badge label for short text such as New arrival, Restocked, Limited drop, or Online exclusive.
Enable Show product description to display a shortened version of the selected product description. Use Description word limit to keep the banner concise and balanced across desktop and mobile layouts.
Set Button label for the product link text. Adjust top and bottom padding to control how much space the banner has between neighboring homepage sections.
Homepage section
The Trending products section creates a focused product feature with promotional copy on one side and a small set of selected products on the other. Use it for best sellers, high-interest launches, seasonal picks, or any curated group that should receive stronger emphasis than a standard product grid.
Use Color scheme to align the panel with the rest of the homepage. Keep Follow global theme color scheme enabled when the section should use the storewide default colors.
The section inherits homepage typography by default. Enable Section font override and choose a Section font only when this featured product group needs a distinct type treatment.
Set the Badge label, Custom heading, and Custom text for the promotional copy. If the heading or text is left blank, the theme uses the first selected product title and description as fallback content.
Use Product description word limit to control fallback text length when Custom text is empty. This keeps product descriptions from becoming too long inside the banner layout.
Set Button label for the call to action. Add a Button link when the button should go to a collection, campaign page, or another destination. Leave it blank to link automatically to the first selected product.
Use Products to show to display between one and four product blocks. The desktop layout adapts the product columns to the selected count, while smaller screens collapse into a mobile-friendly layout.
Add one Product block for each item in the curated set. The section supports up to four blocks. Each block links to its selected product and uses the product featured image, falling back to the first product image when needed.
Adjust top and bottom padding to control the distance between this feature and neighboring homepage sections.
Product selection happens inside each Product block, not in the main section settings. Add a Product block, open the block settings, and use the product selector to choose the exact item that should appear in the Trending products visual area.
Homepage section
The Home featured products section displays products from one selected collection in a clean product grid. Use it for popular products, best sellers, new edits, seasonal collections, or any collection that should be easy to browse directly from the homepage.
Use Color scheme to style the section. Keep Follow global theme color scheme enabled when this product row should inherit the storewide default colors.
The section inherits homepage typography by default. Enable Section font override and choose a Section font only when this product row needs its own heading and card text style.
Set Heading for the title shown above the grid. Add optional Text when the row needs a short collection note, and use Link label for the header call to action. The link automatically points to the selected collection page.
Choose the Collection that supplies the product cards. The section shows products from this collection in collection order until the product limit is reached.
Use Products limit to show between four and twelve products from the selected collection. The section shows products in collection order until the limit is reached.
Use Products per row on desktop to choose three, four, or five columns. Mobile keeps the grid compact with two columns, while tablet screens use three columns.
Enable Show vendor when brand or vendor names help customers compare products. Enable Show secondary image to reveal another product image in cards that have more than one image.
Use Enable quick add for faster cart additions from the product cards. Use Enable quick buy when direct checkout buttons should appear for eligible products.
Homepage section
The Home promo strip section creates a row of short promotional discount boxes. Use it for sale messages, category-specific discounts, loyalty offers, shipping incentives, or quick campaign links that should sit between larger homepage sections.
Use Color scheme to align the strip with the homepage. Keep Follow global theme color scheme enabled when the section should inherit the storewide default color scheme.
Enable Use selected color scheme colors when the strip should use theme color tokens. Disable it only when the section needs the manual Background color setting instead.
The strip uses homepage typography by default. Enable Section font override and choose a Section font when the discount values and labels need their own type style.
Background color is used only when Use selected color scheme colors is disabled. This lets a merchant create a campaign-specific band without changing the global theme color scheme.
Adjust Top padding and Bottom padding to control how tightly the promo row sits between neighboring homepage sections. The default compact spacing works well for a strip between product rows or campaign banners.
Use Discount value for the large headline number or offer text, such as 40%, Free, or 2+1. Keep it short so the card remains balanced across desktop and mobile.
Use Discount text for the short label below the value, such as Discount, Off selected items, Free shipping, or Members only.
Add a Link when the discount box should open a collection, product, page, or campaign URL. If the link is blank, the box displays as a non-clickable promotional message.
A block appears when either Discount value or Discount text has content. Empty blocks are skipped on the storefront, and the section shows an editor-only empty message when no valid blocks exist.
Homepage section
The Home brand campaigns section highlights collection-led campaigns with editorial product imagery and short campaign copy. Use it for brand edits, seasonal drops, collaborations, gift guides, or any collection that benefits from a stronger visual story than a standard product row.
Use Color scheme to style the campaign frame and cards. Keep Follow global theme color scheme enabled when this section should inherit the storewide default color scheme.
The section inherits homepage typography by default. Enable Section font override and choose a Section font only when the campaign heading, badges, and card copy need a distinct type style.
Set Heading for the section title and use Text for a short explanation above the campaign cards. If both fields are blank, the header area is hidden and only the campaign cards are shown.
Adjust Top padding and Bottom padding to control the distance between this campaign frame and surrounding homepage sections.
Choose the Collection that the card should feature. This field is required for a real campaign card; blocks without a collection are skipped, and each card links automatically to the selected collection.
Use Brand title override when the card should show a shorter or more editorial brand name than the collection title. Add Campaign period for date ranges, launch windows, or limited-time campaign messaging.
Use Campaign text for the main message inside the card. Add a Highlight label for a short supporting note, such as Choose a collection, Limited edition, Online exclusive, or Shop the edit.
Add Primary image override and Secondary image override when the campaign needs custom editorial imagery. If they are blank, the section uses product images from the selected collection, then falls back to the collection image when needed.
Add, remove, and reorder Brand campaign blocks to control which campaigns appear first. The section supports up to eight campaign blocks.
The product page is the main conversion template for the theme. It combines a large media gallery, variant selection, price and compare-at price messaging, quantity controls, add to cart, accelerated checkout, product description, detail tabs, breadcrumbs, support content, complementary products, and related products.
Product template
Open the Shopify theme editor and choose Default product from the page selector. The product template is built with the main Product Page section followed by product discovery sections such as Complementary products and Product Related. Merchants can reorder the discovery sections, while the Product Page section should stay at the top because it contains the purchase flow.
Product section
The Product Page section is powered by Shopify product data and does not require merchants to choose a specific product manually. It uses the currently viewed product, selected variant, product media, collections, tags, inventory, selling plans, and gift card settings.
Use Color scheme when this product template needs a specific palette. Keep Follow global theme color scheme enabled when product pages should inherit the storewide default colors.
Enable Show brand when the vendor helps customers compare products or when brand recognition is important for the catalog. Disable it for stores where vendor names are internal labels.
Enable Show accelerated checkout buttons to display Shopify dynamic checkout buttons below the add-to-cart action when the selected variant can be purchased.
Enable Show gift card recipient form so gift card products can collect recipient details. This option appears only where Shopify's gift card product behavior applies.
Use Low stock threshold, Show SKU, Show inventory row, Show unit price, and Show product type in variant status to tune how much availability information is shown near the purchase form.
Product media
The gallery displays the product media assigned in Shopify admin. It supports multiple product images and media items, thumbnail navigation, previous and next arrows, variant-linked media changes, and an optional zoom modal for closer inspection.
Product content
Product information settings control the description area, details tab, variant metadata, tags, and typography. These options let merchants decide how much catalog data should appear on the product page without editing Liquid.
Enable Show product description when the product's Shopify description should appear in the product information tabs. Keep descriptions structured with short paragraphs, lists, and clear sizing or care notes.
Enable Show product details tab to show structured product metadata. The details tab can include product type, variant count, collection, and tags depending on the enabled settings.
Enable Show tags in details when tags are customer-friendly. Use Details tag limit to prevent long tag lists from overwhelming the details tab.
Enable Product font override only when product pages need a different type style from the global theme typography. Choose Product content font to control the product page heading, form, and supporting content typography.
Navigation
Breadcrumbs help customers understand where the product sits in the catalog. Enable Show breadcrumbs to display a path above the product layout. The section can use the current collection, the product's first collection, or up to two selected breadcrumb collections.
Product blocks
The Product Page section supports app blocks, custom Liquid, support cards, and custom accordions. Blocks are useful for product-specific services, delivery promises, care instructions, warranty notes, sizing guidance, or app-powered content.
Use Support card blocks for short reassurance points such as dispatch time, secure checkout, returns, or warranty coverage. The section supports up to four support cards.
Use Custom accordion blocks for expandable information. Each block can use rich text or pull content from a selected page, which keeps repeated policies easier to maintain.
Use app blocks for Shopify apps that need to appear in the product purchase flow. Use Custom liquid only for small trusted additions that cannot be handled by theme settings or app blocks.
Product recommendations
The default product template includes Complementary products and Product Related sections below the main Product Page section. Use these areas to help customers continue shopping after they understand the current product.
Product recommendations
The Complementary products section shows Shopify product recommendations with the complementary intent. It is best for accessories, add-ons, bundles, refills, matching pieces, or products that complete the item a customer is viewing.
Use Color scheme to style this recommendation row. Keep Follow global theme color scheme enabled when complementary products should use the same palette as the rest of the product template.
Enable Section font override only when this row needs its own typography. Use Section font to match the recommendation heading and cards to a campaign or product family.
Enable Show complementary products, then set Complementary products count between two and eight products. The section uses Shopify's complementary recommendation data for the current product.
Enable Show brand in complementary products when vendor names help customers compare items. Use Enable quick add or Enable quick buy only when the recommended products are simple enough to buy from a card.
Set Complementary products heading and Complementary products eyebrow to explain why these items belong together. Short labels such as Pairs well with or Complete the set work best.
Adjust Top padding and Bottom padding to control how tightly the row sits below the main product section or nearby recommendation sections.
Product recommendations
The Product Related section displays alternatives from the product's active or primary collection. It helps customers continue browsing similar items when the current product is not the perfect fit.
Use Color scheme for the related products row. Keep Follow global theme color scheme enabled when the row should match the product page's global color treatment.
Enable Section font override and choose a Section font only when the related products row needs a distinct text style from the main product page.
Enable Show related products and set Related products count between two and eight products. The section appears only when the current product has a collection with more products to show.
Enable Show brand in related products when brand names are useful in comparison. Enable quick add supports faster cart additions, while Enable quick buy is useful when direct checkout makes sense for the catalog.
Use Related products eyebrow for a small contextual label. Use Related products heading for the main row title, such as You may also like.
Adjust Top padding and Bottom padding to create enough separation from complementary products, reviews, or other product-template sections.
The Collection list template is the storewide collection index. It combines a Collections banner section with the Collections grid section, which paginates Shopify collections and renders reusable collection cards.
collections object. It does
not require merchants to select every collection manually, and it includes app block support for extensions
that need to appear above the collection cards.
Collection list header
The Collections banner introduces the index page with an eyebrow, heading, intro text, and optional total collection count. If the heading is left blank, the section falls back to the translated collections title. The count badge uses the current number of collections available to the template.
Keep Follow theme default color scheme enabled when the collection index should inherit global theme colors. Choose Color scheme only when the list page needs a different palette from the rest of the storefront.
Enable header font override when the banner needs a different display font. The selected font is applied to the banner container, including the title, eyebrow, intro, and count badge.
Use Eyebrow, Heading, and Intro text to set the page context. Enable Show total collection count to display the count badge, then edit Count suffix when the store needs different wording.
Top padding and Bottom padding control the banner's vertical rhythm. The default spacing keeps the header close to the grid while still separating it from the storefront header.
Collection cards
The Collections grid section paginates all published collections and renders each one as a linked card. Cards use the collection featured image when available, a Shopify placeholder when missing, the collection title, optional product count, and optional truncated description.
The grid can inherit the global color scheme or use a specific scheme. Enable cards font override only when collection cards should use a different font from the main theme typography.
Collections per page controls the Liquid paginate size. Choose numbered pages for predictable navigation, a load-more button for progressive browsing, or infinite scroll for a more continuous collection discovery flow.
Set Desktop columns from 2 to 5 and Mobile columns to 1 or 2. Use Grid gap to tighten or loosen the card spacing across the index.
Choose landscape, square, or portrait for Collection image ratio, then use Image fit to decide whether images crop or contain. The Default collection icon appears on any card without a matching Collection icon block.
Enable Show collection product count for catalog-size context. Enable Show collection description to display a plain-text excerpt, then use Description word limit to keep card heights consistent.
Empty state heading and Empty state body appear when there are no collections available to render. Keep the message action-oriented so merchants understand they need to create or publish collections in Shopify Admin.
Top padding and Bottom padding apply around the grid content, app blocks, empty state, and pagination. The default bottom padding gives pagination controls room before the footer.
Grid blocks
Collection icon blocks let merchants assign a specific icon to a specific collection card. During rendering, the section loops through blocks and matches the selected block collection handle to the current card's collection handle. When no matching block exists, the card uses the section's default collection icon.
Open Collections grid and choose Add block, then add a Collection icon block. Blocks can be reordered in the editor, but the storefront match is based on the selected collection, not the block position.
Select the target Collection, then choose an Icon. Available options are wristwatch, tag, percent, men, women, stack, clock, and grid. Use icon blocks for important collections that need a clearer visual signal than the default icon.
aria-hidden="true".
Collection pages are structured with grid layouts, sorting, filtering, and pagination to support large catalogs. Shopify Search & Discovery filters can be used for product type, vendor, price, variant options, and metafields.
Collection header
The Collection banner section introduces the active collection with a title, optional description, product count, and image. By default it uses the collection title, description, and featured image from Shopify admin. Merchants can override those fields from the theme editor when a collection needs campaign-specific copy or artwork.
Use Color scheme only when this collection header needs a dedicated palette. Keep Follow global theme color scheme enabled to inherit the storewide default colors from theme settings.
Enable section font override when the banner should use a different font from the global primary font. The Liquid renders the selected font face and passes font variables into the banner, so the heading, eyebrow, count pill, and description stay visually consistent.
Eyebrow label defaults to the collection label translation when left blank. Custom title, Custom description, and Banner image are optional overrides. Leave them empty to use the collection title, collection description, and collection featured image.
Enable Show collection description to display the collection description or the custom rich text override. Enable Show collection image in header to add the image column. If no image is available, the Liquid automatically keeps the banner as a copy-only header.
Banner height on mobile and Banner height on desktop control
the minimum header height through CSS variables. Show product count displays the
live collection.products_count value, which is useful for large catalogs and filtered
category browsing.
Adjust Top padding and Bottom padding to control the distance between the banner and neighboring template sections. The default 24px spacing keeps the banner visually connected to the product grid without crowding the page.
Merchandising
Collection promotions is an optional section for campaign tiles above the product grid. The section renders only when blocks exist, which keeps empty collection templates clean. Use it for seasonal messages, shipping offers, sale callouts, or links to related collections.
Color scheme and Follow global theme color scheme work the same way as the banner. Use the global scheme for a quiet product-listing page, or choose a specific scheme when promotional content needs stronger contrast.
The font override applies to the promotion tile text and button. Top padding and Bottom padding control how tightly the tile row sits between the banner and the collection products section.
Add up to three Promo tile blocks. Each block has an image, heading, text, button label, button link, and overlay accent color. The section also accepts app blocks, with a maximum of four total blocks.
Product listing
Collection products is the main catalog section. It paginates the current collection products, renders
Shopify filters from collection.filters, provides sorting from collection.sort_options,
and reuses the product showcase/card system for consistent product cards across the theme.
Enable filters to show Shopify Search & Discovery filter groups when the collection has filters available. Filter groups support checkbox values and price ranges, active filter counts, clear-all links, and a collapsible mobile panel. Enable sorting to show the collection sort dropdown.
Products per page controls the Liquid paginate size. Choose Numbered pages, Load more button, or Infinite scroll. Desktop columns can be set from 2 to 5, while mobile supports 1 or 2 columns.
Show vendor displays product vendor names when brand comparison matters. Show second image on hover adds alternate product imagery. Enable quick add and Enable quick buy expose faster purchase paths from the grid when products support them.
Enable Show promo badge and enter Promo badge text for campaign labels such as sale, bundle, or limited-time messaging. Show status badge uses the configured Status badge text, which defaults to "In stock".
When a collection or filtered result has no products, the section displays the translated empty state text and a clear-all link back to the collection URL. This prevents dead-end collection pages after customers apply restrictive filters.
Product section padding controls the vertical rhythm around the toolbar, filter sidebar, product grid, and pagination. The default bottom padding gives numbered pagination or load-more controls room before the footer.
The cart template combines a clear order review banner, editable cart line items, an order summary, discount code controls, accelerated checkout buttons, and optional product recommendations. It is built from three reusable OS 2.0 sections: Cart banner, Cart, and Cart recommendations.
Cart header
The Cart banner section introduces the cart page and gives customers a quick summary before they edit their order. It displays the translated cart title, item count, subtotal, total savings when discounts are active, and short copy that changes between filled and empty cart states.
Keep Follow global theme color scheme enabled when the cart should inherit the storewide default colors. Choose a specific Color scheme only when the cart page needs a dedicated campaign or checkout palette.
Use Enable heading font override only when the cart banner needs a dedicated heading font. Leave it disabled to keep the cart aligned with the global theme typography.
Eyebrow appears above the cart title. Filled cart description is shown when the cart has items, while Empty cart description is shown when the cart has no items. Keep both descriptions short because the banner also includes live summary pills.
Top padding and Bottom padding control the vertical rhythm around the banner. The default 12px spacing keeps the banner visually close to the cart controls.
Cart controls
The Cart section is the functional center of the template. It renders each line item, product image, variant details, selling plan details, custom line item properties, quantity controls, remove links, cart notes, discount code controls, subtotal rows, checkout, dynamic checkout buttons, and the empty cart state.
Empty state heading and Empty state body are shown only when the cart has no items. Use them to guide customers back into browsing rather than explaining the cart mechanics.
Continue shopping label controls the link text. If Continue shopping link is empty, the section falls back to the all products collection, so the link always has a safe destination.
Enable Show cart note when customers should leave delivery instructions, gift notes, or order comments. Cart note label and Cart note placeholder keep the field clear for the store's order workflow.
Show vendor, Show product type, and Show availability badge add small context pills to each cart item. Enable them for large catalogs where customers may compare brands, categories, or in-stock status.
Summary heading and Summary message appear above the checkout action. The summary automatically includes subtotal, line-item savings, cart-level discounts, total, discount code input, checkout, dynamic checkout buttons, and the optional tax and shipping notice.
Keep Enable sticky summary on desktop on for longer carts so checkout remains easy to reach while customers review line items. Disable it only if another app or custom layout needs the summary to scroll normally.
Show tax and shipping notice displays the translated Shopify tax message below checkout. Adjust section padding when the cart sits close to banner or recommendation sections.
Cart merchandising
Cart recommendations adds a product grid below the cart. It can use a selected collection, or if no collection is selected, it falls back to the first collection found on a product currently in the cart. The section skips products already in the cart so recommendations stay useful.
Enable Show recommendations, then choose a Recommendations collection for curated add-ons. Leave the collection empty when the fallback collection from cart items should drive the recommendations automatically.
Recommendations heading labels the product grid, while Recommendations link label controls the link to the source collection. The collection title is also shown as a small eyebrow above the heading.
Set Recommendations count between two and eight products. Use Show recommendation vendor, Enable recommendation quick add, and Show dynamic checkout buttons to match the store's product card buying flow.
The section renders only when recommendations are enabled and a collection is available. If the selected or fallback collection has no eligible products, the storefront stays clean instead of showing an empty grid.
Before publishing
The search template gives customers a dedicated place to browse matching products, pages, and blog articles. It includes result summary messaging, product cards, optional filters and sorting, editorial result cards, pagination, and clear empty or ready states.
Template section
The Search section controls the page style, product grid density, result controls, and product card actions. It is designed for stores with small or large catalogs because the same section can show a compact product grid, a filter sidebar, sorting, and progressive pagination.
Keep Follow global theme color scheme enabled when the search page should inherit the storewide default palette. Choose a specific Color scheme only when search needs a dedicated visual treatment.
Use Enable heading font override for result headings and status cards. Use Enable content font override for body copy, controls, filters, and card text. Leave both disabled to keep search aligned with global theme typography.
Enable filters displays Shopify search filters when they are available. Enable sorting adds the search sort selector. Products per page controls pagination size, while Desktop columns and Mobile columns set the product card grid density.
Choose Numbered pages for predictable navigation, Load more button for customer-controlled browsing, or Infinite scroll for a continuous discovery experience.
Show vendor and Show secondary image control card details. Enable quick add and Enable quick buy let customers move from search results to purchase faster when the product card supports those actions.
Customer experience
When a customer performs a search, the section shows a status banner with the result count and search term. Product results are rendered first in the product grid. Article and page results are displayed below as editorial cards with type labels, images when available, excerpts, and article publish details.
If no search has been performed, the page shows a ready state that asks customers to use the search field. This keeps the template useful even when someone lands on the search page directly.
If Shopify returns zero matches, the section displays an empty state with the searched term and a zero result count. The copy is translated through locale strings, so it can be localized with the rest of the theme.
Filters are read from search.filters and submitted through a semantic form. Configure
product type, vendor, price, option, and metafield filters in Shopify Search & Discovery. The
theme preserves the active search term and result type while filters or sorting are applied.
Load more and infinite scroll fetch the next results page, append product and editorial cards, and refresh product card behaviors such as quick actions and image sliders. Status text uses live regions so assistive technology receives loading feedback.
Quality check
Confirm Shopify Search & Discovery filters are configured, then test product type, vendor, price, variant option, and metafield filters from the search results page.
Test queries that return products, pages, and articles. Product cards should remain in the grid, and editorial results should appear as separate article or page cards.
Check one-column and two-column mobile grid settings, filter panel behavior, sort controls, and pagination on mobile and desktop.
Visit the search page before submitting a query and test a query with no matches. Both states should show clear translated messaging and should not leave an empty product grid on the page.
The Blogs page documents the blog listing template. It shows the current Shopify blog title, article count, optional intro copy, a highlighted first article, article cards, tags, author and date metadata, excerpts, pagination, app blocks, and translated empty-state messages.
templates/blog.json contains a single
Blog section named main. The section uses the live blog object,
so merchants do not need to select a blog, article, image, or collection manually.
Template
The default blog template should remain focused on editorial browsing. Keep the Blog section at the top of the template because it contains the blog title, summary count, article list, and pagination. Additional reusable sections can be added below it when a merchant needs newsletter signup, featured collections, or promotional content after the article list.
The page title comes from blog.title. Article cards, the highlighted article, article
count, tag links, dates, authors, excerpts, and pagination all use Shopify blog and article objects.
Because the page is a JSON template, merchants can reorder or add supporting sections around the main Blog section without editing Liquid. The main section also supports app blocks.
Section settings
Blog section settings control the visual style, hero text, typography, article density, desktop grid columns, image crop, metadata, excerpts, CTA text, and empty-state copy. Leave optional text settings blank when the translated default labels should be used.
Keep Follow theme default color scheme enabled for a storewide look. Select a specific Color scheme only when the blog needs a dedicated editorial palette.
Eyebrow appears above the blog title, and Intro text appears below it. The title itself always uses the current Shopify blog title.
Use Enable heading font override for the hero and section headings. Use Enable blog list font override for featured cards, article cards, pagination, and empty states.
Editorial lead
Enable Highlight first article on first page to turn the newest article on page one into a large editorial card. The featured card uses the article image, title, excerpt, metadata, and CTA, then the remaining articles continue in the grid below.
Featured card label customizes the small editorial label. When left blank, the section uses the translated featured article label from the theme locale files.
The highlighted card appears only on page one. Paginated pages show the standard article grid so customers can continue browsing without repeated lead content.
Article browsing
Article cards are designed for scanning. They include a linked image, title, optional date and author, optional tag links, excerpt, and a compact article CTA. The grid adapts from one column on small screens to a wider editorial layout on desktop.
Articles per page controls Shopify pagination from 4 to 16 articles. Use a lower value for image-heavy journals and a higher value for announcement-heavy blogs.
Articles per row on desktop controls the desktop grid from 2 to 4 columns. The section keeps mobile layouts readable and also adjusts image loading sizes to match the selected desktop density.
Article image ratio supports Adapt to image, Landscape, and Square. Landscape is the default and works well for most editorial thumbnails.
Use Show publish date, Show author, and Show tags to decide how much article context appears on listing cards. Tag links point to the current blog's tagged URL.
Excerpt length trims article excerpts or content from 12 to 60 words. Article CTA label overrides the translated read-article text when a merchant wants a custom call to action.
States and extensibility
If the blog has no articles, the section renders an empty state instead of an article grid. Merchants can customize Empty state heading and Empty state body, or leave them blank to use translated defaults.
When the blog has more articles than the configured page size, Shopify's default pagination appears below the grid with a localized navigation label.
The Blog section accepts app blocks. Use them for editorial integrations that belong inside the blog listing flow, such as review widgets, loyalty banners, or content tools.
Quality check
The Blog documentation covers the individual article page. This template turns Shopify article data into a polished reading experience with a back-to-blog link, article title, featured image, rich text content, author and publish date metadata, tags, comments, related articles, app blocks, and configurable typography.
templates/article.json contains a single
Article section named main. The section does not require merchants to select
a specific article manually; it uses the currently viewed article, its parent blog, comments, tags, image,
content, and neighboring blog articles.
Template
The article template should stay focused on reading. Keep the Article section first because it contains the article title, media, body content, comments, and related story discovery. Merchants can add supporting sections below it if they need a newsletter signup, featured products, or campaign content after the article.
The page renders article.title, article.image,
article.content, article.author, article.published_at,
article.tags, and article.comments. Related cards are pulled from
blog.articles while skipping the current article.
The JSON template keeps the page compatible with Shopify Online Store 2.0 section editing. The main Article section also supports app blocks for article-level integrations.
Section settings
Article settings control the page palette, spacing, visible metadata, back link label, typography, comments, related articles, and translated fallback labels. Most settings are optional and can be left blank to use the theme's locale strings.
Keep Follow theme default color scheme enabled when article pages should inherit the storewide palette. Choose a dedicated Color scheme when editorial pages need a more distinct reading surface.
Top padding and Bottom padding control the vertical breathing room around the article section. Defaults keep the article close to the header while leaving room after comments and related articles.
Show publish date, Show author, and Show tags decide which article details appear below the content. Tag links route customers back to the parent blog's tagged view.
Back link label customizes the pill-shaped link above the title. When blank, the section uses the translated back-to-blog label.
Use Enable header font override for the back link and article title. Use Enable content font override for article body, metadata, comments, related cards, and app blocks.
Reading experience
The article layout starts with a compact back-to-blog link, then centers the article title with a decorative divider. If the article has a featured image, it appears as a wide responsive image before the article body. The body renders Shopify rich text directly, so headings, paragraphs, images, lists, and embedded content should be authored cleanly in Shopify admin.
The image uses Shopify image filters with responsive widths and eager loading because it is near the top of the article. If no article image exists, the layout simply continues into the content without a blank media frame.
Article body content is wrapped in the theme's rte styling. The first paragraph receives
editorial treatment on larger screens, while mobile removes the drop-cap effect for easier reading.
Tags appear as small linked chips when enabled and when the article has tags. Use tags for topic browsing such as buying guides, care tips, releases, interviews, or announcements.
Community
The comments area appears only when Show comments section is enabled and Shopify blog comments are enabled for the parent blog. This prevents an empty comment form from appearing on stores that do not use blog comments.
Comments heading overrides the translated comments title. The rendered heading includes the live comment count when comments exist.
Comments per page controls comment pagination from 5 to 30 comments. Pagination links include the comments anchor so customers return to the comment area after changing pages.
The form includes required name, email, and body fields with proper labels and browser autocomplete. Comment success message can be customized, or left blank to use the translated moderated or unmoderated success message.
Quality check
Static pages can be prepared with rich text content and flexible section composition, so merchants can build store policies, brand pages, guides, and other reusable page layouts.
Page template
The About page uses the page.about template and the About story section. It is designed for brand storytelling: a hero introduction, supporting page content, value cards, a milestone timeline, a founder-style quote, and a final call to action. Merchants can edit the page copy in Shopify admin and fine-tune the full storefront layout from the theme editor.
The default page.about.json template contains a single About story section with four Value blocks and five Milestone blocks. The blocks can be reordered, edited, or removed in the theme editor. The section also supports fallback theme text, so the page still previews cleanly before a merchant finishes every field.
In Shopify admin, create or open an About page and assign the about theme template. Add the long-form brand story in the page content area when the section setting Show page content should display it beneath the intro text.
Select About story in the Template area. Use the global color scheme option when the page should inherit the storewide palette, or choose a dedicated color scheme for a more editorial brand page.
Use Content max width to control how wide the page can stretch on large screens. The default is 1640px, which gives the hero and timeline enough room without making text lines too long.
Set the Eyebrow, Heading, and rich text Text fields to introduce the brand. Leave the heading blank only when the page title should act as the main heading.
Enable Show page content to display the Shopify page body inside the hero area. This is useful when merchants prefer editing long narrative copy from the Pages admin instead of inside section settings.
Add a Button label and Button link when the intro should lead customers to collections, featured products, a journal page, or a contact page. The button is hidden until both fields are filled.
Add a Primary image for the hero media and a Secondary image for the journey area. Use images with clear subjects and similar visual tone so the page feels intentional across desktop and mobile layouts.
Set the Journey heading, Quote text, and Quote author to connect the timeline with a human brand voice. If these fields are blank, localized default copy is used.
Use the CTA image, heading, text, and up to two buttons to send customers to the next step after they read the brand story. Common destinations are a collection list, a featured collection, or the contact page.
Value blocks create the compact cards below the hero. Use them for brand promises such as quality, responsible materials, delivery, design, service, or warranty. The section supports up to four Value blocks, each with an icon, heading, and short text.
Milestone blocks build the timeline in the journey area. Use them for founding moments, product launches, global expansion, sustainability changes, store openings, community initiatives, or other proof points that help customers understand the brand's progression.
Page template
The storefront Contact page uses the page.contact template. This is different from the documentation support form linked in the header. The storefront template is built for customer contact, store details, and social channels inside Shopify, while the documentation contact form is only for public Kronox theme support.
The default page.contact.json template contains two sections. The first section, Contact page, renders the page heading, optional page body, Shopify contact form, and contact details sidebar. The second section, Contact social links, renders brand social links from Shopify brand settings and optional manual social network blocks.
In Shopify admin, create or open the customer-facing Contact page and assign the contact theme template. Add any intro copy in the page content field when the page should show a short note above the form and contact details.
Use Follow global theme color scheme when the page should inherit storewide colors. Disable it and choose Color scheme when the contact area needs its own background and surface treatment.
Use Content max width to control the full page width. Adjust top and bottom padding to place the form comfortably between the header, social links, and footer.
Set Contact page heading when the storefront heading should be different from the Shopify page title. If the Shopify page has body content, the section displays it under the heading as introductory copy.
Keep Enable contact form turned on when customers should be able to send a message through Shopify's built-in contact form. The form includes name, required email, optional phone, and required message fields.
Use Show phone field when phone follow-up is useful for the store. Disable it for simpler support workflows where email-only contact is preferred.
The sidebar is shown when at least one contact detail is filled in. Use Response heading and Response text to set expectations, then add email, phone, location, and working hours as needed. Email and phone values become clickable links on the storefront, while location and working hours support multiple lines.
The Contact social links section helps customers continue the conversation on social channels. It can pull links from Shopify brand settings, render manual social network blocks, or combine both. Social cards are rendered with the contact-social-card snippet, which shows the platform icon, label, optional handle, and a link arrow.
Enable Show Shopify brand social links to use social URLs configured in Shopify brand settings. The section supports common platforms including Instagram, Facebook, X, LinkedIn, Pinterest, TikTok, YouTube, Snapchat, Tumblr, and Vimeo.
Add Social network blocks for page-specific channels or custom labels. Each block has a platform, label, handle, link, and Open in new tab option.
Enable Use Shopify brand link when a manual block link is blank when manual blocks should inherit the matching brand social URL. This is helpful when merchants want custom labels or handles without re-entering every link.
Page template
The FAQ page uses the page.faq template and one main FAQ section. It is built for customer self-service: a clear help-center hero, category buttons, filtered question accordions, and an optional support card for customers who still need help.
The default page.faq.json template includes six Category blocks and seven Question blocks. Category blocks create the filter buttons across the page, while Question blocks create the accordion items. Each question is connected to a category by its Category setting, so customers can filter answers by topic.
In Shopify admin, create or open the FAQ page and assign the faq theme template. Use the Shopify page body only when the FAQ section setting should pull page content into the hero.
Keep Follow global theme color scheme enabled when the FAQ page should inherit the storewide palette. Use Color scheme, Content max width, and Corner radius to tune the full FAQ layout.
Adjust top and bottom padding when the FAQ page needs more room below the header or above the footer. Keep spacing moderate so customers can reach the questions quickly.
Use Eyebrow, Heading, and rich text Text to introduce the page. If the Text field is blank, enabling Show page content when intro text is blank lets the section display the Shopify page body instead.
Add a Hero image when the FAQ page needs a warmer service or product-care visual. If no image is selected, the hero remains text-first and the page still works cleanly.
Enable Show support card to display help copy, email, phone, hours, and a CTA button below the FAQ list. This is useful when customers may need order-specific support.
Category blocks create the filter buttons customers use to switch between FAQ topics. The section supports up to eight categories, including Orders, Shipping, Returns, Product care, Warranty, Payments, Custom 1, and Custom 2. A category only becomes useful when one or more Question blocks use the same category connection.
Question blocks create the accordion rows inside the FAQ list. Each block has a category, question, rich text answer, and an Open by default option. When customers choose a category, the section hides questions from other categories and opens the first visible item.
The policy page uses the page.policy template and the Policy tabs section. It gives merchants a single, scannable place for returns, shipping, privacy, terms, warranty, and other policy content without hardcoding store-specific text.
Page template
In Shopify admin, create a page for store policies and assign the policy theme template. The template is section-based, so merchants can keep the page flexible while the Policy tabs section handles the structured policy layout.
Add broad introductory copy in the Shopify page content area when the section setting Show page content when intro text is blank is enabled. This keeps longer policy introductions editable from the Pages admin.
The default template includes Returns, Shipping, Privacy, and Terms blocks. Merchants can edit, remove, duplicate, or reorder these blocks from the theme editor.
Policy tabs section
Select Policy tabs in the Template area to control the page wrapper, hero content, spacing, and support area. These settings affect every policy tab on the page.
Enable Use global color scheme when the policy page should inherit the storewide palette. Disable it to choose a dedicated color scheme. Use Content max width to control the maximum layout width on large screens.
Corner radius, Top padding, and Bottom padding tune the page rhythm. The defaults create a roomy documentation style that still works on mobile.
Set the Eyebrow, Heading, and rich text Text fields for the top introduction. If the section heading is blank, the page title is used as the main heading.
Policy blocks
Each Policy block becomes one tab and one matching content panel. The section supports up to eight policy blocks, which is enough for common store policies without making the tab bar hard to scan.
Choose an Icon for the tab, then set the Tab title and Tab description. Available icon styles include returns, shipping, privacy, terms, and lock.
Use Main heading and Main text for the policy overview. Keep the first paragraph short so customers can understand the policy before reading the detailed cards.
Add two highlight cards for the most important requirements, such as return windows, packaging rules, shipping timelines, data usage, or warranty exclusions.
Enable Show steps to display a four-step process. Each step has a heading, text, and icon. Use this area for workflows like request, review, approval, and resolution.
Step icon choices are Mail, Review, Check, and Refund. Pick icons that match the customer action, not just the policy category, so the process is easier to scan.
Blank step headings or text are skipped. This lets merchants use fewer than four visible steps when a policy needs a simpler flow.
Enable Show comparison cards to show a positive and negative card. This pattern works well for included versus not included, eligible versus not eligible, or available versus restricted details.
Use the positive and negative rich text fields for short bullet lists. Keep each bullet specific so customers do not need to contact support for basic eligibility questions.
Use direct headings such as Included, Not included, Eligible, Not eligible, Covered, or Excluded. The comparison card styling handles the visual distinction.
The final rich text field completes the negative comparison card. Use concise bullets for exclusions, restricted cases, or policy limits.
Support card
The optional support card appears below the policy panels. Use it for direct help channels when customers still need a human answer after reading the policies.
Toggle Show support card on when the policy page should include a final contact area. Turn it off for stores that route all service requests through a separate contact page.
Add support email, phone, and hours. Email and phone render as customer-friendly links, while support hours appear as plain text.
Add a Support button label and Support button link to send customers to a contact page, help center, returns portal, or order lookup page.
Best practices
Put the most important promise or limitation in the tab description, then use the panel for details. Customers should understand the policy shape before opening every card.
Avoid campaign-specific copy in this page. Use it for long-lived operational information such as returns, shipping, privacy, service terms, warranties, repairs, subscriptions, or store pickup.
On small screens, the tab list becomes horizontally scrollable and each active panel stacks into a single column. Review long tab titles and comparison lists on mobile before publishing.
Custom coding tutorials are provided as educational guidance only unless a support response explicitly says otherwise. Always duplicate your theme before editing code. For production customizations, consider hiring a qualified Shopify Partner. We are a Shopify Partner, and you can contact us through the support form if you need help with custom code.
Kronox support includes theme bug fixes, setup guidance for built-in theme features, and answers to merchant questions about documented settings. Support does not include custom coding, third-party app configuration, store data entry, or custom design implementation.
Support requests are reviewed using the details submitted through the contact form. Include your store URL, screenshots when possible, and clear steps to reproduce the issue.
Duplicate your live theme, apply the update to the copy, review key templates, then publish when testing is complete.
Yes. Use Shopify metafields and dynamic sources where the theme editor exposes compatible settings.
Enable filters in Shopify Search & Discovery and confirm the collection has products matching the filter values.
The theme is built for Shopify best practices, but app behavior is controlled by the app provider. Contact the app developer for app-specific issues.
RTT Intelligence
www.rttintelligence.com
Sanayi Mah. Teknopark Bulvarı No:1/4C
Pendik / Istanbul, Turkey
If your path brings you nearby, we would be happy to welcome you for a cup of tea.
We are based in one of Europe's largest incubation centers in Istanbul, surrounded by technology teams, founders, and product builders.
