Installation and setup - rocketweb-fed/magento2-theme-prime GitHub Wiki

Installation

Install using Composer

$ composer require rocketweb/theme-frontend-prime

Theme comes bundled with two modules: UiCore and CheckoutEnhancement. You'll need to install them using Magento CLI:

$ bin/magento module:enable RocketWeb_UiCore
$ bin/magento module:enable RocketWeb_CheckoutEnhancement
$ bin/magento module:enable Staempfli_ImageResizer
$ bin/magento module:enable Magefan_Blog
$ bin/magento setup:upgrade

To test if the theme has been installed correctly you can go to Admin > Content > Design > Themes. You should see RocketWeb/prime as one of the available themes.

Setup your custom theme

To start customizing your store front you'll need to create a custom theme that inherits from RocketWeb/prime. Please follow the instructions below to get started.

  1. Create theme folder structure app/design/frontend/<Vendor>/<theme>.

Replace <Vendor> and <theme> with your respective values throughout this documentation.

  1. Create registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/<Vendor>/<theme>',
    __DIR__
);
  1. Create theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>My Awesome Theme</title>
    <parent>RocketWeb/prime</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

  1. Copy media/preview.png from vendor/rocketweb/theme-frontend-prime to your your theme. Replace thumbnail image if necessary.

  2. (Optional) Create Magento_Theme/layout/default_head_blocks.xml to include any external or internal assets eg.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

        <!-- External resources -->
        <link src="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700%7CMuli:300,300i,400,400i,600,600i,700,700i,800,800i" src_type="url" rel="stylesheet" type="text/css" />

        <!-- Internal CSS -->
        <css src="css/<custom>.css" />
    </head>
</page>
  1. Go to admin > Design > Configuration and activate your new theme
  2. Clear and deploy static assets
  3. Go to store front and refresh. You should see the new theme in effect.

Make sure to setup tools for your front-end workflow (grunt, gulp). We recommend our Magento 2 gulpfile or Frontools by Snowdog

Supported modules

RW Prime is compatible with the following third-party modules that we highly recommend to install to take full advantage of the theme features:

⚠️ **GitHub.com Fallback** ⚠️