Introduction Designing your Common Template Designing your Shop Top Page Product Page Design Featured Products...

Transcription

1

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

19 <s> <small> </s> </small> <source> media, src, type <span> <strike> <strong> <style>   <table> </span> </strike> </strong> </style>   </table> border, cols, summary, cellpadding, cellspacing, align <tbody> </tbody> valign <td> </td> bordercolor, colspan, rowspan <tfoot> </tfoot> valign <th> </th> colspan, rowspan, scope <thead> </thead> valign <tr> </tr> colspan, rowspan <tt> <u> <ul> <video> </tt> </u> </ul> </video> autoplay, controls, height, loop, muted, poster, preload, src, width 19

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 Merchant.Helpdesk@Rakuten.co.uk. 21