The first free template named Toys Store now is available. It’s quite easy to apply. After only five steps, you can run a delicate toy store.
Step 1: Download, Upload and Install
- Download the free theme - Toys Store from the Extension Manager.
- Uncompress the zip file. You will see three files, Catalog, README.txt and a zip file named “tomatocart_toy.zip”.
The Catalog folder includes the new feature named Featured Brands under Toys Theme, which will be described in Step 5. You have to move it to /includes/modules/content in your TomatoCart project file.
Anything confused, you can refer to README.txt.
tomatocart_toy.zip includes the Toy Template. - Navigate to admin>Templates>Templates, in TomatoCart backend. Then click “Add” to upload “tomatocart_toy.zip”.
- Install it and then set it as default by clicking the “Star” in its row as shown in Figure 1.
- Empty Browser’s Cookie and refresh your front store. What comes next should be the Toy theme store.
Figure 1 set TomatoCart Toy Template as default
Figure 2 Front Store under Toy Theme
Step 2: Upload Logo
Wanna upload your own logo? It is very simple!
Navigate to admin>Templates>Logo Upload. Then click “Browse”. Save your implement. And the logo is successfully uploaded! Figure 3 shows the Logo Upload section under admin>Templates.
Figure 3 Logo upload
Figure 4 shows the new logo at the store front.
Step 3: Add Image Menu or Slide Show
You really wanna show products dynamically to your clients in the Content section, for the purpose of publicizing and promoting? You can utilize Slide Show or Image Menu. Both slide show and image menu are displays of a series of chosen pictures. What’s difference then?
Slide Image:
Pictures in Slide Image are wholly overlapped, and after the set time the picture will automatically change into the next one.
Image Menu:
Pictures in Image Menu are partly overlapped, and you can clearly see how many pictures are used in the image menu section. After a fixed time the picture will also automatically change into the next one.
The adding approach of the two is similar. Here I’ll particularly talk about how to add Image Menu into a store.
- Install Image Menu.
To install it, go to admin>Templates>Templates Modules>Content, as Figure 5 presents. - Edit Image Menu
Figure 6 shows the Image menu editing listing page.
Figure 6 Image menu editing page
Pay attention to the numbers in Figure 6. Only if the numbers are set in this way can the image menu displays appropriately on the front page. If the numbers remain default, the image menu section in the front page will appear as Figure 7 shows.
Figure 7 Image Menu with the default settings
- Add Image Menu
Firstly, navigate to admin>Templates>Template Modules Layout>Content, and choose the Tomatocart Toy Template on the top right pull-down menu.
Then, click the “Add” button to add Image Menu, as shown in Figure 8.
Choose the Pages and Group. Click “Save”, when done.
Figure 8 Add Image Menu
Figure 5 Install Image Menu
After the above steps, refresh the store front. See how Image Menu is achieved in Figure 9.
Figure 9 Properly-set Image Menu
Step 4: Change Image Size
Sometimes people will buy things that look good. As you can see in Figure 2, those product images seem a little too small under Toy Theme. These products under a specific module, Feature Products here, are defined as in the image group of Thumbnail. Image size in each image group can be configured. Take changing Thumbnail image size as an example.- Find the Thumbnails (Image Group) section under admin>Definitions>Image Groups.
- Edit the image size.
Figure 11 shows the size of feature product images in Figure 2 that seems not appropriate.
Re-define the width and height. Change them into 200 in width and 160 in height. By the way, the width and the height should be in due proportion.
Figure 11 thumbnails editing page
Note: The other languages in the Demo have been deleted in the Languages section, under admin>Definitions. - Execute the Settings
The image group size has not really changed until you execute it.
Go to admin>Tools>Images, and then resize images.
Select the right image group – Thumbnails, and the checkbox - “Overwrite Existing Images?”. Click “Execute”. - Refresh Store Front
Following steps here, you have totally changed the image groups’ size. Just refresh the page, and have an immediate look.
Have you realize that images here are bigger than those in Figure 2?
Figure 13 feature products new
Figure 10 image groups
Figure 12 Execute image group
Step 5: Translate a New Module
There is a new module named Featured Brands at the bottom of the Toy Theme as Figure 14 shows. However it is not translated initially when installed. You have to translate the keys related first!
Figure 14 featured_brands_title
- Find the Languages section under admin>Definitions.
- Find a language. Click the “edit modules” graphic tool. Go to “general” category. Click “Add Definition”. And input the data as Figure 16 tells.
Definition Value should be the translation of the language.
Figure 16 Add Language Definition
This new module will finally appear like this:
Figure 15 Languages
Figure 17 Featured Brands
The whole tutorial just shows the template switching. You should continue with store configuration, products adding etc, which you can refer to specific chapters in the User Guide.
