Vue Storefront Bloomreach Content

# Creating content in Bloomreach Content

# 1. Create project

First thing you have to do - in order to start adding content - you have to create a development project in Projects Tab - select Projects on left sidebar. Next add your channel to the project and click the gear icon to set your frontend URL for preview in Expeirence Manager.

# 2. Meet Expeirence Manager

You will find Expeirence Manager on sidebar on the left side of your screen, go there. Here you will be customizing your Vue Storefront application.

# On the left you will see a sidebar, there will be:

  • Sitemap - this is a routes representation of your app, so all the pages you can customize
  • Components - here you will see list of components you can use to create your content

# 3. Adding Components

Now, let's add some content.

  1. Select project you want to work on.
  2. Add your page to the project - Page > Add to project
  3. Enable Bloomreach overlays.
  4. Click on the component on the sidebar, and then place the component within main section.
  5. Now you will see blue, empty overlay and orange button, when you hover on the button you will see more of them. Click the plus icon to add new document to the component (documents are storing values for components).

  1. After the right sidebar will open, and you will be asked to provide documents name and ID, click next and you will see fields this documents accepts.
  2. Fill in values and hit create

Congratulations you added your first component!

# 4. Adding new Page

  1. Click + Page on the control menu
  2. Fill in details, the URL param will be the route where your page will be available so if you call it about this page will be accessible on the /about route.
  3. Document type should be Resource Bundle, Click Next.
  4. Give your page an ID, click Save

Nice! you just added completely new page!

# 5. Customizing Navigation

So now it would be cool to access our About page from header navigation so lets add it.

On the Header you should see a blue icon

  1. Click on it, this will take you to Edit Menu page.
  2. Click + Menu Item
  3. Fill in fields, and if you want this link to be pointing to another page you created via Bloomreach select Internal link > Select > (modal window will open with all your documents) > pages > here all your pages are stored, just select the one you want
  4. Click Save and then Done on top

Congratulations! you customized header navigation!

# 6. Customize Footer Navigation

This one is pretty much like customizing header but with one difference.

  1. Add new item but with no link. This will create a column in footer, so give it a name
  2. Add new item and drag it to the left, this will nest the item inside the first item. to this one select a link just like you did for header.
  3. Hit Save and you're done.

Good job! your footer is now customized!

# 7. Publishing changes

  1. Click on the Channel Settings and Submit
  2. Noew you can go back to your Projects tab and review your project.
  3. Merge your project, after that step is complete you will be able to see changes you just made on your vuestorefront application!

← Changelog →