Getting Started

In order to download the theme or get support from team, you need to make a purchase through Gumroad. If you have already purchased the theme by other methods or you want to ask something before making a purchase, please contact our core developer Armaan through Telegram or you can email through contact@fineshopdesign.com.

Table of Contents

Good to know

Before jumping into Theme Installation guide, it's good to know about basic settings of Blogger such as how to customize or edit HTML. You may need to open these settings multiple times while customizing a blog with custom theme such as Plus UI.

Theme Designer

From Theme Designer page, we can edit basic things such as color/background and length. Default themes additionally allow us to add custom CSS or change font faces. Our theme doesn't allow adding custom CSS and changing font faces through this page due to some limitations.

Steps for navigating to Theme Designer:

Go to Blogger Dashboard.
Navigate to Theme and click on Customize button.
Tips!
Alternatively, you can navigate to Layout and click on Theme Designer link.
You are now on Theme Designer page.
The page should have 3 menus namely Background, Advanced and Gadgets in the left and a preview of the blog home page in the right.
By clicking on Advanced tab, you can select the component you wish to edit from the dropdown menu.

Edit HTML

This feature gives full control of theme modification, allowing us to modify the Theme XML code. This XML code can be considered as the source code because it contains settings and contents as valid Blogger theme markup which is rendered to HTML when a webpage is visited. This XML code generally contains Blogger theme tags, HTML tags, comments and text contents including CSS and JS.

You can also install a theme by overwriting the existing XML code with the new theme's XML code. Keep in mind, this method resets the previous theme's settings and widgets with new theme's default settings and widgets respectively.

Steps for navigating to Theme XML Editor:

Go to Blogger Dashboard.
Click icon next to the Customize button.
Click Edit HTML, you will be redirected to the editing page.

How to directly jump to a widget with specific ID?

To improve the editing process, Blogger provides a feature to jump directly to a specific widget, you can press icon then the widget ID will be displayed, select the widget you want to edit.

Mobile Settings

Basically this feature is used to determine the appearance of the blog when accessed via mobile, the mobile version is marked with ?m=1 at the end of the url and cannot be removed. Most custom themes already support responsive even some premium themes already support Adaptive Layout, therefore mobile settings are no longer needed, we recommend choosing a desktop theme on mobile display.

In Blogger dashboard, click on Theme.
Click icon next to the Customize button.
Click Mobile Settings, in the option 'Want to display Desktop or Mobile theme on mobile devices?' select Desktop.
Click Save

Download Files

Make sure you have downloaded all the required files from Gumroad after purchasing. If you have not yet downloaded them, follow these steps:

Via Email receipt:

Pull up your email receipt. Click the View content button to go to the product's download page.
If you have not received an email receipt, please check your spam folder. If you still can't locate it, please contact us.
Before being redirected to the download page, you might be asked for your email address. Simply enter the email you used at checkout, and you should be able to access the download page.

Via Gumroad account:

Alternatively, you can create a Gumroad account using the email address you previously bought your product(s) with.
With a Gumroad account, you will be able to access your purchases at any time from your Library.

Download the .ZIP file of latest version and extract it.

If you have purchased the template not through Gumroad, please contact us.

Theme Installation

There are two ways of installing the theme, we recommend you to use second method if you are installing a specific version of theme for the first time.

Requires time!
We recommend you to install theme if you have enough time, you should not leave your blog just by installing the theme. Few customizations need to done immediately after installing the theme. Feel free to reach us in case you get stuck somewhere.

Upload XML

The easiest way to install a Blogger theme is by uploading the .XML file directly:

In Theme menu, click icon next to the Customize button.
Click Restore.
Select the .XML file that you want to upload, click Upload then check for changes to your blog by clicking View Blog or refreshing your blog page directly.

This method will retain the widgets in the previous theme, the final appearance may be different from the theme demo, use the Override XML method to install the theme cleanly.

Override XML

The most recommended way to install a custom theme is to directly overwrite the XML code of the previous theme, but as mentioned earlier, this method will reset all the settings and widgets in the previous theme and replace them with built-in settings and widgets from the new theme.

Warning!
It is highly recommended to back up the previous theme first before using this method.

Removing previous theme

To make sure Blogger doesn't merge previous theme and new theme, we first need to apply a blank theme. We do so to make sure nothing is merged with the new theme.

Copy the following blank theme code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='clean-install.xml' b:templateVersion='0.0.1' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/><head><b:if cond='false'><b:skin><![CDATA[]]></b:skin></b:if></head><body><b:section id='_' maxwidgets='1' showaddelement='false'/></body></html>

Go to Blogger HTML Editor.
Replace all code in the previous theme, right click › Select All (⌘ + A).
Press ⌘ + V to paste all the code that was copied before.
Save the changes by clicking icon on the top right of the HTML Editor.

Applying new theme

Since we have already removed the previous theme using blank theme, you can now use Restore option to upload the new theme, it will be helpful if you are using mobile device. Or you can use the following method:

Open the .XML file from extacted folder in any Text Editor application.
Copy all the theme code that appears, press ⌘ + A › ⌘ + C for quick commands.
Go to Blogger HTML Editor.
Replace all code in the previous theme, right click › Select All (⌘ + A).
Press ⌘ + V to paste all the .XML code that was copied before.
Save the theme by clicking icon on the top right of the HTML Editor.

Next steps

Once you have successfully installed the template, it needs to be customized to adapt your blog. For example, you need to specify your blog favicon manually, add information for meta tags, customize default texts, customize widgets, and more.

Recommendations

We recommend you to do initial customization as soon as you install the template as well as read following guidelines for best practices.

Basic Setup: Things to be done immediately after installing the theme, it includes:
- Add a favicon: Starting from v3, you need to add your blog favicon manually unlike older versions.
- Set meta tags: The template automatically adds general meta tags including opengraph and twitter card for you. In few meta tags, we use default texts and image urls, therefore you need to replace them with yours.
Guidelines: Gather information to make sure you follow best practices when using the theme to prevent unexpected errors and behaviours.
- Preferred image ratio and size: Using recommended ratio and sizes for images for different places ensures images do no crop and fit at its placement.
- Optimization: Optimize your blog and posts to prevent unexpected behaviours.
You can read Basic Setup and Guidelines for a detailed information and documentation.

The theme automatically loads Google Adsense script if your blog is connected with a Google Adsense account from Earning section. If you want to change this behaviour or want to customize Google Adsense related things, you may want to read Google Adsense plugin customization.

The theme automatically loads Google Analytics script if Google Analytics Measurement ID has been already added through Blog Settings. If you want to change this behaviour or want to customize Google Analytics related things, you may want to read Google Analytics plugin customization.

Before your start using a theme feature, we recommend you to read documentation about it before. If no documentation is available for a particular feature, please reach out to us.

Plus UI