There comes a time once in a great while when a new innovation is revealed and shared with the world. That time is now, for we are pleased to announce the new Live Design for versions 2015+!
Getting Started
If you're familiar with the previous Live Design, you'll see the same features with added functionality. Everything is accessible in one place, with the ability to toggle between mobile views without having to close or refresh.
You can toggle between the design and widget function.
With the Design tab selected you will see some familiar elements from the previous versions of Live Design. Features such as the global changing of colors, backgrounds and more depending on which page you've selected. In the example below we're on a content page.
Preview From Different Devices
You can even preview your store in different devices such as pc, tablet, and mobile view.
Here is the desktop view, as it will show a basic preview of your store as the customer will see it.
Tablet View: Click the tablet icon to view it as if it were on a tablet or e-Reader.
Mobile View: Select the mobile icon to view a longated perspective as if seeing it on a mobile device.
Changing Content On The Page
While in Design Mode, you can also change the text on the page you are currently viewing. Do this by locating the yellow highlighted section and click the pencil icon like so:
1. Switch to Design Mode.
2. Find the section you wish to change.
3. Click the pencil icon next to the text.
4. Simply type the new text you want to appear and hit the check mark box to save it. To cancel, click the X.
Here is another example. You can change some of the content of a page easier than ever before as well. Copy and pasting content allows you to see it on the page without having to navigate outside of Live Design is a major perk.
Switch Between Layouts
You can also at anytime on any page change the layout by clicking "Page Layouts"
On pages that have multiple layouts such as categories you will see a default and a preview flag.
The Default flag means that this is the current layout of the theme. When you see this, typically it applies to the original theme layout for this specific page. This is what the customer will see and it's on the live site.
Preview - simply a preview. This is not what the customers see until this is activated.
When you are ready to activate the layout, hit Save.
Widget View
When widget view is selected, you can see the borders and boundaries of each widget.
The classic edit widget, add new widget features are still available.
Actions & Advanced Settings
You will also notice these two buttons at the bottom.
Clicking the Actions side will trigger these familiar items:
Here's what each of these sections entail.
Clicking Advanced will show more features. Options such as head tags and other items you can change in common theme elements like so:
From here you can make changes to the theme colors, backgrounds, fonts, settings, and global theme settings.
You will see the changes you make to the theme as a live preview until you click Save.
You can also hit Cancel or Close at any time.
Uploading and Adding Images
You will see the icons under "Pattern/Texture". This allows you to choose from our large array of images, set the image to repeat vertically and/or horizontally, and be fixed in place. Or you can choose your own like so:
Changing Fonts
When navigating to Fonts, you will see the following:
From here you can choose the font size and specific fonts you wish to change.
To see more on how to add specific fonts such as Google fonts, check out our article here: Using Google Fonts.
Theme Settings
The Settings will show if applicable to the theme.
This is a quick reference to the advanced theme settings. To see your global theme settings such as logo, favicon, store name, and more click Global Theme Settings from the Show dropdown.
Previous Articles On Live Design:
How To Modify Homepage Content Using Live Design
How To Edit Your Store While Browsing Live Design Mode
Spark Pay online stores Theme Overview
How Do I Change A Color Or Style?
More Useful Help:
Spark Pay online stores Help Articles on Theme & Site Design
Spark Pay online stores Community
Tips and Tricks With CSS on w3schools.com
Tips and Tricks with HTML on w3schools.com