> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.shoperb.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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. 1. Go to **"Navigation"**, then "Themes", click **"Customize"**: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/11-screen-shot-2020-05-07-at-1_3p1lf5.png) It opens up **Theme Builder**: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/12-screen-shot-2020-05-07-at-1_7kpgx4.png) 2. In the menu on the right at the top you can see a little tool sign. This opens up **"General Settings"**: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/13-screen-shot-2020-05-07-at-1_79yqqj.png) ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/14-screen-shot-2020-05-07-at-1_1cqwmyb.png) 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). ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/14-screen-shot-2020-05-07-at-1_1fwtuls.png) **Text Styles**. You can add fonts, size, height and weight for your texts and headlines. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/15-screen-shot-2020-05-07-at-1_1had5sz.png) **Buttons**. What colour you would like to have **"Contact us"** button, you can modify it in here: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/16-screen-shot-2020-05-07-at-1_1lfrhzk.png) Add **"Favicon"** to your webpage. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/122-screen-shot-2020-05-07-at-_1n639hl.png) **Customization**. You can "Select Elements" or **"Swatch Boxes"** to see how your products appear on product page. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/33333-screen-shot-2020-05-07-a_zlgf7f.png) **Modal Window.** Add a pop-up message to your front page. For instance, there is a huge sale or big announcement. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/333-screen-shot-2020-05-07-at-_rddc03.png) 3. Next let's go to **"Header"** ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/444-screen-shot-2020-05-07-at-_z97ty1.png) Add a logo for your online store and adjust it the way you like: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/444-screen-shot-2020-05-07-at-_am4nnk.png) Under **"Header"** you can also add your social media links: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/555-screen-shot-2020-05-07-at-_14dhrds.png) 4. Next design **"Footer"**: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/666-screen-shot-2020-05-07-at-_175umex.png) Add details to your footer (section width, footer menu and payment methods): ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/7777-screen-shot-2020-05-07-at_evwmmi.png) 5. 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. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/9999-screen-shot-2020-05-07-at_1w320ip.png) Let's take a look of the elements one-by-one. List of sections: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/101010-screen-shot-2020-05-07-_uxttms.png) **"Hero Image"** click **"Add"** Edit text, add files and change height: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/12121212-screen-shot-2020-05-0_ohpj0v.png) 1. Click **Contact **page of your menu. 2. **"Add new section"** by choosing **"Contact form"**. 3. Click **"Add" **and start editing your contact form. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/131313-screen-shot-2020-05-08-_18h96d8.png) Click **"Add new section"** Next **"Text columns with images"**, edit columns, add texts and images. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/14141414-screen-shot-2020-05-0_1jj15ok.png) Click **"Add new section"** Next **"Custom" **and customize your content: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/151515-screen-shot-2020-05-08-_1thz78s.png) You can customize your content in HTML: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/16161616-screen-shot-2020-05-0_niyaug.png) 4. Next **"Richtext"**click **"Add"** Add page title and text, you can also add content in HTML. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/191919191-screen-shot-2020-05-_tmlfiz.png) 5. Next **"Image with text"** click **"Add"** Modify text, button, add pictures. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/screen-shot-2020-05-08-at-1245_1vchaha.png) 6. Next **"Collection list"** click **"Add"** Add your product collections: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/14141414-screen-shot-2020-05-0_2qxgg7.png) When you click on **"Collection"** tab it gives you an option **"Add collection"**: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/171717-screen-shot-2020-05-08-_15j2t46.png) This opens up **"Collection"** tab under **"Product Management"**. You can add collections, for example, jeans, shoes, jackets etc. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/343434-screen-shot-2020-05-08-_ot1iym.png) You can add Collection Name, Handle, Collection Description, Image. After this click **"Add Collection"** ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/353535-screen-shot-2020-05-08-_17knbeb.png) 7. Next **"Testimonials"** and click **"Add"** and add you testimonials. ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/81818181-screen-shot-2020-05-0_l8aq51.png) 8. Next **"Image Gallery" **and click **"Add" **and add your images: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/191919191-screen-shot-2020-05-_5tx61m.png) 9. Next **"Newsletter"** and click **"Add"** and add your images: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/2020-screen-shot-2020-05-08-at_vulc9a.png) ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/2021-screen-shot-2020-05-08-at_t4mdye.png) 10. Next **"Collection"** and click **"Add"** and add your featured products: ![](https://storage.crisp.chat/users/helpdesk/website/d70911b005775800/232323-screen-shot-2020-05-08-_1rjtb31.png)