1. Support
Thank you so much for choosing Cherie WP Theme. We have put a lot of effort and love creating it. In this documentation, we have tried to consider all the important details to run your website successfully. In case you have any questions left, please feel free to submit a support ticket here.
Your feedback on our theme is much appreciated. We would love to make our product even better, so please feel free to get in touch with any suggestions for improvement. Thanks again for your support. We value you!
If you like our work, please rate it. If you are going to rate it with less than 5 stars, please let us know the reason first and we will do our best to improve the theme.
2. Theme Installation
After you’ve installed WordPress on your hosting, download the archive with the purchased theme, unzip it and prepare cherie.zip and child-child.zip archives. Open your WordPress dashboard.
Go to Appearance > Themes and click on Add New.
Click on Choose File and select the cherie-child.zip. Click Install Now.
You will see the success message ‘Theme has been installed successfully’, click on the Return to Themes page and do the same for cherie.zip.
You will see your new cherie theme and child theme appear in the dashboard. Press the Activate button on your cherie-child theme, you will work with the cherie-child theme and do not activate your cherie theme.
After activation you will be redirected to the ‘Welcome’ page of the theme. Now you need to install all the plugins used in the theme: click on the Install Theme Plugin button.
Select all plugins in the list, choose Select from the dropdown menu and click on the Apply button. Installation process will begin, it might take a couple of minutes, please wait until it's finished.
Once the installation process is finished, you will see a success message ‘All plugins installed and activated successfully’. Click on the Return to the Dashboard action link.
From your admin panel go to Cherie > Demo Install.
You should choose the demo you want to import and use for your theme and click on the Import button.
Demo import can take up to 10 minutes, please wait until it's finished. You will see the success message after the demo is installed successfully.
On the top bar, hover on the ‘home’ icon and select ‘Visit site’ you will see that the demo has been installed.
You may notice that on the homepage instagram widget is not working and that is because you need to add your instagram account in the admin panel. For more details, please see the Instagram section of the documentation.
There also will be a ‘Hello World’ blog post added to your blog. It is blank by default and you can delete it or edit and add the content.
To set up the footer and make it look as it was in the demo preview, go to your Admin Panel > Appearance > Widgets
Delete everything shown on the screenshot below:
The footer on all your pages looks like in demo preview now.
Before:
After:
3. Theme Customization
In your admin panel hover on the home icon and select Visit Site.
On top on the page click on Customize and you will see Customization Panel.
In the Customization Panel you can find settings that will be applied to the entire theme.
Once you have applied any changes you have to click on the Publish button to apply those changes.
3.1 Logo
Go to Customize > General. Here you can upload your logo. We suggest uploading a dark and a light version of your logo. The size of our logo is 115px x 28px.
3.2 Favicon
Go to Customize > General. In this section you can upload a site icon that will appear in the browser tab.
3.3 Button Style
Go to Customize > Button Style. You can change button colors and button text colors in this section.
3.4 Main Theme Colors
Go to Customize > Theme Style. In this section you can change main theme colors.
3.5 Typography
Go to Customize > Typography. In this section you can change fonts and their settings: size, line height, letter spacing, align. From the Font Family dropdown you can select any Google font you like.
3.6 Social Media
Go to Customize > Social Icons. In this section you can set links to your Facebook and Instagram accounts for the social media icons in the header and footer.
3.7 Global Theme Icons
Go to Customize > Global Icons. In this section you can change global theme icons, such as: icons in the subscription form, icons on the shop, etc.
3.8 Header Types
Go to Customize > Header Type. In this section you can change the header of your theme. Just select the option you like more. You can also add a color for the header background.
You can also choose light or dark theme for your header for each particular page depending on the background you use. On a page click Edit. The page will be opened in the edit mode.
On the bottom of the page you will be able to choose Header Type Color: light or dark.
3.9 Blog Catalogue Types
Go to Customize > Blog Archive Type. In this section you can choose the Blog Catalogue page layout. There are two different types, just pick the one you like more.
Default Blog Archive type has a featured post on top of the screen on the colored background.
Sticky Blog Archive type has a sticky blog post on the right part of the screen.
3.10 Shop Catalogue Types
Go to Customize > Shop Archive Type. In this section you can choose the Shop Catalogue page layout. There are two different types, just pick the one you like more.
Courses & Career Popup Settings
Go to Customize > Courses & Career Popup Setting. In this section you can apply global settings for all popups on the Courses and Career pages. Fill in the Title, Description and Shortcode for the popup form that you want to display on these pages. Where to find popup shortcodes, please see ‘Popup Setting & Shortcodes’ in the documentation.
3.11 Second Header: Button Settings
Go to Customize > Header Settings > Second Header. In this section you can apply settings for the button on the second header type. You can change the button text and add a custom link to the Button simple link field that will be opened once the button is clicked.
There is also an option to open popup on the button click. You will need to leave the Button simple link field blank and to fill in: Popup title, Popup description if needed and Popup Shortcode. Where to find popup shortcodes, please see ‘Popup Setting & Shortcodes’ in the documentation.
3.15 Homepage Settings
Go to Customize > Homepage Settings. In this section you can select the page you’d like to be your homepage.
3.16 WooCommerce
Go to Customize > WooCommerce. In this section you can apply some settings to the WooCommerce functionality: add a store notice, change product catalogue settings, product images and checkout.
Go to your admin panel and select WooCommerce > Settings. In this section you can set up your online store: select/change currency, select payment methods and delivery methods, etc.
3.17 WooCommerce Stripe Gateway
The theme is compatible with the WooCommerce Stripe Gateway. To use Stripe for payments you need to download the WooCommerce Stripe Gateway plugin. Open your Admin Panel and go to Plugins > Add New. Type the name of the plugin in to the search field: WooCommerce Stripe Gateway and click on Install Now button to install the plugin.
Activate the plugin by clicking on the Activate button. In this section you can set up your online store: select/change currency, select payment methods and delivery methods, etc.
Go to the WooCommerce > Settings > Payments. Here you can enable Stripe payments and click on the Manage button to connect your Stripe account.
Your can double check that Stripe is enabled and connect your account by entering Publishable and Secret Keys. You can switch to the test mode first to check if everything is working just as you want.
4. Popup Settings & Shortcodes
To find the shortcode of the popup go to the admin panel of your there. From the left menu choose Contact > Contact Forms.
You will see the list of your contact forms and you can copy the shortcode of each popup from this page.
5. Posts
Go to your admin panel and click on Posts > All Posts. Here you will see the list of all blog posts. To add a new post simply click on the Add New button on top of the screen.
You can choose from two types of the Blog Catalogue page, you can find detailed information in the ‘Blog Catalogue Types’ section of this documentation.
To set up a Sticky post or any other blog post, hover on its name and click on the Edit action link.
For each post you will need to upload a preview image, it will appear on the blog catalogue page. Suggested size of the image is 526px * 700px.
For the sticky post you will also need to add an image that will appear on top of the catalogue page or on the right side of the catalogue page. Suggested image size is 1110px*1110px.
After the changes are applied, click on the Update button on the top right corner of the screen to save and apply all changes.
6. Products
Go to your admin panel and click on Products > All Products. Here you will see the list of all products available in the theme shop. To add a new product simply click on the Products > Add New.
To edit an existing product, hover on its name and click on the Edit action link.
To edit an existing product, hover on its name and click on the Edit action link. For each product you should add its name, description, price, you can also add product categories and tags.
Don’t forget to add product image and images to the product gallery, suggested image size is 1052 by 1400px.
7. Gift Cards
You can add an Electronic Gift card to your products and clients will be able to buy a gift card and send it via email to the recipient.
To add an Electronic Gift card to your products go to Products > Add New. Change Product Data - Simple product to PW Gift Card.
Add all other needed information as for the regular product item.
8. Pages
Go to your admin panel and click on Pages > All Pages. Here you will see the list of all pages in your theme. To add a new page simply click on the Pages > Add New.
To edit an existing page hover on its name and click on the Edit action link. The majority of the pages are created using Elementor page builder. For such pages you should select Edit with Elementor option.
8.1 Homepage
To edit the homepage you have to find it in the pages list, hover on it and click on Edit with Elementor. To change the hero image, click on the Edit icon on the top right corner of your screen.
Select the Style tab in the settings panel on the left of the screen and upload your image to the Choose Image section.
Click on the Select Files button and upload your image. Click on the Insert Media at the bottom of your screen.
To add a video background click on the Edit Section option, select Style in the left side panel and paste the link to your video. We suggest to upload a video that you'll use as a backgroung on your server.
After uploading the image or making any other changes, don’t forget to click on the Update button to save the changes.
To edit the Title and Buttons, click on the Content tab in the settings panel. Expand the block you want to edit and apply changes.
Almost each button in the theme has a variety of settings:
- You can change the text on the button.
- There is an option to show a Boxzilla popup which will be opened on a button click. In this case you need to add a shortcode to the input field Boxzilla ID.
- You can select a specific page in the Page Link section and it will be opened on a button click.
- Another option is to show one of two default popups on button click. Add popup image, title, description and popup shortcode. Please see Popup Settings & Shortcodes for more info about shortcodes.
In case if you added a custom link, click on the settings icon on the right of the input field and uncheck the checkbox near Open in New Window.
Once you’ve decided what option to show on the button click, you need to select the corresponding option in the Usage section.
To edit any other section on the page, click on the Edit icon on the left of the section and make changes in the left side panel. Click on the Update button on the bottom of the screen to save the changes.
8.3 Wedding
To edit the Wedding page you have to find it in the pages list, hover on it and click on Edit with Elementor.
In order to edit any section on the page click on the Edt icon on the top right corner of the page. On the left side panel you will be able to edit all needed information.
8.4 Contact
To edit the Contact page you have to find it in the pages list, hover on it and click on Edit with Elementor. There are four Contact pages and you can select any of them for your theme: two options for a single address and two options for multiple addresses.
Contact pages are created using Elementor page builder, so all the blocks are editable as usual.
To add your own map from mapbox or Google to the page, click on the Edit icon on the top right corner of the screen, select Style tab. You have to provide Adress to use Google maps or an Access token and Mapbox Style link to use mapbox. For more information about mapbox, how to add a marker on the map and where to find Access token and Mapbox Style link, please see section ‘12. Map’ of this documentation.
8.5 Gift Cards
To edit the Gift card page you have to find it in the pages list, hover on it and click on Edit with Elementor. There are two different layouts of the Gift Card page and you can select the one you like more to use in your theme.
By default you will see two types of the gift cards in the theme: physical and electronic. A Physical Gift Card was created as a regular product and an Electronic Gift Card is created as a specific type of the product ‘Gift Card’. Please see the ‘6. Products’ section of this documentation for more information. Before setting up this page, please make sure there are Gift Cards products in the shop.
In order to redirect clients to the Electronic Gift Card product page, once the Shop Now button is clicked, click on the Edit icon on the button block. You will see settings on the left side panel.
Scroll to the very bottom on the left side panel until you see the Gift Card title. In the Gift Cart Title input field you should type in the name of your Electronic Gift Card product, the name should be the same as on its product page. In the Usage section select the ‘Gift Cart’ option. Click on the Update button to save the changes.
8.6 Coming Soon
The page Coming Soon was added to the theme in one of our recent updates. If you've imported the demo before that update, you'll need to create this page manually. It's very simple, just follow the steps below. Go to your admin panel and click on the Pages > Add New.
Select Elementro Page template and click on the Edit with Elementor.
Click on the Add New Section icon and select the first structure option:
Click on the edit section icon and add background:
Add spacing by inserting the widget called Spacer:
Click on the Edit Column and choose Horizontal Align: Center.
Add widget called Heading and align it to the center.
Add widget called Heading and align it to the center.
Add widget called Text Editor and align it to the center. Add padding to the top and bottom of the widget.
Set Positioning: Custom and set custom width for the text area.
Add widget called Countdown and choose your planned website launch date.
Add widget called Shortcode to add the subscribtion form and paste the shortcode of the form. Adjust positioning.
Save the changes and check your page. Adjust paddings between widgets if needed.
9. Button Settings
Almost each button in the theme has a variety of settings:
- You can change the text on the button.
- There is an option to show a Boxzilla popup which will be opened on a button click. In this case you need to add a shortcode to the input field Boxzilla ID.
- You can select a specific page in the Page Link section and the selected page will be opened on a button click.
- Another option is to show one of two default popups on a button click. Add popup image, title, description and popup shortcode. Please see Popup Settings & Shortcodes for more info about shortcodes.
In case if you’ve added a custom link, click on the settings icon on the right of the input field and check or uncheck the checkbox near Open in New Window.
Once you’ve decided what option to show on the button click, you need to select the corresponding option in the Usage section.
10. Mailchimp for WordPress Plugin
First of all, you have to install Mailchimp for WordPress plugin. The author is ibericode. If you have followed our instructions on how to install the theme, all the plugins including this one should have been already installed and activated. Cherie theme is developed using this plugin, however, if you want to use another one, it is fine.
Go to the Admin panel > MC4WP > Mailchimp and provide your API key. If you do everything right, you will see status Connected.
In case if you want to change the appearance of the subscription form, go to Admin panel > MC4WP > Form and change html code.
The form shortcode can be found right underneath the Form code field.
11. Instagram Feed Plugin
First of all, you have to install the Instagram Feed plugin. The author is Smash Balloon. You do not need a Pro Account to use our layouts for instagram, everything should work just out of the box. If you have followed our instructions on how to install the theme, all the plugins including this one should have been already installed and activated.
In a separate tab open instagram.com and log in to the account you would like to link.
Go to the Admin panel > Instagram Feed > Settings. Click on the Connect an Instagram Account button.
Select account type you would like to connect and press Connect.
You will see a confirmation popup, click Continue.
Confirm the account you would like to link by clicking on Connect This Account.
You will see a success message ‘Successfully connected’ and username of the account you’ve just connected to your theme. To save these settings click on the Save Changes. All done, go check the homepage and instagram section on it.
If your instagram looks differently, please go to Instagram Feed > Settings > Customize.
Scroll down and make sure that Enable Custom Templates checkbox is cheсked.
And also make sure that the correct shortcode is set on the homepage. Open your homepage in the Elementor editor, scroll down to the Instagram section and Click on the Edit icon. Make sure that in the left side panel there is a correct shortcode.
7 photos layout [instagram-feed showbutton=false showheader=false num=7 showfollow=false imageres=true]
10 photos layout [instagram-feed showbutton=false showheader=false num=10 showfollow=false imageres=true1]
12. Map
We care about our clients and use Mapbox maps in our theme because we think it is the best solution on the market for small and medium businesses. It is very easy to customize and mapbox provides a meaningful free tier. Websites with monthly loads up to 50,000 will be able to use mapbox for free unlike Google Maps which are significantly more expensive.
To start setting up your maps you will need to create an account on https://www.mapbox.com/. Open the link and click on Sign Up.
Click on Sign up for Mapbox. Fill in all required fields and press on the Get Started Button.
On your account screen click on Design in Mapbox Studio.
Click on the New Style button.
In the popup choose: Monochrome style and click on Customize Monochrome button. You will see a map and on the left of the screen there is a setting panel. On the bottom of this panel there is a tab Colors and a colored rectangle, click on it to change the main color of your map.
Change default color to the one you need for your theme. We suggest using the following colors:
Beauty Salon Demo #F6EBE7
Nail Salon Demo #F2EEE9
Spa Salon Demo #E5EEF0
Hair Salon Demo #F5E1D3
After a new color scheme has been applied you will need to add marker(s) on your map. Please follow the tutorial on youtube created by mapbox team.
Instead of the marker icon used in the tutorial, we suggest using the icon we designed specially for this theme. Please download it here.
In case if you find it difficult to create a geojason file and follow further instructions on video tutorial, we tried to make it even simplier. Download geojason file here. Open it in any text editor, you will see that it contains geographical data: longitude and latitude. You need to edit those coordinates: paste coordinates of the location you need to see on the map. First number in the file stands for longitude, the second one — for latitude. You can quickly find geographic coordinates on Google map by right click on the pin. Here is how the geojason file looks like on text editor.
Now you have geojason file with your location coordinates, your map opened in browser. Next step is to open in a new tab mapbox datasets https://studio.mapbox.com/datasets. Click on the button New Dataset, choose Upload tab and drag and drop here your geojason file. Click on Confirm, Create and then on Start Editing button. Please see screenshots for reference:
You will see a map with location point on it, click on the point. See the screenshot below for reference:
Select tab Geojason and you will see a code with geographic coordinates: longitude and latitude, the pin with those coordinates will be shown on your map. Please see screenshot for the reference:
Click on the Save button on top right corner of the screen (only in case youve changed something). Then you need to export your dataset into a tileset, click on the Export button. Please see screenshot for the reference:
Next step is to copy the link to the tileset you've just created, click on the icon shown below:
Go back to your map, select Layers tab and click on the plus icon Add New Layer.
Click on the None Selected under the Source title, paste in the search field link you've copied and you will see the dataset you've just created, click on it.
If you cannot see the dot on the map, click on the Go to Data button on the bottom right corner of the screen:
Now we'll add the location icon to your point on the map. Select type Symbol, to do that choose option shown on the screenshot:
Select tab Style and click on the Manage icons in your spritesheet.
Download the icon we designed specially for this theme here and upload it to your map.
Enter the name of the icon in the search field and select the icon by clicking on it. After this you'll see your icon on the map. Click on the Publish button on the top right corner of the screen.
Your map is ready! Click on the Style on top left corner of your screen.
To add the map you’ve just created to the Contact page you will need map Style URL and Access Token. Click on the Share icon near your map.
You will see a popup where you can find Style URL and Access token. Paste these links to the corresponding fields in the Elementor builder for Contact page. That's it! You are done, check your map on the Contact page.
13. Amelia Plugin
Cherie theme is compatible and comes with Amelia: Appointments and Events WordPress Booking Plugin. You can use the full functionality of the plugin with the theme. If you’ve received an alert about a plugin that needs to be updated, this could be because the plugin was recently updated. Unless you have purchased the plugin separately, we will provide the latest version of the plugin with the next theme update.
You can find all information about functionality and documentation of Amelia plugin on wpamelia.com.
Note If you need a service for installing, configuring, or maintaining Amelia plugin, or access to auto-updates or support, you will need to purchase the license separately, directly from plugin authors website and submit a ticket to Amelia’s support.
Amelia plugin can only be used with the theme it cames with (it cannot be extracted or used with other themes)
In order to change the settings of the plugin, go to your admin panel and select Amelia. Here you can find all the settings for the Amelia plugin. Learn more about Amelia plugin settings in the documentation.
In order to style your appointment booking calendar, go to your admin panel, select Amelia > Customize > Step-by-Step Booking Form and change the colors. If you want to use the same colors as in the demo, follow next. On the right panel in Settings go to Global Settings > Colors.
For Beauty Salon Demo:
Primary and state colors Primary Color: rgba(0, 0, 0, 1)
Sidebar Background Color: rgba(246, 235, 231, 100) Text Color: rgba(0, 0, 0, 1)
Calendar Init Cell: rgba(0, 0, 0, 1) Init Cell Text: rgba(0, 0, 0, 1) Cell Selected Background: rgba(0, 0, 0, 1)
Buttons Primary Button Background Color: rgba(0, 0, 0, 1) Primary Button Text Color: rgba(255, 255, 255, 1)
For Spa Salon Demo:
Primary and state colors Primary Color: rgba(0, 0, 0, 1)
Sidebar Background Color: rgba(230, 239, 240, 100) Text Color: rgba(0, 0, 0, 1)
Calendar Init Cell: rgba(0, 0, 0, 1) Init Cell Text: rgba(0, 0, 0, 1) Cell Selected Background: rgba(0, 0, 0, 1)
Buttons Primary Button Background Color: rgba(0, 0, 0, 1) Primary Button Text Color: rgba(255, 255, 255, 1)
For Nail Salon Demo:
Primary and state colors Primary Color: rgba(0, 0, 0, 1)
Sidebar Background Color: rgba(245, 225, 211, 100) Text Color: rgba(0, 0, 0, 1)
Calendar Init Cell: rgba(0, 0, 0, 1) Init Cell Text: rgba(0, 0, 0, 1) Cell Selected Background: rgba(0, 0, 0, 1)
Buttons Primary Button Background Color: rgba(0, 0, 0, 1) Primary Button Text Color: rgba(255, 255, 255, 1)
For Hair Salon Demo:
Primary and state colors Primary Color: rgba(0, 0, 0, 1)
Sidebar Background Color: rgba(241, 238, 232, 100) Text Color: rgba(0, 0, 0, 1)
Calendar Init Cell: rgba(0, 0, 0, 1) Init Cell Text: rgba(0, 0, 0, 1) Cell Selected Background: rgba(0, 0, 0, 1)
Buttons Primary Button Background Color: rgba(0, 0, 0, 1) Primary Button Text Color: rgba(255, 255, 255, 1)
You can add Amelia plugin with a shortcode. Learn more about all possible shortcodes wpamelia.com/amelia-shortcodes.
Or use one of default Amelia widgets or custom Amelia Booking widget for Elementor.
14. BookMe Plugin
Cherie theme tested with BookMe plugin, plugin with the license should be purchased and integrated separately by yourself. You can learn more about the plugin and purchase it here. We suggest you learn more about it's functionality before the purchase. After you purchased the plugin, install it and activate, enter your purchase code in the plugins settings.
In order to change the settings of the plugin, go to your admin panel and select Bookme. Here you can find all the settings for the Bookme plugin..
In order to style your appointment booking calendar, go to your admin panel, select Bookme > Appearance and change the primary color. We suggest to change default colors to the following:
Beauty & Nail Salon Demo
color #F4B29A
Spa Salon Demo
color #A3D0DA
Hair Salon Demo
color #B2ABA3
15. Booked Plugin
Cherie theme tested with Booked plugin, plugin with the license should be purchased and integrated separately by yourself. You can learn more about the plugin and purchase it here. We suggest you learn more about it's functionality before the purchase, you can find all info here. After you purchased the plugin, install it and activate.
In order to change default settings of the plugin, go to Appointments > Settings. Here you can find all the settings for the Booked plugin. Please find detailed documentation on this plugin here.
On the bottom of the screen you will find the color setting for the booking calder which is shown on the Appointments page of your theme. We suggest to change default colors to the following:
Beauty & Nail Salon Demo
light color #f4d8cd
dark color #f4b29a
primary button color #000000
Spa Salon Demo
light color #52adbd
dark color #297f8e
primary button color ##93bed3
Hair Salon Demo
light color #cdc9c5
dark color #b8b4b0
primary button color #000000
To create a calendar like one in our demo, you have to go to the Appointments > Calendars > Add New Custom Calendar.
After that add appointments for the calendar you've just created.
Copy your calendar's shortcode and paste it to your elementor page.
16. Contact Form 7
For the detailed information about the Contact Form 7 plugin, please read the official guide here.
17. Multilingual Settings
18. WordPress
Since WordPress is constantly being updated information about how to install WordPress may become out of date, so you can always read the official guide here.
Here you can find some useful links about the WordPress:
WordPress Codex – general info about WordPress and how to install it on your server.
First Steps With WordPress – general information that covers a wide variety of topics.
FAQ New To WordPress – the most popular FAQ’s regarding WordPress.
19. GDPR
We suggest using Complianz – GDPR/CCPA Cookie Consent plugin. Complianz is a GDPR/CCPA Cookie Consent plugin that supports GDPR, DSGVO, CCPA and PIPEDA with a conditional Cookie Notice and customized Cookie Policy based on the results of the built-in Cookie Scan.
20. Cherie Core Plugin Update
Cherie Core plugin contains important functionality of the theme. We update is regulary on our side. To update the Cherie Core plugin for your website, please follow the instructions below. We suggest to make a backup before any theme or plugin update. In your admin panel open Plugins page and deactivate Cherie Core plugin.
Delete Cherie Core plugin by clicking on th Delete action link.
You will see a notification message on top of your screen saying that Cherie Core pugin s required. Click on the Manage Plugins button.
YInstall Cherie Core plugin back, the latest version of this plugin will be automatically installed.