You chose a design template but would like to adjust it to your individual preferences? Then this is your guide. Important to know is that you have to redo all the changes if you switch your design template wich is why you should first of all agree to one design template before you start.
- To go to Pro Mode you have to click on the editing symbol and then on "enter pro mode". For all design adjustments the rule is: Hit the save button (the fourth from the left) before you open your store to check the changes.
Maximise/Minimize your Logo
Go to "logo.css", row 7 (max-width:) and change the 100% to 200 px etc. depending on how big you want your logo to be.
Change Logo Position
To put your logo in a higher or lower position you enter "logo.css" mode, go to row 8 (padding-top:) to change the 30 px to 10 px for expamle if you want to have your logo only 10 px downwards from the top of your shop. The higher the number the lower the logo.
Change Background or Font Colour
To change the background colour of your shop you go to "design.css" (just for wundery design) to row 441 ($header-background:) to insert #yourcolourcode; to change the background colour of your header (= the colour behind your logo). HTML colour codes can be found here e.g.. In row 442 ($header-slogan-color:) you can also insert a colourcode to change the font colour of your slogan, in row 448 ($navigation-background:) you can do the same to change the background colour of your menu, in row 470 ($content-background:), 471 ($content-header-title-color:) and 472 ($content-header-description-color:) you can change the colour of your website, your homepage heading or rather your homepage-font. Don't forget to save and check if the new colours are doing well in your shop.
Change your fonts
To save new fonts you have to do two code adjustments. First of all you decide for two fonts (1st for text & 2nd for headings) under https://fonts.google.com/. If you chose two fonst you can then insert them in the "design.css" in row 422 and 423 instead of the presetted Lato and Lora. After saving you also change the fonts at "master.html" in row 35 and 36. Search in both rows for the names Lato and Lora and insert your new fonts instead.
Replacing Homepage Text above promoted Products
To let your homepage text be shown above your promoted products you just easily cut out the code from row 270 (master.html)
<div class=“homedescription”>
{{ store.homepage_category.long_description }}
</div>
and insert it in row 257, so to say over the promoted products. If you feel secure you can also apply the acquired knowledge to rearrange other text blocks on your homepage.
Tipp: If you delete a part of your code by accident you can easily install another template, delete the "rotten one" and install your desired template again. But then you also have to redo all the changes you saved before. To avoid that you can do backups by yourself through saving your whole master.html code in a document from which you can recopy it to your design template in case of an accident.
Minimize your Slideshow
To avoid that your slideshow is being shown all over your homepage you can easily go to "carousel.css" mode to delete the old and insert the following code:
.carousel {
max-width: 1200px;
margin:0 auto;
img {
width: 100%;
} .left, .height {
min-height:180px; }
}.items {
&.mg-bottom-nav {
margin-bottom: 0px;
}
}
Of course all pixel settings can be adjusted by you, depending on which size you want your slideshow to be. The above shown code is just one possibility of how to minimize your slider.
If you have more questions concerning the topic we are happy to help via email or a click on the blue online support symbol in the right corner. If you have special preferences concerning your shop design you can also text us the specifics and we are searching a fitting expert to help you realize your wishes for an additional charge.
