How do I update the customization panel?

DS gives theme developers the ability to add custom setings to the 'Site Design > Customize' panel, specfic to the theme they are building.  These settings can be:

Text - A simple text field for short text input.

Big Text - A large text area for large, raw text input.

HTML - A large text area for large, formatted HTML input (with a WYSIWYG editor).

Image - An image selection field.  This will prompt the user to choose an image from their online image library, with the choice to upload a new file.

Color - A HEX color value with a color picker.

Link - An auto-completing text field containing a list of all available URLs within DS including pages, categories, products, etc.  You can also enter an external URL manually.

Adding a customization field

NOTE: This requires the permission 'Site Design > Can manage theme & templates'.  Please check with your site's administrator to be sure this permission is set for your user.

  1. From the left menu, select 'Site Design > Customize'.
  2. Click the 'Gear' icon in the top right corner and select 'Add Customization Option'.



  3. Setup the custom field according to your preferences.

    Name - This is both the label the end user will see AND the name you will use to reference this setting.  For example, if you name it "Background Color", you will reference it in your CSS and HTML as "Background Color".  It might make sense to be more specific.  For example: "Mobile Menu Header Background Color". 

    Type - The type of customization field, as documented above.

    Category - Customization fields are broken up into Categories in order to help the end user manage their settings.  This value determines under which Category this customization will display.

    Hint - You can provide a simple hint to help the end user understand how to use this setting.

  4.  Click Save.

Editting or Deleting a Customization Field

  1. From the left menu, select 'Site Design > Customize'.
  2. Scroll to the customization field you want to edit and click the Pencil Icon.

     

  3. Make your changes, then click the 'Save' or 'Delete' button. 

Using a customization setting in Site Design > Advanced > site.css

Simply use the setting() function to reference your customization variable in css.  For example:

$headerBGColor = setting('Header Background Color');
.header { background-color:$headerBGColor; }

Using a customization setting in Site Design > Advanced > HTML Templates & Layouts

Simply use the setting function to reference your customization variable in HTML.  For example:

<ul class="footer">
<li>{{ setting('Footer 501C Registration Number') }}</li>
<li>{{ setting('Footer Mailing Address') }}</li>
</ul>

Using a customization setting in Website Content > Pages & Menus

You can refer to any setting shortcode to reference your customization variable in any Page.  For example: 

[setting name="Call to Action Button"]

Using a customization setting in JS

There is no way to refer to a customization setting directly in your JavaScipt.  You need to access customization variables through your HTML elements.  For example:

In HTML:

<div id="footer-501c-registration-number">{{ setting('Footer 501C Registration Number') }}</div>

Then, in JS (using jQuery):

var footer501cNumber = $('#footer-501c-registration-number').html();