The VilkasVanilla theme is a stylish and responsive theme without side columns. You can download it and start using it in your shop by following the instructions below. Once the theme has been imported in the shop it works best if not too many changes are made afterwards. If you want to change and build your own theme we recommend to instead use one of the other ready made themes from the settings as a base and build on from that.
In the header area, where the logo, search bar and basket elements are located we recommend to not add new elements or make any changes except for adding your own logo in the logo element instead of the example logo. Even though it looks like there is a lot of space for new elements in the header from a bigger screen, there is a big risk that new elements wouldn't show very well on a mobile screen and that the theme would no longer be responsive.
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.
1) Download the theme to your computer
2) 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.
3) 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).
4) 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.
Recommended settings
Here we list the settings for pages and products that are necessary for this theme. The theme has been designed to work with specific settings and wouldn't necessarily look as good using other settings.
1) On the Content/categories > Datasheet view > Layout page you choose the text settings as the one with one image and three text fiels:
2) On the Content/categories > Datasheet view > Images page the second image field is the field that is used for the large picture on the home page and you can here upload your own image. You first untick the box for "Change size during upload" to avoid the image size being scaled during upload. The recommended size for this picture is 1500x500px.
3) The home page content in the field "Long description" on the Content/categories > Datasheet view > General page is used as the text that shows on top of the picture. With the format "Heading 2" the text will be on the banner picture in the same format as in the example and a link that is added in "Long description" will show as a button on the picture. Content added to the "Long description (2)" field will show just below the banner picture.
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.
I edited the theme and now it's not responsive anymore
If you want to make changes to the theme elements we recommend that you first save a backup copy of the theme on the Design > My themes page. If the changes would then break the responsivity you can easily go back to the backup copy. You can also always import the theme again to start from the beginning.
I don't know how! I don't have time! = Don't worry!
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.
search terms: responsive, modern, new, theme, design, layout