Soma Documentation

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

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

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

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

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

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

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

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 

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

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

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

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 

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 

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

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

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

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

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 

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

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.

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.

Need Quick Support ?

Create a new support ticket to get support from our developers