Tutorial v1.0: Edit & Customize Product Post Select Options

BlogrCart MNMLUS PRO Blogger store theme comes with an advance auto post template to ease editing for publishing a product listing. It also comes with the select options by size & color for blog owners to use with the product selection.




By default 2 types of select options is pre-included with the auto post template & theme owners can customize on which one to use or omit for a product.

Find below the details on how to customize the select options pre-built for blogrCart Closet PRO Blogger store theme.

The advance auto post template comes with a select by size & color options for a dedicated product post. Below is an example:-

For a select by colour options:-

<select class="some_class">
  <option value="n/a">- Select Colour -</option>
  <option value="Blue">Blue</option>
  <option value="White">White</option>
  <option value="Black">Black</option>
</select>

For a select by size options

<select class="some_class">
  <option value="n/a">- Select Size-</option>
  <option value="Size S">Size S</option>
  <option value="Size M">Size M</option>
  <option value="Size L">Size L</option>
</select>

Editing Product Select Options

To edit the select option, edit the value you want to display in cart at highlighted in cyan & the same value to display in select box drop down edit in yellow.

The values highlighted in red is reserved & serves as helpers for users select option during product display.

Adding More Select Options

To add in more select options, add the values & texts pairs within the <option>..</option> mark-up. An example would look like so:-

<select class="some_class">
  <option value="n/a">- Select Size-</option>
  <option value="Size S">Size S</option>
  <option value="Size M">Size M</option>
  <option value="Size L">Size L</option>
  <option value="Size XL">Size XL</option> <!-- Newly Added -->
  <option value="Size XXL">Size XXL</option> <!-- Newly Added -->
</select>

In the example above the ones in bold (and tagged Newly Added) is the additional option values & the text to display in the new & edited select box. The new text will display in this select drop down & the values will be sent to cart accordingly upon users selection.

Removing a Select Option

We strongly suggest that you ommit the <select> ... </select> codes if you do not require a select option for a product, This way you can always display it back without copy & pasting from other psots or your auto post template. Here is an exmple how to omit the select code mark-ups for a product page:-

<!--
<select class="some_class">
  <option value="n/a">- Select Size-</option>
  <option value="Size S">Size S</option>
  <option value="Size M">Size M</option>
  <option value="Size L">Size L</option>
  <option value="Size XL">Size XL</option> <!-- Newly Added -->
  <option value="Size XXL">Size XXL</option> <!-- Newly Added -->
</select>
-->

From the example above the commented out codes (highlighted yellow) used to prevent the select options to display at your product page. You can always use back again by removing the highlighted yellow markups.

You can also delete/remove the entire codes within the <select>...</select> mark-ups if you 100% sure you will not use for the specified product.

Or a much simpler method, at your Blogger editor Compose screen, click at an empty space on the right side of the select box you require to remove/delete. Then press Backspace at your keyboard & the select box will be deleted/removed.

Use back again the mark-up if you require to add in options for later product updates,

Examples can be seen throughout this demo site whereas we removed the select options, the quantity field & also the price (if not required), and it does not break your theme layout.