Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

theme #24

Merged
merged 1 commit into from
Sep 14, 2023
Merged

theme #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/module/module-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,5 +67,5 @@ A module is a directory that contains 5 parts:

There are two types of modules:

1. Core module: Those modules are developed and maintained by the Shopmost team. They are located in @shopmost/shopmost/src/modules
1. Core module: Those modules are developed and maintained by the Shopmost team. They are located in ./modules
2. Extension: Those modules developed by a third party/developer. They are located in the ‘extensions’ folder at the root level. We will learn more about the extension in the next sections.
6 changes: 3 additions & 3 deletions docs/theme/theme-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ A theme is a component of Shopmost application which provides a consistent look

In Shopmost, themes are designed to override or customize view layer, provided initially by modules or libraries.

Just like [modules](/docs/development/module/module-overview), [Themes](./theme-overview) are implemented by different vendors (frontend developers) and intended to be distributed as additional packages for Shopmost system.
Just like [modules](/module/module-overview), [Themes](./theme/theme-overview) are implemented by different vendors (frontend developers) and intended to be distributed as additional packages for Shopmost system.

Out-of-the-box [Shopmost](https://shopmost.io/) application provides a default theme as a demonstration theme, which is fully customizable so you can develop your theme based on it.

You can use the default theme for a live store, but if you want to customize the default design, you need to create a new theme. We strongly recommend not to change the default directly, because if you do edit the default files, your changes can be overwritten by the new version of the default files during upgrades.

:::info
You can checkout this repo for an example of theme [Eve Theme](https://github.com/shopmostcommerce/evetheme). It is a simple theme that helps you to understand how to create a theme for Shopmost.
You can checkout this repo for an example of theme [Ten Theme](https://github.com/kkumarcodes/tentheme). It is a simple theme that helps you to understand how to create a theme for Shopmost.
:::

## Where are themes located?
Expand Down Expand Up @@ -138,4 +138,4 @@ Changing a theme requires running the `build` command again.

## Example theme

You can checkout this repo for an example of theme [Eve Theme](https://github.com/shopmostcommerce/evetheme). It is a simple theme that helps you to understand how to create a theme for Shopmost.
You can checkout this repo for an example of theme [Ten Theme](https://github.com/kkumarcodes/tentheme). It is a simple theme that helps you to understand how to create a theme for Shopmost.
8 changes: 4 additions & 4 deletions docs/theme/view-system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ Let's take a look at the following code:

```js title="src/components/Layout.jsx"
import React from 'react';
import Area from '@shopmost/shopmost/src/lib/components/Area';
import Area from './lib/components/Area';

export default function Layout() {
return (
Expand All @@ -161,7 +161,7 @@ You can also provide a list of pre-defined components to the `Area` component:

```js title="src/components/Layout.jsx"
import React from 'react';
import Area from '@shopmost/shopmost/src/lib/components/Area';
import Area from './lib/components/Area';
import Top from './Top';
import Bottom from './Bottom';

Expand Down Expand Up @@ -202,7 +202,7 @@ Let's say we have a page 'productView' with the bellow layout component:

```js title="src/modules/catalog/pages/frontStore/productView/Layout.jsx"
import React from 'react';
import Area from '@shopmost/shopmost/src/lib/components/Area';
import Area from './lib/components/Area';

export default function Layout() {
return (
Expand All @@ -218,7 +218,7 @@ Now we want to insert a component into the left side of the product view page to

```js title="src/modules/catalog/pages/frontStore/productView/ProductRating.jsx"
import React from 'react';
import Area from '@shopmost/shopmost/src/lib/components/Area';
import Area from './lib/components/Area';

export default function ProductRating({stars}) {
return (
Expand Down
Loading