Mythic Shopify Theme
Welcome to Mythic!
Header
The Header section controls top-level navigation, branding, and quick-access utility controls across your storefront. Main settings let you adjust background color, header height, sticky display, logo layout, and specific controls for key features:
Search Bar:
Toggle the central search bar visibility and customize its placeholder text.
Menu Drawer:
Select navigation menus, customize link text, and choose to display navigation in a side drawer (even on desktop) positioned on the right.
Account & Cart Drawer:
Set custom labels for customer account and cart triggers, and define the empty-state heading for the cart drawer.
Accordion
The Accordion section lets you build collapsible text lists, which are perfect for Frequently Asked Questions or store policies. Visitors can click on any question to slide it open and read the answer, keeping your page clean and organized. You can easily set your main section title, change its text color, and adjust the spacing above and below the block using simple sliders in the Theme Editor.
Action Split
The Action Split section pairs a detailed text message on the left with a dedicated feature box or direct contact menu on the right. It is ideal for showcasing services like bulk appraisals, consignment, or special customer support channels. You can customize the main heading, subtitle, description, tag buttons, and sidebar title, as well as adjust font sizes, sidebar width, and individual background and accent colors directly in the settings.
Blog Slider
The Blog Slider section presents your store’s latest posts and stories in a clean, scrollable carousel. In the main section settings, you can set a background color or gradient, customize top and bottom padding, adjust font weights, and set standard labels like the section heading, link text, and read-more buttons. By adding individual Article blocks, you can display either standard blog posts or custom stories with options for full-image or split-card layouts, custom images, video backgrounds (YouTube, Vimeo, or MP4), and custom redirect links.
Call to Action Banner
The Call to Action Banner creates a wide, eye-catching promo section designed to drive customer engagement. You can customize the subtitle, main title, description, and call-to-action button with a direct link. You can also add individual Info blocks, which automatically display below the text with clean checkmark icons to highlight key trust points or guarantees. The section settings also let you adjust top and bottom padding and choose a custom background color or gradient.
Campaign Hub
The Campaign Hub section displays a structured grid of promotional cards to highlight key store offers, campaigns, and exclusive content. Section settings control the main headings, columns per row, background styling, and global card hover effects, while individual Card blocks let you customize titles, descriptions, button links, and icons.
How to Get SVG Icon Codes
To add custom vector icons to your cards:
- Find an Icon: Visit a free open-source icon library (such as Lucide Icons or Tabler Icons).
- Copy the SVG Code: Search for your desired icon (e.g., a heart, star, or diamond), click on it, and select Copy SVG or Copy Code.
- Paste into the Settings: Paste the raw <svg>...</svg> code block directly into the Icon field of your Card block.
Cart Drawer
The Cart Drawer allows customers to preview and manage items via a header hover dropdown or a slide-up drawer with quantity controls, promo inputs, and checkout links (requires adding the Cart drawer block under Header). In Theme Settings > Cart Rewards, you can configure up to three tiered spend thresholds (e.g., spend tiers for 30%, 50%, or 70% off) to display a dynamic reward progress bar directly inside the drawer.
Content Gallery Grid
The Content Gallery Grid pairs featured media elements (video and static imagery) alongside a clean customer review carousel.
• Overall Section Settings: Customize top and bottom padding, section subtitle (e.g., "CUSTOMER REVIEWS"), main image asset, video media, and container border colors. For video content, you can upload a direct MP4 file via Shopify Video or input a YouTube URL (used automatically if no Shopify Video is selected), with an option to toggle Autoplay Video.
• Review Blocks: Add multiple Review blocks to create a testimonials slider next to your media grid. For each individual review block, you can adjust: Star Rating, Review Text, Author and Label.
Collection Carousel
The Collection Carousel section showcases products from a selected collection in a clean, horizontally scrollable slider with navigation arrows.
- Collection & Heading: Choose which store collection to feature and set a custom section title (e.g., "Mythos Fantasy Cards").
- Badge Settings: Add a promotional callout badge (e.g., "NEW") next to the heading, select its accent color, and toggle Position badge top to align it.
- Buttons & Navigation: Customize default labels for individual product card buttons (e.g., "Add to cart") and configure a standalone section button with a custom label (e.g., "Shop Collection") and direct link.
- Styling & Layout: Set custom colors for the section background, button background, and button text, alongside top and bottom section padding controls.
Collection List
The Collection List section creates a grid of interactive cards with custom gradients, vector icons, and direct collection links. You can customize the section's background color, heading, columns per row, and hover accent colors, then add individual Collection Card blocks to represent each collection.
Collection Card Block Settings
For each card block, you can configure:
- Collection: Select the target collection for the redirect link.
- Collection Title: Enter the custom card label (e.g., "New Arrivals").
- Icon: Paste raw <svg> code to display a custom icon in the center of the card.
- Card Background Gradient: Add a CSS linear gradient code to give each card a distinct background color transition. Format: linear-gradient(direction, color1, color2)
Collections Grid
The Collections grid section displays a responsive layout of featured collection cards with featured imagery and direct collection titles. Section controls allow you to toggle grid item sizing (Small/Large) and adjust grid spacing, while individual collection blocks let you select and showcase specific store collections.
Contact Form
The Contact Form section displays a streamlined customer inquiry form set inside a dark card container. Settings allow complete customization of headings, subheadings, descriptions, submit button labels, and custom field labels or placeholder text for the Subject, Email, and Message inputs.
Hero
The Hero section features a full-width background banner with centered text overlays and a call-to-action button. Section controls let you select the background image and adjust the overall banner height, while content blocks allow you to add customizable Heading, Paragraph, and Button elements.
Hero Hotspots
The Hero Hotspots section combines a interactive banner hero with pinpointed hotspot icons (+ indicators) that reveal linked collection carousels when hovered. Section settings control hero typography, button styling, desktop/mobile background imagery, and overlay opacity, while individual Hotspot blocks let you assign titles, descriptions, target collections, and precise X/Y percentage coordinates to position each pin over the image.
Showcase with Tooltips
The Showcase with Tooltips section pairs a featured background banner with left-aligned headings, descriptions, and customizable Bullet Item blocks. Section settings let you adjust background media, overlay opacity, and card styling (colors and border radius), while Hotspot blocks allow you to place interactive pins across the image with independent desktop and mobile X/Y coordinates to display pop-up card details and links.
Text Marquee
The Text Marquee section creates an animated, continuously scrolling text banner for announcements and site alerts. Section settings allow you to customize the background color, text color, font size, and spacing gap between items, while individual Text blocks let you add unique promotional messages, emojis, or update notes to the marquee loop.
Text with Icons
The Text with Icons section displays feature cards with custom icons, titles, and descriptions arranged in a multi-column grid. Overall section settings let you customize headings, columns per row, grid spacing, icon dimensions, and an optional step count badge, while individual Box blocks allow you to upload images or input raw SVG vector icons, set custom gradient backgrounds, and configure card-specific colors and call-to-action buttons.
To get SVG code, visit an open-source icon library like Lucide Icons or Tabler Icons, search for your desired icon, and click Copy SVG or Copy Code. Then, paste the raw <svg>...</svg> code block directly into the SVG field of your Box block.
Breadcrumbs
The Breadcrumbs section provides simple page navigation with a back button on the left and a current page indicator on the right. Section settings allow you to customize the background color, the back button label (e.g., "Go back"), and the viewing indicator prefix text (e.g., "You're viewing:").
Multicolumn
The Multicolumn section lets you display content side by side to highlight key perks, steps, or store features in a clean layout. You can set a main title and subheading for the whole section, as well as add or remove individual column blocks to feature images, titles, and brief descriptions.
Wishlist
The Wishlist section creates a dedicated space to display all the items a customer has saved while browsing.
When a shopper clicks the Wishlist utility button on any product page, that item is saved and automatically populates as a card grid inside this section—giving customers an easy, centralized place to review and purchase their favorited items later.
Product Section
The Product section features a two-column layout that displays product media alongside key details and purchase options. Main settings let you adjust background color, section width, sticky imagery, border radius, and image zoom, while blocks like the Title, Price, Inventory, Variant Picker, and Buy Buttons complete the core product layout.
Block: Details Tab
The Details tab block organizes product information into a clean, tabbed interface to keep the page tidy and easy to browse. You can set custom tab titles (e.g., "Card Description" and "Card Overview") and enter rich text for each corresponding content area.
Tip: To automatically pull in your product's actual description from Shopify, click the Connect dynamic source icon (the database symbol stacked next to the field label) above the content box and select Description.
Block: Product Features
The Product Features block displays key attributes—like Card Rarity or Condition—in a clean label-and-value list (supporting up to 6 custom feature pairs).
How to Link Custom Product Details
- Create the Detail Field (One-Time Setup)
•Go to Settings > Custom data > Products in Shopify.
• Click Add definition, name your detail (like "Card Rarity"), and click Save. - Add Details to a Product
• Open your product page in Shopify.
• Scroll to the Metafields section at the bottom, type in the value (like "Rare"), and save. - Show it on Your Store
• In the theme editor, open your Product Features block.
• Type the label (e.g., "Card Rarity") in the Title box.
• In the Text box, click the stacked database icon in the corner and select your detail name to link it automatically!
Block: Text with Icon
The Text with Icon block displays up to 3 compact feature pills side-by-side inside the product section to highlight key selling points (like quick shipping, product guarantees, or authenticity). Each text block allows you to input custom text alongside raw SVG code to render your choice of vector icons.
Block: Utility Button
The Utility button block adds secondary actions to your product page, allowing customers to save items or share products with others. Settings let you toggle the Wishlist and Share buttons on or off independently and customize the button label text for each.
Theme Settings
Typography
The Typography settings control the global font styles across your entire store. Selecting a Primary font (such as Work Sans) establishes a consistent visual identity, automatically applying your chosen typeface to headings, body text, buttons, and navigation elements site-wide.
Layout
The Layout settings define the structural dimensions and spacing of your storefront by controlling the Page width (maximum container width for main content) and Page margin (outer side spacing to keep content from touching screen edges on smaller displays).
Colors
The Colors settings establish your store's global color palette for complete brand consistency across every page:
- Background & Foreground: Sets the main page background color and default accent styling.
- Primary & Secondary: Defines the main heading font colors (Primary) and body text colors (Secondary).
- Border & Accent: Controls line dividers, container borders, and structural accents.
- Button Controls: Customizes background, text, and border colors for buttons.
- Link & Hover: Sets default hyperlink colors and their interactive hover states.
Socials
The Socials settings allow you to add links to your brand's social media accounts. Simply paste your profile URLs into the corresponding platform fields, and the matching social icons will automatically appear in your footer.
Logo
The Logo settings allow you to upload your primary store logo, control its display size in pixels, and set a favicon icon to represent your site in browser tabs.
Cart Rewards
The Cart Rewards settings let you incentivize larger orders by setting up to three tiered spending goals. Define specific cart amounts and custom labels for each tier to display a dynamic progress bar directly in the shopping cart drawer, encouraging customers to add more items to unlock discounts or perks.