Mythic Shopify Theme

Pass: Demo

Support Doc Intro

Welcome to Mythic!

Mythic is built to deliver a modern visual narrative, high-performance speed, and a fully responsive layout for your store.

• Standard Shopify Features: This theme includes all standard features and configurations of Shopify Themes. To read about core Shopify functionalities, store setups, and standard liquid settings, please visit the official Shopify Help Center Documentation for a detailed overview of each standard area and section.

• Mobile-First Optimization: Just like all official Shopify Themes, Mythic is fully optimized for mobile devices, ensuring every section, slider, and interactive element delivers a seamless experience across all screen sizes.

Section Index

Directory of all available theme features, sections, and customization guides.

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:

  1. Find an Icon: Visit a free open-source icon library (such as Lucide Icons or Tabler Icons).
  2. 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.
  3. 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.

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

  1. 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.
  2. 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.
  3. 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.

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.

SUPPORT POLICY

Our theme support covers bug fixes, answers about built-in theme features and settings, and basic setup guidance to help configure your store. Custom design modifications, third-party app integrations, and theme update migrations for customized stores are not included in the purchase cost of the theme, but additional services may be requested separately through our contact form.

Custom Code & Code Snippets

Any custom code tutorials or code snippets included in this documentation are provided as optional guides and are not supported under standard theme support. Before making any manual edits to your theme code, please duplicate your theme to create a backup copy.
If you need assistance with custom development or advanced code modifications, our team is available for custom hire. As a recognized Shopify agency, we can help tailor the theme to your exact specifications—feel free to reach out to us through our contact form below.

Frequently Asked Questions

How do I install the theme on my Shopify store?

  1. Download the theme .zip file to your computer.
  2. In your Shopify Admin, go to Online Store > Themes.
  3. Under the Theme library section, click Add theme and select Upload zip file.
  4. Upload your .zip file. Once uploaded, click Actions > Publish when you are ready to make it live.

Where can I get SVG codes for sections that require them?

  • Where to get SVGs: You can get clean SVG code from free icon platforms like Heroicons or Font Awesome, or export vector icons as SVG from Adobe Illustrator or Figma.

  • How to copy the code: Open your .svg file in a text editor (like Notepad or TextEdit), or click "Copy SVG" directly from websites like Heroicons.

  • How to apply in theme settings: Open the block settings (such as the Text with Icon block) in the theme editor. Paste the raw <svg>...</svg> code directly into the designated Icon input field.

Where should I use the 404 page and Password page sections?

These two sections are template-specific and built exclusively for their respective pages:

  • 404 page section: Use this only on your site's 404 template to guide lost visitors back to active pages when they land on a broken or non-existent URL.

  • Password page section: Use this only on your site's Password template to show a private landing screen when your storefront is locked or under construction.

Why changes are not saving or updating in the editor?

Clear your browser cache or open the Shopify theme editor in an incognito/private window. Ensure you click Save after making layout or text adjustments.

Why dynamic metafields are not showing up?

Make sure the metafield has a value saved on the specific product page (Products > [Product Name] > Metafields) and that the metafield type matches the input type expected by the block.

SVG icons are not displaying correctly?

Verify that the code begins with <svg> and ends with </svg>. Ensure the SVG contains valid attributes like viewBox and fill="currentColor" or stroke="currentColor" so it inherits your theme styles.

Have additional questions?

If you run into any issues, have specific design queries, or need help setting up your store, please reach out to us! You can get in direct contact with our support team using the Contact Form below, and we’ll get back to you as soon as possible.

Need Assistance?

Fill out the form below and we'll help you with any issues or questions about our theme.