Loading

Soma Documentation

How to setup theme and How to use 1 click demo import [For Free Version]

You can create your website like the preview demo in just few steps
Step 1) First of all install this theme by going to Appearance->Themes->Add New. Upload the zip or search in search bar and install it
Step 2) Install and activate all the recommended plugins
Step 3) After plugins install, there will be dialog box for woocommerce setup. Skip this setup as we are going to use the demo import setup here.
Step 4) Go to Appearance->Import Demo Data
Step 5) You need to manually upload 3 files ie one for XML content, second one for widgets and third one for customizer

You can choose from the 2 demos. You can find demo files here.

Demo Default
XML file
Widget file
Customizer file
Demo Shop
XML file
Widget file
Customizer file
Step 6) After selecting files. Click on Import Demo Data button
Step 7) After demo import finish. You need to generate woocommerce required pages.
Step 8) Go to Woocommerce->Status. There will be 3 tabs on top ie System Status, Tools and Logs
Step 9) Click on the Tools tab
Step 10) Find Install WooCommerce pages and click on Install Pages . That's it.

woocommerce-install-pages

Note : You need to change the URL of some of the menu items, as the imported menu will point to the demo site. You can change menus URL by going to Appearance->Menus
Note : For Shop Demo, You also need to change the Front page to Shop manually by going to Settings->Reading

How to setup theme and How to use 1 click demo import [For Pro Version]

You can create your website like the preview demo in just few steps
Step 1) First of all install this theme by going to Appearance->Themes->Add New. Upload the zip or search in search bar and install it
Step 2) Install and activate all the recommended plugins
Step 3) After plugins install, there will be dialog box for woocommerce setup. Skip this setup as we are going to use the demo import setup here.
Step 4) Go to Appearance->Import Demo Data
Step 5) Select the import options ie Default or Shop
Step 6) After demo import finish. You need to generate woocommerce required pages.
Step 7) Go to Woocommerce->Status. There will be 3 tabs on top ie System Status, Tools and Logs
Step 8) Click on the Tools tab
Step 9) Find Install WooCommerce pages and click on Install Pages . That's it.

woocommerce-install-pages

Note : You need to change the URL of some of the menu items, as the imported menu will point to the demo site. You can change menus URL by going to Appearance->Menus

Getting started with Soma (Manual)

Step 1) Create new pages from Pages menu and name it Home for home page and Blog for blog page
Step 2) Go to Settings->Reading menu and from Front page displays settings select A static page and then select Home as Front page and Blog as blog page
Step 3) Save it

How to change Logo

Step 1) Go to Appearance->Customize
Step 2) Click on Site Identity Tab.
Step 3) Upload a logo of your own.
Step 4) Save & Publish

How to Add Menu

Go to Menus from Appearance-> Menus.
Step 1) Create a new menu.
Step 2) Select pages from left and add it to menu
Step 3) After this Select Theme Locations Primary from bottom and click Save Menu

How can i change my header to shop header from default header

Step 1) Go to Appearance->Customize
Step 2) Click on Header Styles Tab.
Step 3) Select your header style
Step 4) Save & Publish

How to Add Home Section Background Image

Step 1) Click on Appearance -> Customize -> General Settings
Step 2) Scroll to Home Background Image
Step 3) Upload Image and save

How to add videos to homepage on button click

Step 1) Go to Appearance->Customize->General Settings
Step 2) On scroll down, you will see options to add 2 buttons.
Step 3) Add the url in Button URL if you want to add video on button click. For eg : https://www.youtube.com/watch?v=VZ9MBYfu_0A
Step 4) Click Save & Publish

How to add parallax to home background image

Step 1) Go to Appearance -> Customize -> General Settings
Step 2) At bottom, you will see Enable Parallax scroll
Step 3) Click on Yes
Step 4) Save & Publish

How to add Services icon box

Step 1) Go to your page and click on Page Builder Tab
Step 2) You need to Add a row to page Builder section
Step 3) Set row layout to 2,3,4 of your choice if you want 2,3,4 icons respectively
Step 4) Change the properties of row if needed
Step 5) Click on Add Widget and select Soma: Single Service Icon Widget
Step 6) Enter the details and then save

For Linear icons find icons from here
Linear Icons

For Font Awesome icons find icons from here
Font Awesome Icons

Note: You might need to set row gutter value to 0 if the columns were not proportionate. You can set gutter value by clicking on Edit Row settings and then under the layout tab of Row Styles section. gutter-value

How to add client images section

Step 1) Go to your page and click on Page Builder Tab
Step 2) You need to Add a row to page Builder section
Step 3) Set row layout to 4,6,8 of your choice if you want 4,6,8 images respectively
Step 4) Change the properties of row if needed
Step 5) Click on Add Widget and select Soma: Single Client Image Widget to each columns created
Step 6) upload image and then save
Note: You might need to set row gutter value to 0 if the columns were not proportionate. You can set gutter value by clicking on Edit Row settings and then under the layout tab of Row Styles section. gutter-value

Types of widgets and their usage [Free Version]

Soma has 5 custom widgets in free version that you can use in the Site Origin Page Builder.

1) Soma: Single Service Icon Widget
This widget is used to add a single service icon with service heading and small description.

2) Soma: Single Team Member Widget
This widget is used to display a single team member with its image, name and its social links

3) Soma: Blog Section
This widget will display latest 3 blog posts

4) Soma: Call to Action Widget
This will display call to action section

Footer Widgets

1) Soma: Blog Footer Widget
Displays blog posts in footer

Types of widgets and their usage [Pro Version]

Soma has more than 17 custom widgets that you can use in the Site Origin Page Builder.

1) Soma: Heading SubHeading Widget
This widget is used to add Headings and subheading in a section.

2) Soma: Single Service Icon Widget
This widget is used to add a single service icon with service heading and small description.

3) Soma: Single Team Member Widget
This widget is used to display a single team member with its image, name and its social links

4) Soma: Blog Section
This widget will display latest 3 blog posts

5) Soma: Call to Action Widget
This will display call to action section

6) Soma: Contact Us Widget
This widget displays the contact information plus contact form

7) Soma: Counters Section
This widget display the 4 counters for statistics

8) Soma: Image and Text Widget
Displays image and text on 2 columns

9) Soma: Single Client Image Widget
Display a single client section logo to showcase your client's

10) Soma: Testimonial Widget
This widget displays testimonial section

11) Soma: Text Widget
This widget only displays text

12) Soma: Portfolio Widget
This widget displays portfolio items

13) Soma: Woocommerce Categories Section
This widget displays woocommerce categories with category image

14) Soma: Woocommerce Call To Action Widget
This widget displays woocommerce Call to Action Section

15) Soma: Woocommerce Single Icon Widget
This widget displays woocommerce icon box

Footer Widgets

1) Soma: Blog Footer Widget
Displays blog posts in footer

2) Soma: Contact Footer Widget
Displays contact information plus social icons in footer

How to add Mobile Menu and sticky header settings

Step1) Go to Appearance->Customize
Step 2) Click on Sticky Header & Logo Settings Tab
Step 3) Change your settings
Step 4) Save & Publish

How to add contact form

Step 1) Click on Contact -> Add New
Step 2) Create your new form or you can use our form
Step 3) Copy the shortcode
Step 4) Open your page
Step 5) Add this Soma: Contact Us Widget and paste this shortcode in the shortcode field
Step 6) Save

How to add footer social icons

You can add social icons by adding footer widget Soma: Contact Footer Widget in footer columns

How to add or change Google fonts

Step 1) Click on Appearance -> Customize -> Fonts Settings
Step 2) From here you can change Body fonts, Headings fonts, Body font size and headings font size
Step 3) To Add fonts simply go to
Google Fonts
Step 4) Select a font from there for eg Roboto



google-fonts


Step 5) Now copy the family part eg. Roboto:300,400,500,700 and paste in the Font Name for eg Body Font Name or Headings Font Name
Step 6) Copy the CSS rules under Specify in CSS and paste in Font Family (Body Font Family or Headings Font Family)
For eg Roboto, sans-serif
Note: Do not include the quote and semicolon while copying it
Step 7) Save & Publish

How to add a preloader for my site

Step 1) Click on Appearance -> Customize -> Preloader Settings
Step 2) Choose your settings
Step 3) You can also upload a preloader GIF image.
Step 4) Save & Publish

How to add footer copyrights text

Step 1) Click on Appearance -> Customize -> Footer Settings
Step 2) Scroll down to Footer copyrights text
Step 3) Enter your content
Step 4) Save & Publish

How to add small description under page title

Step 1) Go to Pages menu and click on your page for eg Home
Step 2) At the bottom you will see a section of Custom Fields
Step 3) Click on Enter New link
Step 4) Under Name textbox enter page_description
Step 5) Write your description text in Value textbox
Step 6) After this click on Add Custom Field button
Step 7) Update Page

Note: If you don't see the Custom Fields Section then you need to go to the Screen Options at the Top Right of the page. From Screen Option section you can enable Custom Fields in your page.

How to add Google Map

Step 1) Click on Maps below the Settings Menu
Step 2) Plugin will ask you to enter the Google map API key and also will tell you how you can get that API key
Step 3) After this, click on the existing map entry ie My first map
Step 4) Set the map options here.
Step 5) Copy the shortcode generate. For eg [wpgmza id="1"]
Step 6) Next open your page and paste this shortcode inside a text widget.