Crolum documentation

Crolum is a Shopify theme for children's fashion and occasion wear. It's built around hang-tag product cards that show sizes and colors at a glance, shoppable lookbooks and editorial sections. This guide explains how to install Crolum, set it up and use every section and feature.

Installation

1. Open the Crolum page in the Shopify Theme Store and select Try theme. Shopify adds the theme to your theme library as an unpublished draft.
2. Select Customize to open the theme editor and set up your store.
3. When you're ready, buy the theme and select Publish.

You can try Crolum for free for as long as you like. You only pay when you publish it. A purchase covers one store.

First steps

1. Upload your logos and favicon under Theme settings › Logos.
2. Set your colors under Theme settings › Colors and your fonts under Theme settings › Typography.
3. Create your menus in Online Store › Navigation. The header uses main-menu. Each of the three footer columns can use its own menu.
4. Check that your product options are named Size and Color (or add your own names under Theme settings › Product cards). Hang-tag cards use these names to show sizes and swatches.
5. Build your home page with sections in the theme editor.
6. Open a product with several variants and images, and check the product page and the cart.

Theme editor basics

Open Online Store › Themes › Customize. Use the page selector at the top to switch between templates (home page, product, collection, cart, blog and others).

• Sections are the large building blocks of a page. Select Add section to insert one, and drag sections to reorder them.
• Blocks are the items inside a section, for example the slides of a carousel or the pins of a lookbook.
• Theme settings (the brush icon) control global styles: logos, colors, fonts, buttons, cards and badges.

Section dimensions

Most sections have a Section dimensions group at the end of their settings. Turn on Custom section dimensions to set the section width, a maximum width and the height mode (automatic, minimum or fixed). Desktop and mobile have separate values. Leave it off to use the global page width.

Logos and favicon

Open Theme settings › Logos. Crolum uses separate logo images, so your logo stays readable on every background.

With Homepage logo selection, Other pages logo selection and Footer logo selection you choose which image appears where. Automatic · page logo uses the homepage logo on the home page and the other-pages logo everywhere else. If an image is missing, Crolum falls back to the page logo, then the general logo, then the logo in the header or footer section, and finally your store name as text.

Set the logo width and maximum height for desktop and mobile under Header logo dimensions. Turn on Use central footer dimensions to control the footer logo size here instead of in the footer section.

Upload a square Favicon of at least 96 × 96 px. PNG works best.

Colors

Open Theme settings › Colors.

Keep a contrast ratio of at least 4.5:1 between text and its background. Many sections, such as the lookbook, customer feedback and the editorial blog, have their own color settings. These override the global colors for that section only.

Typography

Open Theme settings › Typography. Choose a font from the Shopify font library for each of these groups: Body text, Headings, Navigation and Buttons. Each group has a font weight, line height and letter spacing.

Under Separate font sizes you can set desktop and mobile sizes for:

• body text and headings H1 to H6
• the hero heading and the product page title
• product and collection card titles, prices, navigation and buttons

Crolum only loads the font weights you use. If a weight isn't available for a font, the nearest available weight is used.

Buttons

Open Theme settings › Buttons. There are three button styles: Primary, Secondary and Light. Sections let you choose one of these styles for each button, so a change here updates every matching button in your store.

Each style has these settings:

• background, text and border colors, each with a hover color
• corner radius, border thickness and minimum height
• horizontal and vertical padding for desktop and mobile
• letter case (original, uppercase, lowercase) and an optional drop shadow
• Use individual typography, to give the style its own font, size, letter spacing and line height

Secondary buttons also have a Transparent background option. Use light buttons on dark images, for example in the hero.

Layout, dimensions and spacing

Layout

• Page width sets the maximum content width.
• Corner radius sets the global rounding of images, cards and inputs.
• Show brand on product cards shows the product vendor above the title.

Page dimensions

Set the page width and an optional maximum width for desktop and mobile. Minimum page height mode can be automatic, a share of the viewport height, or a fixed number of pixels.

Spacing

Set the following separately for desktop and mobile:

• the default spacing above and below sections
• the left and right page margins
• the gaps in image grids and in the product gallery

Turn on Apply side margins to hero and slideshow to give full-width banners the same side margins as the rest of the page on mobile.

Product cards and images

Open Theme settings › Product cards and images.

• Product cards: image ratio (3:4, 9:16, 1:1, 2:3, 4:5, 4:3, 16:9, original or custom) and image fit (fill/crop or show entire image). Desktop and mobile are set separately.
• Product gallery: the same options for images on the product page.

Use Show entire image for packshots on a white background. Use Fill / crop for model photos.

Hang-tag product cards

The hang-tag card is Crolum's signature product card. It looks like a clothing tag with a punched hole and a thread. It shows the available sizes and colors directly on the card. Customers can pick a size and add the product to the cart without opening the product page.

1. Open Theme settings › Product cards and set Card style to Hang-tag.
2. Under Color option names and Size option names, enter the exact names of your product options, separated by commas. The defaults cover English, German, French, Italian, Spanish and Croatian (for example Size, Größe, Taille, Taglia, Talla, Veličina). Names aren't case-sensitive.
3. Choose what to show: Show color swatches, Show sizes and Show sold-out sizes. Sold-out sizes are crossed out.
4. Style the tag with Show hole, Show thread, Show shadow and the tag, text and border colors.

More settings:

• Option, selected and border colors style the size and color chips.
• Border width, Clipped top corners and Desktop / mobile padding shape the tag.
• Option spacing, Minimum option width, Option corner radius, Option font weight and font sizes adjust the chips. Chips are always at least 44 px high, so they're easy to tap.
• Use custom option font sets a separate font for the chips.

How it works

When a customer selects a size or color, the card updates the image, price and availability for that variant without reloading the page. The add-to-cart button becomes active once every option is chosen. Hang-tag cards appear wherever Crolum shows shared product cards: collection pages, search, featured collections and the category slider. Small specialized cards, such as the compact product carousel, keep their own design.

Color swatches

Swatches use the colors and images from Shopify's category metafields. To set them up, open a product in the Shopify admin, choose a product category and link the color option to the Color metafield. If no swatch is set, the chip shows the color name.

Product card buttons

Open Theme settings › Product card buttons to style the two buttons on product cards: Quick buy and Add to bag. For each button you can set:

• an optional custom label and an icon
• colors, including hover colors
• border width, corner radius, minimum height and padding
• font size, font weight, letter case and an optional separate font

Gap between buttons controls the space between them.

Badges

Open Theme settings › Badges. A product card shows one badge in the top left corner. There are five badge types:

Each badge has its own colors, an on/off switch and a priority from 1 to 5. If a product qualifies for several badges, the one with the lowest priority number wins.

Custom text badge

1. Go to Settings › Custom data › Products and select Add definition.
2. Enter the name Badge, namespace and key custom.badge, and type Single line text. Save.
3. Open a product and enter the badge text, for example Limited edition.

Merchandising

Open Theme settings › Merchandising.

• Image Rollover shows the second product image when customers hover over a classic product card. Hang-tag cards show the image of the selected variant instead.
• Recently Viewed remembers products a customer has opened in this browser. Add the Recently viewed section to show them. The list is stored only in the customer's browser, and the customer can clear it.
• Enable Animation turns on subtle reveal effects. Animations are switched off automatically for visitors who set their device to reduce motion.

Back to top

Open Theme settings › Back to top to add a round arrow button in the bottom right corner. It appears after the visitor has scrolled the distance you set.

Desktop and mobile have separate settings:

• visibility
• colors
• size and corner radius
• offsets from the right and bottom edge

Increase the offsets if a cookie banner or chat button covers the arrow.

Social profiles

Open Theme settings › Social profiles and add the full URLs of your profiles: Instagram, Facebook, TikTok, YouTube, Pinterest and X. Icons appear in the footer when Show social icons is on.

Header and navigation

Select the header in the theme editor.

Mega menu

With the classic menu, top-level menu items that have child links open a mega menu. Set its maximum width, spacing, corner radius, shadow, image ratio and colors in the header settings. Also open on mouse hover opens the menu on hover as well as on click.

Add blocks to the header to design individual menus:

• Mega menu layout: choose Link columns, Links + featured cards or Image/brand grid for one top-level item. Enter the exact title of that menu item.
• Menu link details: add an image, a short description, a badge (for example New) and colors to one link inside a mega menu.
• Menu promotion: show a promotional card with an image, heading and text in a mega menu. It can link to a URL, a collection or a blog article.

Menu titles in blocks must match the titles in your menu exactly, including capitalization.

Customer accounts

The account icon uses Shopify's customer accounts. Customers can sign in, see their orders and manage their profile. Turn on customer accounts in Settings › Customer accounts.

Footer

Select the footer in the theme editor.

• Logo and footer logo widths for desktop and mobile. You can also manage the footer logo centrally under Theme settings › Logos.
• Introduction: a short text about your brand.
• Three menu columns, each with its own heading and menu. Use a different menu for each column, for example customer service, information and categories.
• Show newsletter adds an email signup form. Signups are saved as customers in Shopify with email marketing consent. Use Privacy and subscription information for a short consent note with a link to your privacy policy.
• Follow on Shop shows Shopify's Follow button. It requires Shop Pay to be active in your store.
• Show policy links, Show social icons, Show country and language selectors and Show payment icons.

Sections

You can add these sections to the home page and to most other templates. Header and footer only accept header and footer sections.

Hero product previews

A full-height hero with a background image, heading, text and up to two buttons. Small product thumbnails sit on top of the image and link to products.

• Add products with Select products, or choose a Collection. A manual selection takes priority.
• The Hero background and content block holds the desktop and mobile images, the eyebrow, heading, text and buttons. Show product numbers numbers the thumbnails.
• Set the height in viewport units, the content position, the thumbnail width, heading and text sizes, padding, and an overlay color and strength. Desktop and mobile have separate values.
• Transparent header over hero places the header on top of the image. Place the hero first on the page and upload a white logo.

Bottom center and bottom right content positions are only available without thumbnails.

Image hero

A simple full-width image with an eyebrow, heading, text and one button. Set desktop and mobile images, text alignment, height and overlay. It also supports the transparent header.

Slideshow

Full-width slides, each with desktop and mobile images, a heading, text and a button. Turn on Autoplay and set the Interval. Visitors can pause autoplay with the pause button. Autoplay is off for visitors who prefer reduced motion.

Category slider

Tabs with one collection each. Every tab shows up to 8 products in the collection's sort order. Add a Collection block per tab, with an optional custom name.

Settings:

• cards per row on desktop and mobile
• a glimpse of the next card
• the product count in each tab
• a “View all” link
• custom card spacing

Images of inactive tabs load only when the tab is opened.

Featured collection

A product grid from one collection, with an eyebrow, heading and number of products. Choose a number that fills complete rows.

Collection list

Cards that link to collections. Each Collection block can override the image and title.

Compact product carousel

A small, dense carousel for accessories or “small discoveries”. Select products manually or use a collection, and set the number of products, card width, font sizes, gap, badges and a “View all” link.

Product editorial

Large editorial product images in one or more columns. Each Product block can use a custom editorial image and a separate mobile image instead of the product image.

Editorial carousel

A centered carousel with a large active card and smaller neighbouring cards. Each slide has an image or video, a heading, text and a button. Videos play only after a visitor action.

Settings:

• image ratio for desktop and mobile
• card width and the size of neighbouring cards
• blur and grayscale for neighbouring cards
• looping and the starting slide

Lookbook

A campaign image with numbered product pins and a product panel. See Shoppable lookbook.

Image with text

An image next to an eyebrow, heading, text and button. Reverse layout swaps the sides.

Before After

Two images with a slider that customers drag to compare them, for example before and after alterations. Add labels for both images. The slider also works with the keyboard.

Promo Banner and Promo Tiles

The promo banner is one wide image with heading, text and a button. Promo tiles show two to four promotions side by side, each with desktop and mobile images.

Promo Popup

A popup with an image, heading, text and button. Set the Delay in seconds and the number of Days before it appears again to the same visitor. The popup can be closed with the Escape key and returns focus to the page.

Countdown timer and Glass countdown

Countdowns to a sale or event. See Countdowns.

Customer feedback

A carousel of customer reviews. Each Review block has:

• the review text and the customer's name
• an optional detail, photo and star rating
• an optional source and source link

Blocks without text or a name aren't shown. The section also controls card width, spacing, colors, arrows and font sizes.

Press coverage

Logos and quotes from publications. Each Publication block needs a name and can include a logo, quote and article link. Choose 2 to 4 columns and a maximum logo width.

Animated statistics

Numbers that count up when they scroll into view, for example years in business or products made.

• Each Statistic block has a value, a prefix (for example € or ★), a suffix (for example + or %), the number of decimal places and a label.
• Enter the value as a number without thousands separators, for example 10000, and put a plus sign in the suffix.
• Choose the number format (1,000.5 or 1.000,5), fonts, sizes, colors and dividers.

Only use statistics you can prove.

Trust Badges

Two to four short trust markers, each with an icon (check, shipping, lock or return), a heading and text.

FAQ

Questions and answers in expandable panels. Add one Question block per question.

Editorial blog

The latest articles from a blog, with an eyebrow, a two-line heading, text and an optional decorative symbol.

Settings:

• the number of posts and columns
• image ratio and image corner radius
• excerpt and excerpt length, up to 3 tags, the publication date and the round article arrow
• colors

Newsletter

An email signup with eyebrow, heading, text and a privacy note. Subscribers are added to Customers in Shopify with email marketing consent.

Recently Viewed

Shows the products a customer viewed most recently in this browser. Set the heading and the number of products. Recently Viewed must be on in Theme settings › Merchandising.

Custom Liquid

Add your own Liquid, HTML or app embed code. Our support doesn't cover custom code.

Product page

Open a product in the theme editor. The Product section has these settings:

• Show accelerated checkout adds dynamic checkout buttons such as Shop Pay, Apple Pay or PayPal under Add to bag.
• Size guide override shows a different size guide page for this template. See Size guide.
• Details layout shows the description and details as an Accordion or as Tabs.
• Show stock, Low stock only and Stock threshold show how many items are left, for example only when fewer than 5 are in stock. This needs inventory tracking.
• Show pickup shows local pickup availability. Turn on local pickup in Settings › Shipping and delivery.

Blocks

Turn on Use core blocks instead of the default layout to arrange the product information yourself with these blocks:

Product recommendations

Add the Product recommendations section below the product. Choose Related products or Complementary products and the number of products. Shopify generates related products automatically. To pick complementary products yourself, use the free Shopify Search & Discovery app.

Unit prices

If a product has a unit price (for example per 100 ml), Crolum shows it below the price. Set unit prices on the variant in the Shopify admin. Don't add a unit price to products that are sold per piece, such as clothing.

Collection and search

The Collection section has these settings:

• Show collection image: shows the collection image above the products.
• Products per page: how many products load on each page.
• Collection navigation: a menu shown as links to related collections.

Filters and sorting

Collection and search pages show Shopify's storefront filters and a sort menu. Active filters appear as removable tags. To choose which filters appear (for example size, color, price or availability), install the free Shopify Search & Discovery app and set up your filters there.

Search

The search icon opens predictive search, which suggests products, collections, pages and articles while the customer types. The search page uses the same filters and product cards as collections.

Cart

Adding a product opens the cart drawer. The cart page at /cart shows the same content. Open Theme settings › Cart to set up both.

• Appearance: drawer width, product image width, padding, colors, a separate cart font and font sizes for every text element.
• Show order note: lets customers leave a note with their order.
• Free-shipping indicator: a progress bar towards free shipping (see below).
• Category buttons: up to three buttons that link to collections, for example to keep shopping.
• Complementary products: suggestions inside the cart, from Shopify's complementary recommendations or selected manually. Products already in the cart and sold-out products are left out.
• Shipping and returns: short notes with links. If you leave a link blank, Crolum uses your shop policy.
• Keep checkout visible while scrolling: keeps the subtotal and checkout button at the bottom of the drawer.

Free-shipping indicator

1. Create a free shipping rate in Settings › Shipping and delivery, for example free from €80.
2. In Theme settings › Cart, turn on Show free-shipping progress and enter the same amount in Order-value threshold.
3. Optional: enter a Currency code (for example EUR) and restrict the indicator to countries with Restrict countries (for example HR,DE,AT).

The indicator only displays progress. The actual shipping cost is always calculated at checkout.

Discounts appear in the cart with their name and amount. Discount codes are entered at checkout.

Blog, pages and contact

Blog and articles

Blog pages show articles with image, date and excerpt. Article pages show the full article and, if you allow comments for the blog, a comment form. Manage comments in Content › Blog posts.

Contact page

Assign the template page.contact to a page. In the Contact section you can:

• change the heading
• make the name and message fields required
• add more fields with blocks: Text field (text, phone or email), Long text, Dropdown (one option per line) and Checkbox

Each field can have help text and can be required. Messages are sent to your store's sender email address.

FAQ page

Assign the template page.faq to a page and add your questions to the FAQ section.

404 and password page

The 404 page explains that the page wasn't found and links back to all products. The password page shows your store name, your password message (Online Store › Preferences) and the password form while your store is closed.

Shoppable lookbook

The lookbook places numbered pins on a campaign image. Each pin links to a product, which appears in a panel next to the image.

1. Add the Lookbook section and upload an image. Optional: upload a separate mobile image.
2. Add a Product hotspot block for each product in the image and select the product.
3. Move the pin with the X and Y sliders (0 = left/top, 100 = right/bottom). Place it on the item, not on the edge of the image.
4. If the mobile image is cropped differently, turn on Use separate mobile pin positions and set the mobile X and Y.

More settings:

• Show product description or a Short product description per pin.
• Button action: open the product page or quick view.
• Show product list, Show progress dots and Show navigation arrows.
• Button styles for the product button, the navigation and the active pin.
• Colors, corners, shadow and spacing.

Pins, list items and arrows select the same product, and customers can use the arrow keys, Home and End to move between products.

Quick buy

Turn on Enable quick buy in Theme settings › Product tools. Product cards then show a Quick buy button that opens the product in a dialog. Customers can choose options, see the size guide and add the product to the cart without leaving the page.

The Quick product section controls what the dialog shows: details layout, stock, pickup and a size guide override. Style the card buttons in Product card buttons.

Size guide

1. Create a page in Online Store › Pages, for example Size guide, and add a table with your sizes.
2. Open Theme settings › Product tools and select the page in Default size guide page.
3. Optional: for a different size guide on some products, create an alternate product template and select another page in Size guide override.

A size guide link appears next to the size option. It opens the page in a dialog.

Gift cards

Create a gift card product in Products › Gift cards. On its product page, customers can choose Send this gift card to a recipient and enter:

• the recipient's email and, optionally, name
• an optional message of up to 200 characters
• an optional delivery date, up to 90 days ahead

Shopify then emails the gift card to the recipient on that date.

The gift card page that recipients receive shows the balance, the code with a copy button, a QR code, a print button and Add to Apple Wallet.

Countdowns

Enter the deadline in ISO 8601 format with a time zone, for example 2026-12-31T23:59:00+01:00. Without the time zone, the countdown isn't shown. The countdowns don't reset automatically.

Countdown timer

A simple countdown with a heading, text and button. After the deadline it shows an end message or hides itself.

Glass countdown

A larger countdown with frosted-glass cards. It has these options:

• a progress bar (based on 365 days or on a custom start date) and milestone badges
• calendar buttons for Google Calendar, Apple Calendar (.ics) and Outlook, with event location and duration
• sharing links and a copy-link button
• Notification mode: Off, Local bookmark only (stored in the visitor's browser, no email) or Shopify email signup (adds the visitor to your newsletter customers). Add a consent notice when you use the signup. Shopify doesn't send an automatic reminder email; use Shopify Email or Shopify Flow for that.

Two blocks control the design: Cards and progress (colors, glass blur, shadow, progress bar and buttons) and Typography (fonts, sizes and weights).

Age verifier

Open Theme settings › Age verifier and turn on Enable age verifier. Visitors must confirm their age before they can use the store. You can set:

• Minimum age
• Remember confirmation (days): 0 asks again in every browser session
• the heading, message, button labels and declined message (leave blank to use the translated defaults)
• Decline redirect: an optional page that visitors are sent to when they decline

The age verifier is a notice, not a legal age check.

Languages and markets

Crolum includes storefront and theme editor translations in English, German, French, Spanish and Italian. To change any text, open Online Store › Themes › ⋯ › Edit default theme content. To translate your products and pages, use Shopify's Translate & Adapt app.

To let customers switch country or language, add markets and languages in Settings › Markets and Settings › Languages. Then turn on Show country and language selectors in the footer. Prices are shown in the customer's local currency.

Accessibility

Crolum is built to meet WCAG 2.1 AA:

• All functions can be used with the keyboard, and the focus is clearly visible.
• Dialogs and drawers keep the focus inside them and return it when they close.
• Tap targets are at least 44 × 44 px.
• Animations respect the visitor's reduced motion setting.

To keep your store accessible:

• Add alt text to images in the Shopify admin.
• Keep enough contrast between text and background colors.
• Don't put important text into images.

Theme updates

Updates are free. When a new version is available, Shopify shows a notice in Online Store › Themes. Select Update to add the new version to your theme library as a copy. Your theme settings, sections and content are carried over, but code you changed yourself is not. Check the copy, then publish it.

FAQ

Can I use Crolum on more than one store?

Each purchase is valid for one store. To use Crolum on another store, buy it again for that store.

Do I lose my settings when I update the theme?

No. Theme settings and section content are kept. Changes you made to the code are not kept.

Why don't sizes or swatches appear on my hang-tag cards?

The product option name must match one of the names under Color option names or Size option names exactly. Check the spelling, or add your option name to the list. Make sure Show sizes and Show color swatches are on.

Why is my logo invisible after scrolling?

The transparent header uses the white logo. After scrolling, the header becomes solid and shows the page logo. Upload a dark or colored image as Landing page / homepage logo or General logo.

Why don't I see filters on my collection page?

Filters come from the Shopify Search & Discovery app. Install it and add filters such as size, color and price.

Why doesn't the Follow on Shop button appear?

The button needs Shop Pay to be active. Turn it on in Settings › Payments.

Why is my countdown not shown?

The deadline must include a time zone, for example 2026-12-31T23:59:00+01:00. In the theme editor, Crolum shows a note if the format is wrong.

Can I change the code?

Yes. Duplicate the theme first. Code changes are not covered by support and are not carried over to new versions.

Support policy

We reply to support requests within two business days, Monday to Friday, in English.

Support covers:

• questions about theme settings and sections
• bugs in the theme code

Support doesn't cover:

• custom code changes
• third-party apps
• store setup that isn't related to the theme

When you contact us, include:

• your store URL
• a description of the problem
• a screenshot or screen recording

Contact support