Tired of the same look and looking to revamp your website? Don’t worry, we bring to you a Theme Library and a DIY Website Editor to help you personalize your website in a fun interactive manner.
You can access these exciting features by logging into the Desktop app of the seller website - www.smartbiz.amazon.in/home.
This article explains the website structure and the different Editing features offered to make your journey smooth.
What are Themes? How are these structured?
Theme is basically a template that specifies the overall layout of your website and how content will be displayed on different pages. A template is made up of a pre-defined set of different sections (or widgets) that are used to showcase products or information on the website like your Hero Header image, Featured products section, banners etc.
These sections are further made of elements such as Title, Sub-title, Image and or Product links etc. Example - The Hero Header may consist of a Title, Subtitle, Image and a Product page link.
You can customize these website templates in the DIY Website Editor by (i) adding, removing, and re-arranging the different sections within and (ii) updating the elements (text, image or products) there within.
What all can you do with the DIY website editor?
Once you have selected a theme that defines the basic look and feel of your website, the chosen template or draft will open in the website editor.
Here, you can personalize the theme to suit your unique brand.
With the editor, you can:
- Change Theme properties - Choose primary colour schema and fonts that will be applied to all pages across the website. Each theme will have its own specific list of colors and fonts supported.
- Enable/ Disable Sections - Add or remove sections by using the enable disable toggle. You can easily add new sections from each theme’s pre-defined list to showcase your products or feature a selection or display your customer testimonials. If you are not ready to showcase a section, you can simply disable it and add it later. (Note - Each theme will have its own pre-defined set of sections)
- Update sections - Edit section headings (make them quirky or use puns as per your brand image), Upload images (ex- changing your Hero and Banner images to showcase latest products), Select products to showcase in different sections or Link your merchandizing assets to different website pages and select .
- Rearrange sections - Shuffle the position of sections on the website page as per the specific TG profile and buying behavior.
- Maintain Drafts, Preview and Publish - Create and maintain work-in-progress draft versions of your website and preview how they will look before you are ready to publish and take the website live for your buyers.
Do I need to set up anything before editing my website?
You will need to set up your basic store details on the seller app before you can start editing your website. You are encouraged to complete the below steps to ensure all information flows seamlessly onto your website:
- Create a SmartBiz account - set up store with Store name, business category and Address.
- Build your catalog - List atleast 10 products with images and proper description; the more the details; the better chances of converting your customer. Mark your bestsellers. Organize your catalog into collections and product categories. Uploaded images for each collection and category to showcase on the storefront. The template gives you different widgets to showcase these beautifully on the website.
- Initiate payment set up - Enable COD and or Start Razorpay set up and KYC
- Upload your logo - Go to Profile>> Store Appearance tab >> Upload logo image.
What happens to my existing live website? What will my buyers see?
Your existing website will be migrated to the default theme with all basic store data and catalog backfilled so that your buyers’ shopping experience is not interrupted. Your customers can continue to shop on this version until you decide to publish a new look.
Where do I start editing my website?
Currently, you can only edit the website from the desktop app. Login to the website www.smartbiz.amazon.in/home with your SmartBiz store credentials and navigate to the Website Appearance tab.
→ If you are existing seller, you will see a published website that you can preview and start to edit. You will also see a Themes library section, which enlists all possible website templates that you can choose from. You can view the demo store to understand what the theme will look like and click on “Try Theme” to start building your website from scratch.
→ If you are a new seller, you will have to option of choosing a theme from the Themes library and starting afresh by clicking on “Try Theme”.
Irrespective of where you start from, you can start making changes and create drafts that you can keep editing and can publish, when ready. All your store data, address, store name, updated logo, trust markers and catalog data, will flow in seamlessly for you to showcase on your website.
How to navigate and use the website Editor?
The website editor uses the top and side bars to display a tree view of all editable content for the chosen theme that you decided to edit. For starters, you can simply use the page drop down to select a page that is editable in the chosen theme. You can use this drop down menu to switch between different editable pages in the theme. Once you select a page to edit, you will view a list of all sections that can be edited in that page right below the drop down in the left side panel. You can further expand each section listed on the side panel by clicking on the section tab or ‘>’ icon to view the editable elements inside. You can view the theme page selected on the canvas and also concurrently see the subsequent results of your edits on the section and the page in real-time.
Note - You cannot use the canvas to navigate to different pages in the website. Please preview the saved draft to check the draft website functionality and view all website pages before publishing.
How do I identify sections on the canvas?
The index of sections on the left-hand side panel (LHS panel) works like a hyperlinked index. You can use the LHS to navigate to different sections with a simple click. On clicking any section in the LHS panel, two things will happen - One, your Canvas will redirect and take you to that section. That section will be highlighted with a blue border and a corresponding label on the canvas. Second, the LHS menu will expand and show you a list of all elements (text, image, product links) that you can edit within that section.
What should the image size be for the hero slide?
Suggested Image Size:
W: 1440px by H: 500px
Max Size: 5MB
Supported files:
JPG, PNG, JPEG
Animated WEBP images are currently not supported.
Responsiveness:
Ensure primary images/content are centred when uploaded to prevent cropping on mobile devices.
For more information, you can also refer to the "SmartBiz Toolkit."
How do I enable / disable sections?
Some basic sections are enabled by default in the theme as these can be pre-filled with the catalog and store data input provided at the time of store set up. Other sections that require custom inputs (ex - selecting which product to highlight or which collection to feature or what to show in the announcement bar) are disabled and shown in a greyed out format in the editor. You can enable them from the LHS panel by simply clicking on the section and switching the toggle on. Once the section is enable, you can add the desired content. You can also use this feature to keep working on your website and incrementally publish sections as and when they are ready.
Step 1 : Click on the disabled section in the LHS.
Step 2 : Switch on the toggle shown below the section. You can see it set to grey.
Once you switch on the toggle, you will see that the section gets enabled on both the LHS and the canvas. You can now add the required input.
How do I edit text on the editor?
You will see all editable text elements listed within each section on the LHS panel. To edit text:
Step 1 : Click on the text tab (Title, Subtitle) on the LHS menu. The relevant text string will get highlighted on the canvas.
Step 2 : Click on the highlighted text box on the canvas. You will see a text cursor appear. You can start using the cursor to delete existing text and add / change text. You can also copy paste text.
Note 1 - You will see the a counter specifying the character limit. You will not be able to type anything once the character count becomes 0. You can copy paste text that exceeds the character count; however, this will get trimmed down per the max characters allowed as soon as you move to a different element or widget. This is to ensure that the text displays well on all devices (laptop and mobile).
Note 2 - You cannot change any catalog data including product names, product description or pricing with the editor. This data is directly fetched from your catalog and can be managed from there itself.
Note 3 - You can not leave any text tile empty for now. Even if all text is deleted, the tile will revert to the last text input automatically as soon as you move to a different component or click out anywhere else. We believe these headers are import for buyer’s smooth navigation.
How do I upload images on the editor?
You will see all editable image elements listed within each section on the LHS panel. Before uploading an image, please check the image size, resolution and format guidance provided for each image element in the “i” info icon. You can simply hover on it. The image that you upload will be cropped to fit the suggested resolution.
Now to upload the image:
Step 1 : Click on the upload icon shown to the right side of each image tab on the LHS. You can also click anywhere on the image tab on LHS to simply identify the corresponding image box on the canvas (but not necessarily needed)
Step 2 : On clicking the upload icon, a dialogue box will open. Select the image file that you wish to showcase.
Once the image is selected, the editor will give you an option to crop the image. The image will be cropped according to the size of the image container on the canvas to ensure that the uploaded image renders perfectly on the website.
Step 3 : Select the image part that you want to crop and confirm by clicking on done shown on top right of the image.
Step 4 : Once you confirm the cropped portion, the cropper will show you how the cropped image will look. Click on Upload image, if you are satisfied with your selection, to complete image upload.
Step 5 : It will take 1-2 seconds for the image to reflect on the canvas. You will also see a success notification on top right that image was uploaded successfully.
Note 1 - The editor only supports upload of image files in formats - PNG, JPG and JPEG that are less than 5MB in size. If you upload a different image format or one > 5MB, the upload will error out.
Note 2 - You cannot change any catalog data including product names, product description or pricing with the editor. This data is directly fetched from your catalog and can be managed from there itself.
- SmartBiz Toolkit.pdf700 KB