Our Rock theme is a modern, clear and responsive theme. You can download it and start using it in your shop by following the instructions below.
In the top header with black background (the colour can be changed) there is a text field for service promises. On the right there are also relevant links for using the web shop.
- On the home page there is a place for a picture slider which is as wide as the whole page.
- Below the picture slider you can promote categories. On a bigger screen 2 categories are shown next to each other. You can also add more and they are then shown in a new row.
- Below the category boxes there is a place for text (Long description 2). Text content is always important for the search engine optimisation.
- Below the text you can promote products.
- Below the product boxes there is a second field for text (Long description 3). In the demo shop we have as an example our Instagram feed. This can be created with some external service, for example lightwidget.com.
- In the footer there are links, contact information and social media.
From a mobile screen the top header is compact and the menu opens from a burger icon. By clicking the main category the sub categories also open.
How to use
You can add the theme to your shop by following these steps.
- Download the theme and save it on your computer.
- In the shop administration on the Design > My themes page click on the "Import theme" button at the bottom of the page and choose the theme.
- Tick the "Overwrite the start page during import" if you want the theme's example content to be imported to the shop. Please note that it then overwrites the existing content on the home page. (If needed, copy the existing content as a backup copy from the Content/categories > Datasheet view > General page).
- When the theme has been imported to the shop it will appear at the bottom of the list on the Design > My themes page. From there you can preview, edit and activate the theme to make it the active theme used in the shop.
If you just want to test the new theme on the Design > My themes page without actually activating the theme you can move the design codes from the HTML Head area to an element in the active theme. In the theme footer you can add a "Text (HTML)" element and copy the design codes from the Settings > General settings > Advanced settings > HTML Head area field. Doing so the code will only affect that theme and it's easier to test other themes.
1) The banner on the home page is created using FlexSlider and in order to edit it, you need to make the changes in the html code.
- Prepare an image you want to use. The recommended size is 1600x600 px. Choose an image that will work well with a text over it. So, no image with to much contrast or details. Note that the edges of the image will be cut off on a mobile screen.
- Upload the banner image in the tool Content/categories > File manager in the shop administration. Copy the image address by right clicking "Download" and choosing "Copy Link Location".
- Add the image url instead of the example image url in the code. Change the text and the link address of the button.
2) On the Content/categories > Datasheet view > Layout page you choose the following settings:
3) The category boxes on the home page are automatically created for categories that have the first image. Upload the image for the category on the "Images" tab. Note! Untick the choice to change the size during upload before you add the image. Recommended size for the images is 500 x 500px.
4) On the Settings > General settings page you set the field Mobile view to Do not use. Since the theme is responsive there is no need to use a separate mobile view.
5) The zoom function for the product pictures should not be used and that can be set under Products > Product settings > Use zoom function for product images: No.
Complete the design
Complete your design on the Design > Advanced design. At the top left you change the demo text to your own service promises. In the footer you add your own links to social media and other links.
Set the colours in the header and other areas plus the colour for the text and links so that the fit you company image. Note that the preview in the design tool doesn't always show it as it actually looks like, which is why it's better to look at the actual shop once you have made a change to see what the customers will actually see.
Implementation of the theme as an extra service
If you feel it is too difficult or takes too much time to start using this theme you can always order the implementation of the theme as an extra service from us at 295€ (excl. VAT). The service includes the implementation of the theme in your shop as well as adding your logo and changing the colours to match your image. Bigger changes are not included in the service and if bigger changes are needed they should be agreed on separately.