Storefront Design: Ultimate Theme Builder Guide

How to edit and design your store?

With Theme Builder you can edit your design the way you like. You can add images, texts, newsletters, write in HTML - you name it. Let's describe piece-by-piece how to use our Theme Builder.

Go to "Navigation", then "Themes", click "Customize":



It opens up Theme Builder:



In the menu on the right at the top you can see a little tool sign. This opens up "General Settings":





Lets describe "General Settings" one-by-one.

Theme - Classic. In this case it will stay the same.

Colors - choose a color for your text and headlines (preheader, header, footer, body, pagination colors).



Text Styles. You can add fonts, size, height and weight for your texts and headlines.



Buttons. What colour you would like to have "Contact us" button, you can modify it in here:




Add "Favicon" to your webpage.



Customization. You can "Select Elements" or "Swatch Boxes" to see how your products appear on product page.



Modal Window. Add a pop-up message to your front page. For instance, there is a huge sale or big announcement.



Next let's go to "Header"



Add a logo for your online store and adjust it the way you like:



Under "Header" you can also add your social media links:



Next design "Footer":



Add details to your footer (section width, footer menu and payment methods):



Now begins the fun part! Start designing rest of your page by "Add new section". Add images, texts, newsletters - design the way you like it.



Let's take a look of the elements one-by-one. List of sections:



"Hero Image" click "Add"

Edit text, add files and change height:



Click Contact page of your menu.
"Add new section" by choosing "Contact form".
Click "Add" and start editing your contact form.



Click "Add new section"
Next "Text columns with images", edit columns, add texts and images.



Click "Add new section"

Next "Custom" and customize your content:



You can customize your content in HTML:



Next "Richtext"click "Add"
Add page title and text, you can also add content in HTML.



Next "Image with text" click "Add"
Modify text, button, add pictures.



Next "Collection list" click "Add"

Add your product collections:



When you click on "Collection" tab it gives you an option "Add collection":



This opens up "Collection" tab under "Product Management". You can add collections, for example, jeans, shoes, jackets etc.



You can add Collection Name, Handle, Collection Description, Image. After this click "Add Collection"



Next "Testimonials" and click "Add" and add you testimonials.



Next "Image Gallery" and click "Add" and add your images:



Next "Newsletter" and click "Add" and add your images:





Next "Collection" and click "Add" and add your featured products:

Updated on: 26/05/2020