hashim blogger cart Documentation

Introduction

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

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

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

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

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.

C. Save Changes

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

D. Verify Installation

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

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

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

---

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

Header Logo Setup

To change or upload your site logo, go to the Blogger Layout section and edit the Header Logo (Image) gadget. This allows you to customize your blog branding easily.

Steps to Add Header Logo

1. Open your Blogger Dashboard.
2. Go to Layout.
3. Find the Header Logo (Image) gadget.
4. Click the Edit (✎) icon.
5. Upload your logo image or paste the image URL.
6. Click Save to apply changes.

Tip: Use a transparent PNG logo for a more professional look.

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 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

Intro Section Setup

The Intro Section allows you to display featured image gadgets at the top of your homepage. You can use it to highlight categories, promotions, or important links.

How to Add Intro Section Gadgets

1. Go to your Blogger Dashboard.
2. Open the Layout section.
3. Find the Intro Section area.
4. Click Add a Gadget.
5. Select Image Gadget.
6. Configure the image and link settings.
7. Click Save.

Note: Only the first 5 gadgets added in the Intro Section will be displayed on the homepage.

Gadget Settings

Each image gadget typically includes:

• Image URL or upload
• Title (optional)
• Link URL

Example

Product Categories Sections

Product Sections allow you to display posts dynamically using labels or recent posts. You can place them in different homepage areas such as Product Section 1 or Product Section 2.

How to Add Product Sections

1. Go to your Blogger Dashboard.
2. Open the Layout section.
3. Find Product Section 1 or Product Section 2.
4. Click Add a Gadget.
5. Select HTML/JavaScript gadget.
6. Paste the shortcode inside the gadget.
7. Click Save.

---

Shortcode

{getPosts} $results={Number of Results} $label={Your Label}
    

Label Options

• Label Name (Category-based posts)
• recent (Latest posts)

---

What is Label Name?

A Label Name is a category assigned to your blog posts in Blogger. It helps organize and display related posts together in product sections.

Example

{getPosts} $results=6 $label=Technology
{getPosts} $results=8 $label=recent
    

Tip: Make sure your posts have labels assigned, otherwise label-based sections will not display content.

Example Preview

Product Gadget

The Product Gadget allows you to display posts in your sidebar-hCart using labels or recent posts. This helps you show featured or related content on every page of your blog.

How to Add Product Gadget

1. Go to your Blogger Dashboard.
2. Open the Layout section.
3. Find the Sidebar area.
4. Click Add a Gadget.
5. Select HTML/JavaScript.
6. Paste the shortcode inside the gadget box.
7. Click Save.

---

Shortcode

{getPosts} $results={Number of Results} $label={Your Label}
    

Label Options

• Label Name (category-based posts)
• recent (latest posts)

Tip: You can use multiple Product Gadgets in different sidebar-hCart sections to increase engagement.

Example

{getPosts} $results=5 $label=Technology
{getPosts} $results=8 $label=recent
    

Example Preview

Sidebar Ads

The Sidebar Ads feature allows you to display custom advertisements in your sidebar-hCart without using the default gadget styling. It is useful for placing banners, affiliate ads, or custom HTML ads.

How to Add Sidebar Ads

1. Go to your Blogger Dashboard.
2. Open the Layout section.
3. Find the Sidebar area.
4. Click Add a Gadget.
5. Select HTML/JavaScript gadget.
6. Paste the shortcode inside the gadget.
7. Click Save.

---

Shortcode

{ads}
    

Note: This shortcode automatically pulls and displays ads in the sidebar-hCart without extra styling.

Example

About Section

The About Section is used to display a short description about your website or brand, along with social media icons to connect with your audience.

How to Access About Section

1. Go to your Blogger Dashboard.
2. Open the Layout section.
3. Find the About Section gadget.
4. Click the Edit (✎) icon.
5. Add your About text and social icons.
6. Click Save.

---

About Us

Write a short description about your website, business, or blog here. Keep it simple, clear, and engaging for visitors.

---

Social Icons

Social icons are displayed using the {getSocial} shortcode. You can add multiple social platforms to connect with your audience.

Shortcode:

{getSocial}
    

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 include at least one item with the {getSocial} shortcode inside the gadget for social icons to display correctly.

Example

Footer Menu

The Footer Menu allows you to add important navigation links at the bottom of your website. It helps users quickly access pages like About, Contact, Privacy Policy, and more.

How to Access Footer Menu

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

---

Example Links

Home
About Us
Contact
Privacy Policy
Terms & Conditions
    

Tip: Keep footer links simple and include only important pages.

Example

Cookie Consent

The Cookie Consent feature allows you to display a notification message to users about cookies. It helps you comply with privacy requirements and improves user transparency.

How to Access Cookie Consent

1. Go to your Blogger Dashboard.
2. Open the Layout section.
3. Find the Cookie Consent gadget.
4. Click the Edit (✎) icon.
5. Configure the settings and save changes.

---

Shortcode

$ok={Button Text} $days={Expires Days}
    

Parameters

• Button Text: Text shown on the accept button (e.g. "Accept")
• Expires Days: Number of days before the consent is shown again

Tip: Set expiry days based on your privacy policy requirements.

Example

$ok=Accept $days=30
    

Setup Products

Adding product information in your posts is simple. Just follow the steps below to display product call-to-action buttons using the built-in shortcode system.

Basic Steps

1. Add a product link anywhere inside your blog post.
2. Replace the link text with the product shortcode.
3. Add required attributes like price, button text, and optional settings.

---

The Shortcode

	
	<!--JSON CONFIG-->
<script id="hBt-config" type="application/json">
  {
    "sizes":[
      {"name":"D","priceAdd":0,"stock":5},
      {"name":"Small","priceAdd":0,"stock":5},
      {"name":"Medium","priceAdd":2,"stock":3},
      {"name":"Large","priceAdd":4,"stock":0},
      {"name":"XL","priceAdd":216.5,"stock":2}
    ],
    "colors":[
      {"name":"D","priceAdd":0},
      {"name":"Black","priceAdd":0},
      {"name":"White","priceAdd":20},
      {"name":"Red","priceAdd":2.5},
      {"name":"Navy","priceAdd":2.5}
    ]
  }
</script>
<p>
  <a href="#">&nbsp;{getProduct} $button={Buy Now} $price={6510.00}
    $sale={40% Off}</a>
</p>

{getProduct} $button={Add To Cart} $price={543} $sale={40%} $style={3}
    

Attribute Details

• price: 545
• sale:40%
• Style Options:us only 1 or 3

Style Options

• Style 1: Displays call-to-action inside the post and product-header-hCart.
• Style 2: Displays call-to-action only in the product-header-hCart.

Note: The attributes Sale, Free, Icon, and Style are optional. Use them only when needed.

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