# 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 ### 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. **NOTE**: If for any reason you’ve selected a media type and it’s not visible, make sure you’ve chosen the correct option from the selector. For example, if you need to upload a video from your computer, verify that the **“Video from file”** option is selected under the "**Featured Product"** section. ### 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: [**coelloweb@aol.com**](mailto:coelloweb@aol.com) \