Documentation

Customizing Themes

When you’ve set up your social networking site, there are many ways you can customize it to enhance its online appeal and provide for a more satisfying visitor experience. Depending on the services you offer, you might also want to add functionality or special information in some parts of your site.

Customizing your site lets you add functionality or change your site's appearance without switching themes.

1. Customization overview

To make any customization to your site, you need to modify your theme. You can do this from your Themes page.

It’s easy to completely change the look of your online site by publishing a different theme — but you can also keep your current theme and just make changes to certain areas. These changes are called customizations.

You can customize your theme in either of two ways:

  • by making changes on the Theme Settings (for beginners)
  • by editing the theme's code using the Template Editor (for designers)

2. How themes work

Your theme is a collection of files that control the layout of your website. Each individual file has the extension .liquid and is known as a Liquid template because it contains code written in the Liquid templating language. In addition to Liquid code, you can use other languages in a Liquid template, including HTML, CSS, and JavaScript.

Themes in your site can be installed or published.

  • When a theme is installed, it means that your site has the theme's files and the theme can be published at any time.
  • When a theme is published, it means that your site is using that theme's files to create your website. You can only have one published theme at a time.

To see the themes that are installed in your site, visit your Socibd admin > Themes Manager > Themes.

Themes

The Themes page shows the themes that are installed in your site. Your published theme appears at the top of the list with a preview of how your website currently looks.

If there is only one theme on your Themes page, then your published theme is the only theme that you have installed for your site. You can get more themes in the Socibd Theme Store.

From the Themes page, there are two ways to inspect your theme. You can:

  • View the Theme Settings page
  • View the Template Editor page

3. View the Theme Settings page

The Customize theme page lets you view and change the built-in settings of your theme.

1). From your Socibd admin, click Themes Manager, then click Themes

click Themes

2). Click the Theme Settings button for the theme that you want to customize:

Click the Theme Settings button

You can make many changes from the Theme Settings page. The page shows a preview of the theme and categories of settings that you can change:

Theme Settings page

4. View the Template Editor page

The Edit HTML/CSS page lets you change the .liquid files that make up your theme.

1). From your Socibd admin, click Themes Manager, then click Themes

click Themes

2). Click the Template Editor button, then click Edit HTML/CSS.

Template Editor button

On the Template Editor page, you can edit these files and add others. The page shows a list of theme files and a space for editing them:

Template Editor page

When you click a file in the list, it opens in the editor panel. You can open and work on multiple files at once.

Themes have several file categories:

  • Layouts
    These files control the overall layout of your theme.
  • Templates
    These files control layouts for specific parts of your theme such as product or blog pages.
  • Snippets
    These files contain chunks of code that are used by other files in your theme.
  • Assets
    These files are images, fonts, scripts, and stylesheets.
  • Configs
    These files contain settings and configuration data for your theme.

5. Making backups

When you're ready to try some customizations, the first thing you should do is make a duplicate copy of your theme. Use the duplicate copy as your working version until you're ready to publish it.

theme duplicate