VOLT's Site Designer lets you build, design, and customize your site with pages and content blocks. You can easily modify an existing theme, swap themes or create your own from scratch. Use Site Designer to change colors and fonts, rearrange the layout of your home page, and even update header and footer links.
Here are some key terms that may help you understand how Site Designer works:
Theme- The theme is a set of pages with specific block arrangements. As the framework for a website's design elements, the theme defines the colors and fonts, spacing and positioning, and content types that are displayed in each area of the storefront for all device types. A theme is applied to every Volusion store by default. You can download additional themes from the Theme Store section of Site Designer. For more information on Themes, click HERE.
Page- A page can consist of a single block or multiple blocks and is used to show specific information, such as products, product details or other items defined by the user. For additional information on Pages, click HERE.
Block- A block is a customizable unit of content on a page that has both functionality and styling. Blocks can be used to build a highly customized storefront and can also pull data from external sources. For more information on blocks, click HERE.
Accessing Site Designer
Access Site Designer from your VOLT store's Dashboard by clicking the Site Designer icon in the navigation menu on the left side of the page.
Once you have accessed Site Designer, you have a few options.
Site Designer Options
A few important buttons are located at the top of the Site Designer page: Publish, Design Settings, Preview, and View Live Store.
The Publish button makes your changes live on the website. Changes made to layout, design and functionality are not live until this button has been clicked.
When you click Publish, you will see a pop-up message indicating that your changes have been saved you will be allowed to continue editing.
The Design Settings feature allows you to make changes to your theme's global settings. This includes colors, fonts and sizes, as well as components like buttons. Click the Design Settings button to open a navigation menu on the left side of the Site Designer page which can be used to make changes.
For detailed information on Design Settings, see Site Designer: Design Settings.
The preview button allows you to look at your work before you share it with the world. Clicking the button will open a new tab that displays your website, including any changes or edits you have made, without having to commit to publishing your changes.
View Live Store
The View Live Store button shows the live version of your site. It is similar to the Preview function, but shows actual URLs for your pages. Only published changes will be visible when viewing your live store.
Themes are a quick and easy way to create the desired look and feel of your site. From the Theme section of Site Designer you can view available themes, browse and add new themes and even create a custom theme. For more information on adding a theme, click HERE.
Specific pages can also be accessed from Site Designer. A list of the pages that are available to be edited and published is located on the dropdown menu at the top of the Site Designer page. You can also add a page from this menu. Pages added via the menu will appear as options in the dropdown after they are created.
Adding a Page
Click the page edit drop-down menu and choose Add a Page.
You can next add a Page Title and Page Path (your page's custom URL) as well as SEO information including Title and Description for you page to the Blank Page section on the left side of the Site Designer page. Click the Done button at the bottom of this section when you have all of your page information ready and your page will be created.
Editing the Master Template versus Editing a Block
When viewing a page in Site Designer you have the option of editing both the Master Template and an individual block.
Editing the Master Template
The Master Template includes things like the site's Header and Footer, which appear on all the pages within the site. Any sections featured on the Master Template will show a green Edit template button when you hover over them, which you can click to make any desired edits. The Edit Template button will be green.
Hover your mouse over a block to to make a white Edit button appear. Click the button to make changes to the block. The button for editing Blocks will be gray and say Edit.