Prime Impact – Theme Documentation

Overview

Prime Impact is designed to connect your products with an in-your-face minimalist experience. Through a clean, intuitive interface, product imagery becomes the primary focus and rarely goes unnoticed.

This theme is built for merchants who value smooth, honest, and direct interaction with their customers. Navigation should not be a battle. Highlighting your key products should not be difficult. Prime Impact combines brand identity with frictionless online purchasing.

Prerequisites

• Active Shopify account

• Basic knowledge of:

  • Accessing the Shopify admin

  • Understanding sections, templates, and blocks

https://help.shopify.com/en/manual/your-account

Theme Installation

1. Go to Shopify Admin

2. Navigate to Online Store → Themes

3. Click Upload theme

4. Select the file the-modern-store.zip

5. Upload and publish

1. Theme Structure

Home Page

The homepage comes strategically pre-configured to attract attention and create a conversational browsing experience, similar to entering a physical store. All blocks remain fully customizable.

From the homepage you can:

• Tell your brand story in a few lines and then link to you “About” page

• Display up to 10 collections across different components

• Redirect users to featured products or collections

• Highlight your value proposition

• Enable quick-view products

• Add a newsletter subscription form

Not all components behave the same:

• Some allow image-only customization

• Others support video (YouTube or local upload) for highlighting key products

Sneak Peek

Sections like “Sneak Peek" allow you to:

• Choose products within a collection

• Mark one product as the “featured” item

• Avoid overwhelming users with excessive product lists

Site header

Keep navigation focused. Do not overwhelm users. Prioritize your best collections.

The header has two structural levels:

Top Level

Includes:

• Collapsible side menu (for links such as About, Contact, Blog, Login/Register, etc)

• Logo

• Cart button

To edit the collapsible menu:

• Select Site Header

• Under Hidden navigation (side menu) click Select

• Create or manage menus via Admin → Content → Menus

To edit the logo:

• In the editor panel under Logo and Navigation

  • Adjust logo size

  • Add alt text (SEO optimization)

Second Level

This is the primary accessibility layer. It allows:

• Customizable main menu

• Collection blocks (up to 4)

• Predictive search

Footer

The footer provides structured secondary navigation and social connectivity.

You can:

• Add up to 8 link menus (recommended: 4 or fewer)

• Display social media icons (preloaded: Facebook, Instagram, TikTok, WhatsApp, YouTube)

• Upload a custom social icon if needed (enable Upload custom icon first)

• Adjust layout, link structure, social icon interaction styles, and newsletter button behavior

A note about reusable components

Most homepage components can be reused on other pages via the Templates section.

Example:

• You can add testimonials or value propositions to other pages. The About page already includes a testimonial component displaying up to 12 testimonials. To avoid duplication, disable “Show testimonials” from the editor panel before reusing the section here.

2. Key Templates

Blog

Manage your blog with full control while benefiting from built-in SEO structure.

Features:

• Optimized metadata for search engines

• Rich previews when sharing on social media (image, title, description)

To add existing articles:

• Go to Templates

• Expand section

• Click Add block

Organize content by:

• Priority

• Audience segmentation

Collection Page

Prime Impact automatically generates:

• A global collections index page

• Individual collection pages

Collection page features:

• Lightweight filtering system

• Sorting options

• Apply/remove filters dynamically

Banner customization:

• Background color

• Image with “frosted glass” effect

Product display:

• Adjustable from 8 to 48 products per page

• Default: 24

Product Page

Designed to optimize product presentation and conversion.

You can:

• Add badges (via metafields or custom text)

• Customize image borders

• Adjust image focus position

• Click images to enlarge

If no product description exists a pre-written placeholder appears automatically. Any description entered in Shopify syncs automatically to the product page

Additional Information Blocks

To add product-specific content:

1. Locate Template (from the left side panel)

2. Open Blocks

3. Choose:

   • App block

   • Pre-existing block

Important:

• Additional information is product-specific

• It does not repeat across other products

• It appears in collapsible dropdown format

Prime Impact supports:

• Subscription widget

• “Sign in with Shop” button

3. Theme Settings (basic configuration)

Accessing the Theme Editor

Admin → Online Store → Themes → Customize

Colors

From Theme Settings, you can configure:

Editable Buttons

• Add to Cart

• Buy Now

• Newsletter (subscribe)

Each button allows customization of:

• Background color

• Border color

• Text color

• Normal state

• Hover state

Global Colors

• General background

• Primary text

• Links

Typography can be modified using Shopify’s built-in font library.

You can also change the overall background and foundational colors that define your store’s visual identity.

Logo & Favicon

The favicon can be updated directly from Theme Settings.

Home page

Let's now talk about some components you might find useful that drive conversion quicker if you know how to set them up properly. It is suggested you treat the homepage as a "conversational browsing" rather than just a place to display random elements at once.

Hero section

This is likely the most important section of your site for someone who has never visited before. For that reason, you want to make a strong impression and leave your visitor with more curiosity than questions.

So how do you achieve that? Keep it simple, but impactful. Choose between an image or a video to clearly communicate the type of product you offer. Take advantage of video format to allow potential customers to see the quality of your products more clearly. If you prefer, you may also use a static image.

Use an image sized 2400 × 1080 px and keep the main focus centered.

If the result still doesn’t look right, you can adjust additional settings by selecting “Hero Section" from the left panel. Then, in the right panel, navigate to “Media” to access the available configuration options. Locate “Media Position” to fine-tune the alignment of your hero media.

NOTE: To display an image, you must have selected the “Image” option. If you previously had a video selected and cannot see your image, it may be because the media type is still set to “Video.”

You may have noticed that, by default, the button in this section includes an icon. If you prefer, you can select a different icon, disable it, or upload your own. If you choose to upload a custom icon from your computer, make sure the toggle switch is enabled so it can be displayed properly.

Sneak Peek

If you have multiple collections but only want to showcase a few specific items from each, this section allows you to do exactly that — and more.

You can group up to 7 products across 4 different tabs. There is no need to create a collection. Simply assign a name to each tab and manually select the products you want to display.

Rather than displaying your full catalog, this section allows you to curate a focused selection. This improves clarity, reduces friction, and helps customers quickly grasp what you sell.

In addition to selecting products, you can designate one product as the “featured” item.

For the featured product, you may choose to display either:

• An image

• A video

If using video, ensure it communicates visually without relying on audio, as there is no audio control available. The video should be demonstrative rather than descriptive.

When a featured product is selected, you can control its position within the grid layout. Options include:

• Beginning

• Middle

• End

On larger screens (desktop), you may choose a four-column layout.

To ensure design flexibility, you may also define its position independently for desktop and mobile devices.

For example, you may place the featured product at the end of the list on mobile devices, while displaying it first in the grid on desktop screens.

To configure this:

1. Select a group of products, from the left side panel in your Shopify editor

2. Select the featured product if it has not already been chosen.

3. Locate the “Featured Position” setting (at the very bottom)

4. Adjust placement per device

This allows full control over product hierarchy depending on the viewing context.

Quick View

Products within the Quick View section can be grouped into a horizontal row to continue encouraging exploration and flexible catalog navigation with intention.

If you have already made a strong impression and visitors have discovered what your store offers, this is the moment to showcase products you know will convert. Since users have reached this point, they are more likely to engage with individual product pages. This alignment increases the probability that they will proceed to view a product in detail.

To configure this section, simply select your best products. A button will automatically be assigned to each item, allowing users to open a brief product summary that includes:

• Product description

• Price

• A direct link to purchase or add the item to cart

This creates a streamlined transition from browsing to decision-making.

Contact & Support

If you need additional assistance, please send an email to: [email protected]