Skip to main content

Content and CMS

Content is the most important part of your e-commerce. It is what makes your website stand out from the competition. It is what makes your website memorable. It is what makes your e-commerce successful.

Tip

Before you start it's an good idea to add content in the CMS section of Merchant Center. This will make it easier to add content to your e-commerce.

Content areas​

The areas available for content out-of-the-box are:

  • Start page (whole page)
  • Product list page
  • Product page
  • Pages (whole page)

Adding a content area to a page​

You add areas to any page. They are called CaWidgetArea and are ready to recive and render content instantly. All you have to do is add the CaWidgetArea to the page and make the proper settings.

Example of a content area
<CaWidgetArea
  family="Frontpage"
  area-name="The front page area"
  @dataFetched="$store.dispatch('loading/end')"
/>

For full reference of CaWidgetArea component, see the component reference.

Preparing the launchpad for custom widgets​

To be able to use custom widgets in your storefront, you need to add components to render them. A recommended way to set this up is to use the Geins CMS module. The only thing you will have to do to get started is to follow the instructions for installing the module in your storefront, and then begin creating your widget components.

Out-the-box widget components

Ralph UI for Ralph Storefront comes with a set of out-the-box widget components. You can use these components as they are. They all have their corresponding widget types in the CMS.

Requirements for using the module​

For the module and your custom widgets to work properly there are three requirements:

  1. Your Geins Ralph Storefront will have to use @ralph/ralph-ui version 20.0.0 or above.
  2. Your JSON must have a component property and a configuration property. The component property should contain the name of the custom widget component you want to be rendered. The configuration property should contain the configuration data. For example:
    {
      "component": "MyWidgetComponent",
      "configuration": {
        "title": "",
        "cards": [
          {
            "image": "",
            "buttonText": "",
            "buttonColor": ""
          }
        ]
      }
    }
  3. Your custom widget component needs a configuration prop. This prop will hold the configuration from your JSON above. For example:
    ...
    export default {
      name: 'MyWidgetComponent',
      props: {
        configuration: {
          type: Object,
          required: true
        }
      }
      ...
    }
    ...