hashim blogger cart Documentation

Introduction

Welcome to the documentation. Use the Hashim bloggerCart to Blogger Template each section.

Backup Blogger Theme

Installation

Welcome to the Blogger Template Installation Guide. This tutorial covers everything you need to install your new Blogger template successfully. From creating a backup of your existing theme to uploading the new template and applying the changes, each step is explained in a simple and easy-to-follow manner.

Upload the XML file from Blogger Dashboard.

Dashboard
→ Theme
→ Restore
→ Upload XML

Installation Steps

Before installing the template, download the .zip file and extract it on your computer. Inside the extracted folder, you will find the Blogger template XML file and any additional resources.

Step 1: Back Up Your Current Theme

Before replacing your existing template, create a backup of your current Blogger theme. This allows you to restore it later if needed.

  1. Sign in to your Blogger Dashboard.
  2. Open the Theme section.
  3. Click the ▼ More button.
  4. Select Backup or Backup & Restore.
  5. Download and save the backup file to your computer.
Tip: Always keep a copy of your old template before installing a new one.

Example

Backup Blogger Theme

Step 2: Copy the Template Code

After downloading and extracting the template package, you need to copy the XML code before installing it in Blogger.

  1. Open the extracted template folder.
  2. Locate the file with the .xml extension.
  3. Open the XML file using Notepad, Notepad++, VS Code, or any text editor.
  4. Click anywhere inside the file.
  5. Press Ctrl + A to select all the code.
  6. Press Ctrl + C to copy the selected code.
Tip: Make sure you copy the entire XML file without removing or modifying any part of the code.

Example

Copy Blogger Template Code

Step 3: Replacing the Old Code

Now you will replace your existing Blogger theme code with the new template code you copied earlier. Follow the steps carefully to avoid mistakes.

  1. Go to your Blogger Dashboard → Theme.
  2. Click the ▼ (More) button and select Edit HTML.

A. Open HTML Editor

Open HTML Editor

B. Replace Old Code

  1. Click inside the code editor.
  2. Press Ctrl + A to select all existing code.
  3. Press Delete to remove it.
  4. Paste the new template code using Ctrl + V.
Replace Blogger Template Code

C. Save Changes

After pasting the new code, click the Save button to apply the template.

Installed Template Preview

D. Verify Installation

Go back to your blog homepage and make sure the new template is active and displaying correctly.

Installed Template Preview

Video Tutorial

Layout

Edit your widgets from the Blogger Layout page.

Blogger Cart Configuration (Top)

You can configure global template variables from the Blogger Layout section. These variables control important features like coupons, currency, and system settings.

How to Access Variables

  1. Go to your Blogger Dashboard.
  2. Open the Layout section.
  3. Find the Blogger Shop Config widget.
  4. Click the Edit (✎) link.
  5. Use the Configure Link List window to add values.
  6. Click Save to apply changes.

How to Add Variables

In the Configure Link List window:

  • New Site Name: Enter variable name
  • New Site URL: Enter variable value
  • Click Add Link
  • Repeat for more variables
  • Finally click Save

Available Variables

COUPON

Used to define discount coupon codes and their values. Multiple coupons can be separated 


 1 WELCOME10 
percent|10|200|2026-12-31|1
2 FLAT500
flat|500|200|2026-12-31|1
3 FREESHIP
shipping|50|100|2026-12-31|5
Do not include currency symbols in coupon values.

2. CURRENCY CODE

Defines the 3-letter currency code for your store. 


1  currency
USD
2  currency
AED
3  currency
EUR
3 currency
AUD

Example Preview

Variables Top Example

Theme Options

Theme Options allow you to customize global settings like default thumbnails and JSON variables. These settings control how your Blogger template behaves across the entire site.

Default Thumbnail

The Default Thumbnail option lets you set a fallback image for posts that do not contain an image or YouTube video.

How to Set Default Thumbnail

  1. Go to your Blogger Dashboard.
  2. Open Layout.
  3. Find Theme Options.
  4. Click on Default Thumbnail gadget.
  5. Upload or paste your image URL.
  6. Click Save.
Info: This image will automatically be shown for posts without an image or YouTube video.

Example

Default Thumbnail Example

JSON Variables

JSON Variables are used to control theme text and small dynamic settings inside the template.

How to Edit JSON Variables

  1. Go to Layout in Blogger.
  2. Open Theme Options.
  3. Click JSON Variables gadget.
  4. Edit or paste the configuration code.
  5. Save changes.

Example Code


{
    viewAllText: "View all"
}

Note: viewAllText is set to View all by default.

Example

JSON Variables Example

Header Menu Setup

To configure your main navigation menu, go to the Blogger Layout section and edit the Header Menu gadget. From here, you can add main links and multi-level submenu items.

How to Access Menu Settings

  1. Open your Blogger Dashboard.
  2. Go to Layout.
  3. Find the Header Menu gadget.
  4. Click the Edit (✎) icon.
  5. Add or modify your menu links.
  6. Click Save.

Menu Structure

Default Link Example:


Features
About Us
Contact

Submenu Levels

Level 1 Submenu:


_Features 1
_Blog Updates

Add one underscore (_) before the title to create a Level 1 submenu.

Level 2 Submenu:


__Advanced Feature
__New Release

Add two underscores (__) before the title to create a Level 2 submenu.

Note: Level 2 submenu items must always be placed under or between Level 1 submenu items.

Example

Header Menu Submenu Example

Header Bar Setup

The Header Bar allows you to manage navigation links and social media icons from the Blogger Layout section. You can easily customize it using the built-in gadget settings.

How to Access Header Bar

  1. Open your Blogger Dashboard.
  2. Go to Layout.
  3. Find the Header Bar gadget.
  4. Click the Edit (✎) icon.
  5. Add your Nav Links and Social Links.
  6. Click Save.

Nav Links

Use Nav Links to display simple navigation items in the header bar such as Home, About, or Contact. 


Home
About
Contact

Social Links

Social icons are added using the {getSocial} shortcode inside the gadget.

Shortcode:


{getSocial}


 google, blogger, apple, amazon, microsoft, facebook, facebook-f, twitter, x, rss, youtube, skype,
        stumbleupon, tumblr, vk, stack-overflow, github, linkedin, dribbble, soundcloud, behance, digg,
        instagram, pinterest, twitch, steam, delicious, codepen, flipboard, reddit, whatsapp, telegram,
        messenger, snapchat, discord, quora, tiktok, email, share, threads, mastodon, bluesky, external-link

Supported Icons:

google, blogger, apple, amazon, microsoft, facebook, facebook-f, twitter, x, rss, youtube, skype, stumbleupon, tumblr, vk, stack-overflow, github, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, twitch, steam, delicious, codepen, flipboard, reddit, whatsapp, telegram, messenger, snapchat, discord, quora, tiktok, email, share, threads, mastodon, bluesky, external-link

Important: You must add at least one item with the {getSocial} shortcode inside the gadget for social icons to display correctly.

Example

Header Bar Social Links Example

Theme Settings

Customize colors, fonts, logo, and homepage sections.

Site Feed Setup

The Site Feed setting is important for enabling dynamic content features such as post widgets and related posts. It ensures that your Blogger data is properly accessible by the template.

How to Configure Site Feed

  1. Go to your Blogger Dashboard.
  2. Open Settings.
  3. Scroll to the Site Feed section.
  4. Find Allow Blog Feed.
  5. Set the feed option to Full.
  6. Save your changes.

Example Setting


Site Feed → Full
Important: To ensure {getPosts} gadgets and related posts work correctly, you must set the feed to Full. Otherwise, some features may not display properly.

Example

Site Feed Settings Example

Post a Comment