2 Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout... 9 Product Image display settings... 9 Featured Products Using the Description Block Editor Text Formatting Bullet Points and Numbers Images Insert Link Table Horizontal Line HTML Source Allowed HTML Tags for use in description blocks Disallowed HTML Tags Getting Help
3 In this guide, you will be able to find information about, and dimensions for, each section of your shop on the Rakuten UK platform. Your shop will constitute of three main sections: Common Template Shop Top Page Product Page A fourth section (Featured Products) will be a component of the Shop Top Page [best described as your home page] and will consist of a selection of products that are defined through your RMS toolbox. Version Notes Date 1.0 Document Released Aug
4 The common template receives its name from its purpose all sections on the common template will feature on all pages within your shop on the Rakuten UK platform, and as such will be common to each page. To edit your common template, click on to Page Design on your top navigation bar and choose Design Common Template. Once on this page, you will be able to edit three sections that will be common to all pages in your store. These sections are: Shop Header Side Bar Shop Footer It is recommended that you utilise all of these areas with imagery and text that would be suitable for each page in your shop. Each of the blocks will be completed by using a content editor which will allow you to utilise text and imagery, as well as edit the pure HTML source code for that section too. 4
5 Below is a guide to the dimensions of the three editable sections that can be found on your Common Template. The heights of each block are not defined as this is dependent upon your choice of creative and shop design. It is recommended that your header does not exceed 250px in height as this will ensure your customers will be able to see a larger percentage of your home page and will give a better shopping experience. 5
6 The Shop Top page will be your main shop landing / home page. It will work in conjunction with the Featured Products element of your account and consists of two editable content areas as well as a top image field. To edit your Shop Top page, click on to Page Design on your top navigation bar and choose Design Shop Top Page Template. Once on this page, you will be able to edit the three sections as described above. It is recommended that you utilise all of these areas to help build a long and interesting landing page. As this page is one of the first that a customer will see within your store, you should be aiming to do three things with it: Highlight key product ranges (see Shop Categories guide) that you would like your customers to view Highlight featured products using the Featured Products function to highlight new and interesting items you have for sale Build trust by telling your story so that your customers know that they are buying from you, and who you are o Suggestion use hyperlinks to link to your shop information page to explain your story in full. 6
7 Below is a guide to the dimensions of the three editable sections that can be found on your Shop Top Page. The heights of each block are not defined as this is dependent upon your choice of creative and shop design. 7
8 In regards to the design of your product page, this works in a different way to how you edit the Common Template and the Shop Top page. You will not be changing the content of the page; you will be changing the layout of the product page. The product content is added when you create the product (either through the RMS toolbox or API), so if you would like to change the text information or description of the product or any other details about the product for that matter you should edit the product under the Product Catalogue section of the RMS toolbox. Essentially, you can customize the positioning of the blocks (known as widgets) on your product page so that you can define the layout and ordering of what appears, and when, on your product page. Below is a summary of what each widget does: Widget Description Tagline Product Name Image and Purchase Product Description Video Product Reviews Related Categories New Arrivals at This Shop Recently Viewed Products Payment Options Delivery Options Return Policy Shop Contact & Legal Key phrase or slogan that identifies the product Name of the product Image of the product, variant selection and the Add to Cart button Description of the product A YouTube video that promotes your product Reviews of the product Categories that are related to the product New items in your shop Products that the customer recently viewed Payment options for the customer Delivery options for the customer Return policy of your shop Contact and legal information for your shop 8
9 Information With each of the widgets on your product page, you re able to reorder them by simply dragging and dropping the blocks to your desired order. This will then be reflected on the product page once you click Save at either the top or bottom of the page. Some widgets will have options - you ll see a cog icon to indicate this - - in which you will be able to completely remove the widget from the product page. If you would like to put the widget back in to your page, you will find that you can add widgets by clicking Add Widgets and selecting a widget from the list of the available widgets. Some widgets can also appear on the page twice: Tagline Product Name Image and Purchase Related Categories Video Once you ve made any changes to your product page, click Save at either the top or bottom of the page to store the changes on your shop. By default, additional product images will be displayed as large images beneath the main image and purchase widget on your product page: If you would like to change this so that the additional images display as thumbnails under the main image, click on the cog to open the options menu and choose Image 9
10 Settings. On the pop up that presents itself, you can then select the Thumbnail Layout to alter the display settings of your additional images. Once you ve made the change, make sure to click Save Changes to alter your image display settings before saving the page as normal. 10
11 The Featured Products section of your shop allows you to highlight specific products (which you define) to your customers and display them on your home page. You can use this section to feature new products or products that are on sale. To access the Featured Products page, navigate to Product Catalogue > Featured Products. Once you re on the page, you ll see something that looks like this: As you should be able to see from the image above, you can do 4 things on this page. Firstly, you should give the featured products block a name that will display above the products on your Shop Top page. To do this, complete the Section Heading field with your desired name. Then, you ll need to set whether you want the block enabled (so it s visible on your Shop Top page) or not, and whether you would like it to display out of stock products (if one of the products in your featured products sells out it will go to 0 stock you need to decide whether you d like to show this product still or not). 11
12 The final step to setting up your featured products is to select which products you would like to display in the block. To do this, click on to Add Products and you ll be greeted by a pop-up in which you can search for products by SKU, Base SKU or Product Title. Search for your products and you ll see something similar to this: Once you have found the product(s) you d like to add to the Featured Products block, just tick the checkbox on the left hand side of the product image and click Add Products. After you ve added all of the products you d like to (you can have up to 20), you can then drag and drop to re-order the products as that will be the order in which they display on your Shop Top page under the first description block (as described previously). When you re happy with your selection, click Save at the bottom of your page to store the changes on your shop. 12
13 A number of the pages in your shop will include free content editors that will allow you to enter text, images and more to them. They each have a limit of HTML characters (view the source of the block to get the HTML source), and the functionality of the editor tools is described below: You can use the formatting tools to help highlight key text for your customers to read. Standard formatting tools that you should be used to with a word editor are available including Bold, Italic, Underline, Text Colour, Highlighting, Left / Central / Right Justify, Font and Size. You can use bullet and number lists to detail out lists of information to your customers. As with the shop image block, you can upload images from your computer to use in your shop description. You can use these in conjunction with the formatting tools to help with alignments, or you can include them inside a table layout. 13
14 To insert an image, click on to the icon to bring up a pop-up window. Once the pop-up is visible (you may need to approve pop-ups from the site depending on your browser security settings), click on to Choose File to browse for your image. Once the image has loaded on the pop-up, scroll to the bottom of the pop-up window and click OK. This will then put the image into the description block on your page. The insert link function can be used to link an image or some text through to another page within your shop. To insert a link, firstly you should select the image or text that you would like the link to work on. 14
15 To hyperlink text, just click and drag over the text you would like to use and then click on to the icon to bring up the following pop-up: Inside of the URL box, either type or paste in the URL (webpage address) that you would like to link to. To hyperlink an image, you ll firstly need to select which image you d like to use. The way you select your image may change depending on which web browser you are using. Most modern browsers will allow you to simply click on the image (Firefox and Internet Explorer will put a border round a selected image, Safari and Chrome will highlight it in blue). If this doesn t work, click and hold your left mouse button on the image, wiggle the mouse and let go and you should see the image highlighted / with a border which will indicate the image is selected. Once your image is selected, follow the steps above in regards to hyper linking text once it s selected to hyperlink your selected image. 15
16 The table function ( icon on the toolbar) is very helpful for setting the layout of your shop description (or any other block that uses free form content like this). When you click on the icon, you ll be greeted by a properties pop-up (annotated below): Once you re happy with your settings on the pop-up, click OK to insert the table into your description box. You can then use any of the other tools to insert and format text and images; and by right clicking in the table you can then merge cells, add rows and columns, delete the table and edit the properties too. The horizontal line will insert a dividing line between blocks of text or images and will help you to section off blocks of your description to help your customers discern between various pieces of information. 16
17 If you would like to view or edit the HTML source code of your shop description, you can do so by clicking on to the icon. This will then change the view in the description block to the HTML code so that you can edit it directly rather than using the toolbar functions. Simply click on to the source icon again to switch back to normal view so that you can see what effect your changes to the HTML source code have had. 17
18 The HTML tags listed in the table below can be used in the Description fields for Category, Product and Delivery. Note: All tags can use the attributes: class, id, style, dir, lang, title. Tag End Tag Attributes <!--Comment--> <a> </a> accesskey, href, rel, tabindex, target, type <area> accesskey, alt, coords, href, name, shape, tabindex, target <b> </b> <blockquote> </blockquote> cite <br> <dd> <div> <dl> <dt> <em> <h1>... <h6> </dd> </div> </dl> </dt> </em> </h1>... </h6> <hr> <i> </i> <img> alt, border, height, ismap, src, usemap, width <li> </li> value <map> <nav> </map> </nav> accesskey, contenteditable, contextmenu, data-*, draggable, dropzone, hidden, spellcheck, tabindex, translate <ol> </ol> start, type <p> <pre> </p> </pre> 18
20 The HTML tags listed in the table below cannot be used in the Description fields for Category, Product and Delivery. Tag <article> <aside> <audio> <canvas> <figimg> <figure> <footer> <header> <hgroup> <iframe> <mark> <rp> <rt> <ruby> <script> <section> <time> <wbr> 20
21 If you d like more guidance on how to complete your shop design you can visit the Academy site for videos and guides or contact our Merchant Helpdesk for support. Our Merchant Help Desk is in place to support you all the way: Open 8:00 to 18:30, Monday Friday Out of hours emergency support available Provide support for technical and account queries 24 hour turnaround for most queries You can reach them by at 21
Basic HTML elements: Quick Reference University of Bristol Information Services document web-r4 Document Information Format Conventions The following format conventions are used in this document: Computer
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (email@example.com) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux
Introduction to the Hyper Text markup language (HTML) SE 101 Spiros Mancoridis What is HTML? HTML (Hyper Text Markup Language) is a language for specifying how text and graphics appear on a web page When
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
: By the end of this chapter you will be able to: Insert and format text. Insert and format images. Insert and format tables. Insert links. Use ActiveBlocks to enhance your pages. Introduction to the Schoolwires
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
Web Page Design Final Exam Review Page 1 of 7 Multiple Choice--Instructions: Circle the correct response. 1. Computers and networks allow people to. a. gather data and information b. analyze data and information
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
Service: User s Guide 1 Table of Contents 1) Connecting to Your Online Interface 2) Start Creating Your Website 3) Managing Website Pages 4) Managing Website Content 5) Integrating Widgets and Other Content
CONTENTS Minimum System Requirements... 3 Design Your Website... 3 Choosing your Theme... 4 Choosing your Header Style... 4-5 Website Content Editor... 6 Text Editor Toolbar features... 6 Main Menu Items...
Dreamweaver CC Basics When you look at a web page, you might wonder how it is made. To display a web page, your internet browser reads and interprets a special set of instructions. These instructions are
Redback Solutions Visionscape Manual Updated 31/05/2013 1 Copyright 2013 Redback Solutions Pty Ltd. All rights reserved. The Visionscape Content Management System (CMS) may not be copied, reproduced or
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
Google Sites Getting Started 1. Log into your gmail account 2. Click on Sites 3. Click on Create 4. Choose a Template if you want (these will have preset elements and page settings which you can then adapt
Working with the new enudge responsive email styles This tutorial assumes that you have added one of the mobile responsive colour styles to your email campaign contents. To add an enudge email style to
Ready Reference 063014 Introduction Introduction to Drupal 6 This page provides instructions for using the Drupal Web Content Management System. Drupal makes publishing content relatively easy and allows
NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants
How to Build a SharePoint Website Beginners Guide to SharePoint Overview: 1. Introduction 2. Access your SharePoint Site 3. Edit Your Home Page 4. Working With Text 5. Inserting Pictures 6. Making Tables
UNIVERSITY COLLEGE CORK CMS Content Management System Table of Contents 1 Introduction... 1 2 Planning your Website... 1 2.1 New Sites... 1 2.2 Migrating an Existing CMS Site... 2 3 Accessing the Content
Adding Links to Resources Use the following instructions to add resource links to your Moodle course. If you have any questions, please contact the helpdesk at. Adding URL links 1. Log into your Moodle
Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...
Quick Start Guide To: Using the Sage E-marketing Online Editor When you first enter the Sage E-marketing online editor, you will see two tabs on the left-hand side of the screen: Content Editor and Customize
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
Quick Start Guide to: Understanding the Advanced Template Editor The basic template editor in Swiftpage is used to create templates that began as imported templates or global advanced templates. (One function
Umbraco v6 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...
Umbraco Content Management System (CMS) User Guide Content & media At the bottom-left of the screen you ll see 2 main sections of the CMS Content and Media. Content is the section that displays by default
You will be directed to the "Portfolio Settings! page. On this page you will fill out basic DIGICATION E-PORTFOLIO HELP GUIDE Where do I start? Log in to Digication Go to your school!s Digication login
BLACKBOARD 9.1: Text Editor The text editor in Blackboard is a feature that appears in many different areas, but generally has the same look and feel no matter where it appears. The text editor has changed
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
-SoftChalk LessonBuilder- SoftChalk is a powerful web lesson editor that lets you easily create engaging, interactive web lessons for your e-learning classroom. It allows you to create and edit content
University of East Anglia Liferay Training Admissions, Recruitment and Marketing Department i Version 3.4 Contents Overview...iii Introducing Liferay... iv 1. Logging in and accessing your site... 1 2.
: The Schoolwires Editor By the end of this chapter, you will be able to: Insert and format text. Insert and format images. Insert and format tables. Insert links. Use ActiveBlocks to enhance your pages.
Using econtentmanager s ewebeditpro Editor econtentmanager comes with its own content editor, called ewebeditpro. With ewebeditpro, you can add and modify your page content with WYSIWYG ease-of-use. The
SoftChalk Level 1 University Information Technology Services Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production Page 1 of 49 Copyright 2013 KSU Department of University Information
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...
File Functions Save Save As Revert to Last Save Click on the "Save" button to save the current file on the staging server and exit the WYSIWYG editor. Remember, it will not be live on the production server
WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.
Fasthosts Customer Support Website Builder Manual This is a designed as a definitive guide to all the features and tools available within Website Builder. Contents Introduction... 4 Adding Content... 5
How to Create a Mobile Responsive Template in ExactTarget This manual contains the following: Section 1: How to create a new mobile responsive template for a Business Unit/Artist Section 2: How to adjust
UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series firstname.lastname@example.org Revised 4/28/2014 CONTENTS The eclps Overview... 3 Objectives... 3 Adding the Syllabus or Lessons Tool to
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...
USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...
GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage
emarketing Manual- Creating a New Email Create a new email: You can create a new email by clicking the button labeled Create New Email located at the top of the main page. Once you click this button, a
Text Putting Text on the Page 1. Entering text on the web page is just like typing in a word processing document. Lines will wrap within a paragraph. 2. Enter = Paragraph Break (leaves a blank line) 3.
J Press: A guide to creating your own website At the Ryerson School of Journalism you will be provided with your own website on our own in house multi site WordPress server located at J press.fcad.ryerson.ca.
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
The McGill Knowledge Base Last Updated: August 19, 2014 Table of Contents Table of Contents... 1... 2 Overview... 2 Support... 2 Exploring the KB Admin Control Panel Home page... 3 Personalizing the Home
NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...
Editing the Main Template Using Microsoft Front Page This is the Solutions for Your Life main template. Below you will find information on how to edit each section. The first thing to realize about Front
Personal Portfolios on Blackboard This handout has four parts: 1. Creating Personal Portfolios p. 2-11 2. Creating Personal Artifacts p. 12-17 3. Sharing Personal Portfolios p. 18-22 4. Downloading Personal
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
Vodafone Business Product Management Group Hosted Services EasySiteWizard Pro 8 User Guide Vodafone Group 2010 Other than as permitted by law, no part of this document may be reproduced, adapted, or distributed,
Getting Started with Google Sites Getting Started with Google Sites 1 Background Information Google Sites is an online application that makes creating a team web site as easy as editing a document. With
10.1. CMS Information Sheet 10.1 is similar to Departmental News pages but not exactly the same due to specific requirements from the Communications & Public Affairs Department. University News: http://www.aber.ac.uk/en/news
Moodle book The Book resource is, in essence, a series of connected webpages, making it easy to create multi-page resources with a book-like format. Previously created Word documents or webpages can be
LOGIN https://cascade.csueastbay.edu:8443 http://www.csueastbay.edu/cascade Both URLs work. Use your NetID and password to access the system. Firefox is the preferred browser. Click Continue or OK if the
Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to