What is merceStudio? -------------------- .. figure:: gifs/4c00bb842c48f305badb6910e258c0d2.png merceStudio is a fully customizable experience management solution within the merce.io sphere. merceStudio gives brands the ability to build and manage their digital experiences for web, mobile, tablet and native environments. The editor allows you to drag-and-drop elements onto a page to build out a digital experience quickly and easily. merceStudio is the gateway platform into your merce apps. By logging into to merceStudio, you can access your pages, product, and blog editing applications. General terms ------------- **SEO** Search engine optimization. Increase the visibility of your site to users of a web search engine by adding custom meta tags such as keywords and descriptions to each page that you author in merceStudio **Toolbars** merceStudio has two navigational toolbars, an upper toolbar and a left toolbar. The global tool appears at the top of the page and helps you navigate between the core sections of merceStudio. This is consistent across all sections (Pages, Blogs, Products, and Themes). The left toolbar will have options related to the page you’re on such as site routes, and blog categories. **Blog** A blog an informational page published on a site consisting of often informal text and media usually helping customers understand some part of your company or products. **Route** A route in merceStudio is the location of the page in the structure of the site. The route can be changed by dragging and dropping in the left toolbar. Website structure terms ~~~~~~~~~~~~~~~~~~~~~~~ **Site** The term “site” (shortened from “website”) is a collection of linked pages associated with a single organization. Your site will encompass the entirety of the content contained within your domain name. **Page** A web page is a single page of content on a website. Each page can be edited individually in merceStudio and will contain information within a similar theme. On each 'page' a header, navigation bar, and footer will be included automatically. merceStudio allows you to edit only the 'body' of each page. **Body** The body of a site is the content that will be displayed on the page. There are types of content that can be placed in the body. Videos, text, and images are the most common types of content which can be placed into the body. In merceStudio, you can edit each content type within your pages. **Containers** The body will be split into containers that will operate to separate the page into sections. Containers can have multiple types of content within them, and operate like paragraphs in a document to separate content into related sections. For example, one container might include a banner image showcasing what will be on the page, and the next container may have the text and a video to further outline the content. **Layout** Content can be rearranged into a **layout** on the page to best serve the needs of the customers visiting the page. The layout will automatically include a container with the navigation bar, header, and footer as well as other containers that you can edit in the body. Content types ------------- .. figure:: https://i.gyazo.com/2503e8f20c6dc1601802246b9cf94703.png The page management section of merceStudio is comprised of different components or content types. Below is a list of Content Types. **Open Component Block** Open Component Block allows you to add a blog post or career post to any page. **Render Props** Render Props allows a user to recall any library of pre build components with only a direct link. **Text Block** Text Blocks are the primary means of adding text to your site. You can also use Text Blocks to add headings, links, lists, quotes, and preformatted text. **Dynamic Ad Widget** **Product Gallery** Showcase your products on a page. **Banners** An image banner is the heading or advertisement appearing on a page in the form of a bar, column, or box. **Video** Add an embedded video to play when users visit the site. Simply input the video URL. **Dynamic Content Block Renderer** **Button** Add a button to your page to link to anywhere you would like. **Image Row** Add a row of images to your site rather than just a single image. Image rows can contain up to 8 images. **Image** A single image that will display on the layout. **Slide Show** Define a series of images that will play in loop. **Image with text overlay** Add text or a button to the top of your images so that users can read or click. **Slide Show** A slide show will rotate through a series of uploaded images and loop through. Icons ~~~~~~~~~~~~~ An icon is able to be a clickable symbol in merceStudio which performs one of the following functions: - New Page - Edit content - Information - Delete - Column selections - Profile - Themes - Products - Blogs - Pages Note: Icons can also be non-clickable symbols. Getting started --------------- Logging in ~~~~~~~~~~ 1. Go to Mstudio.yourcompany.com. 2. Enter your email and password. 3. Click **Log In**. If you're having trouble with your password, contact us and we can reset or provide you with your password. .. figure:: https://i.gyazo.com/108970fc3db2f1df7acddc56b2290c96.gif Changing your password ~~~~~~~~~~~~~~~~~~~~~~ To change your password: 1. Click your username in the right corner of the upper toolbar. 2. Enter your new password and click **Save**. .. figure:: https://i.gyazo.com/a5b3a71c44e4b4d3f0540f94da07b727.gif Navigating merceStudio ~~~~~~~~~~~~~~~~~~~~~~ merceStudio has 5 different editing apps depending on which part of your site you would like to edit: **Pages, Blogs, Careers, Products, and Themes.** You can access them through either the **Content** dropdown menu or the merceStudio homepage icons. .. figure:: https://i.gyazo.com/d4524e75ce8c007ace5b5c934bedf94f.png 1. Select content to edit your page content. **Pages** can edit your homepage, create and edit new pages, and change your navigation in the toolbar. 2. To edit your Blog, select the **Blogs** icon from dropdown under **Content**. Here you can create, edit, and publish your blog posts. You can also add and edit blog categories in the toolbar. 3. To view and edit your products, select **Products** from the upper toolbar. Here you can import create and edit your products. You can also edit filters and attributes in the toolbar. 4. To edit the Themes of the site, select **Themes** in the content dropdown. Here you can create and edit themes for color and style. 5. To edit your job postings, select **Careers** in the content dropdown.