Editing HTML content

The theme that you have downloaded acts as a standard React application. This means that the layout of the UI can be modified inside the React components and pages, in the form of JSX. The JSX code, which will eventually be translated into HTML when rendering the component, is contained inside the JavaScript code of the React component. Look for the areas in the page or component that hold the rendering method or a return statement, and that is where you should modify/add code. Learn more about JSX

Components of the application can be found in the components or core-components folders, whereas application pages can be found in the routes folder. Read more in Theme file structure.

After starting the local node server for development using the npm start command (with the server parameter), use the React extension for developers tool (available for Chrome) to inspect the desired area of the application in order to determine where the specific code lies.

Let’s add a welcome message to the homepage that will appear at the top of the page under the header:

Using the React extension in the browser we can see the structure of the code:

Inside the homepage resides the Layout Component. The Layout Component is a wrapper component that holds a header component, a main-content div and a footer component, and wraps all pages in the application. The main-content div holds the code of the Layout Component's children, which in this case are two divs - promotion-wrapper and middle-section. Let’s add our welcome message just before the promotion-wrapper div.

1. Navigate to src\routes\Home.js, and add the following welcome-text code inside the return statement:

…
return (
      <Layout {...this.props} className="home">
        <div className="welcome-text">Welcome to the online store</div>
        <div className="promotion-wrapper">
…

2. Navigate to src/routes/Home.scss, and add the following .welcome-text class style inside the .home class:

…
.home{
  .welcome-text{
    margin: 0 auto;
    width: 800px;
    font-size: 60px;
    color: skyblue;
  }
…

Check the browser to see that the text has been added to the homepage just before the promotion banner area:

Training video

For a detailed example, watch the Adding HTML content to a Theme page video on XMPie Campus.