Create Auto Select Box Product Category With Blogger Labels

Categorizing your blogger posts with Labels, a Blogger default gadget, is one way to organize your blog posts. The same goes if you build an on-line store (from blogger templates) shared by template developers/designers on the web.

Tag your product and categorize using Blogger Labels gadget and users at your blogger store can easily find and navigate directly to your product by category. This will also help you organize multiple products published from your Blogger store.

By default, Blogger Labels gadget provides  users with an un-odered list (<ul><li>...</li></ul>) to display your Blogger Labels. But what if you want to make it mobile friendly, something like a select drop down menu so users can easily navigate through your product posts on mobile devices?

You can change/modify your Blogger Labels to display a select box, which it can be easily accessed via many modern web browsers including the ones used in mobile devices. The custom labels gadget will also automatically add links to your search index page to your product posts. Here's the how to-]]

Customize Blogger Labels Gadget to Select Drop Down Menu How To

In your Blogger > Edit template > Back-up/Restore Template (if required) > find your Labels widget by clicking on the "jump to Widget" tab.

At your widget code > expand the gadget by clicking the black triangle on the left.

An example for a default Blogger Labels gadget will look like so:-

              <b:widget id='Label1' locked='false' title='Labels' type='Label'>
                <b:includable id='main'>

               <!-- LOTS OF CODES -->

                </b:includable>
              </b:widget>

Now delete the codes in between the reference <b:includable id='main'> and </b:includable> and add below codes:-

                <b:includable id='main'> <!-- YOUR REFERENCE -->
                  <b:if cond='data:title'>
                    <h2>Categories</h2>
                  </b:if>
                  <div class='widget-content' style='text-align:center;margin:0 auto;'>
                      <select onchange='location=this.options[this.selectedIndex].value;' style='max-width: 280px'>
                        <option>Find A Product</option>
                        <b:loop values='data:labels' var='label'>
                          <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
                        </b:loop>
                      </select>
                    <b:include name='quickedit'/>
                  </div>
                </b:includable> <!-- YOUR REFERENCE -->

You can edit the default Labels select box text display at these codes shown below:-

Edit the gadget title at below codes:-

 <h2>REPLACE-TO-YOUR-TITLE</h2>

Edit the default select option at below codes:-

<option>Find A Product</option>

This is how it is going to look like (if you have included a Label via your blogger post - and it works too, go ahead, select an option.

Find A FREE Template BlogrCart White E-Commerce Template BlogrCart Plus E-Commerce Template BlogrStore Responsive Template BlogrShop Responsive Template


Click "Save Template" and view your Blogger store template.

You can also drag and drop. the Blogger Labels gadget (in Layout), and place it anywhere in your Blogger template layout.

In addition, using custom Blogger widget/gadget codes will also prevent default functionalities of the same gadgets if using in Blogger Layout mode > Labels gadget > Edit. So always keep in mind to customize your Labels gadget in your Blogger > Edit Template mode.

Now, providing useful navigational links for your users will definitely enhance your products in your Blogger store. Categorizing your products is actually one of the many key factors for a successful on-line store.

Your Blogger template will look more cleaner without cluttered links using a select drop down feature,. In mobile, by default, automatically the select options will pop-up for users to select on their mobile screen.

It will also help you as Blogger store owner, to organize your products and in addition, you can easily reach your published product post easily (for future editing purposes) in your Blogger > Post section > select desired Labels. Automatically Blogger UI will display the product posts categorized using the selected labels.

View our template collection which uses shopping cart functionality below. Happy modification and building!