Product Title Customization and Display Tips

Item Name	Customize Gallery Display Product Title
Price	RM12.60
Sizes (Select Before Checkout)	--Select Size-- Small Medium Large XL 2XL 3XL 4XL
Description	A quick how to customize the H3 title tag display on gallery product pages.
More Details	Customize H# title tags for Blog Store/Shop. Edit H3 tags title product page. Blog product page title tips and hacks. Arrange H3 title tags with Blogger Store Theme.

Since that the initial design is to save certain web page estate, the H3 product title tags caan be diplayed between 4-6 word count.

To help you customize the display and get more title view, go to Template > Edit HTML and find code snippets below (between line 1062 and line 1077 )

Before beginning, save or backup your template to you PC.

Find this code snippets:-

h3.post-title {
    font-family: Arial;
    position: absolute;
    top: 140px;
    left: 0;
    bottom: 0;
    text-align: left;
    border: 0;
    height: 30px;
    line-height: 1.4;
    margin: 0;
    padding: 5px;
    overflow: hidden;
    display: block;
    background: #fff;
    width: 120px;
    border-radius: 3px;
    letter-spacing: none;
  }
  h3.post-title:hover { background: #f0f0f0; } 
h3.post-title a, h3.post-title a:visited, h3.post-title strong {
    font-size: 12px;
    font-weight:700;
    line-height: 1.4em;
    display: block;
    color: #a80077;
  }

Now change:-

height: 30px;

To your preferred height to display the title.

In addition, if there is an overlap, adjust this piece of codes between line 1004 and line 1042

.post-body {
    height: 290px;
    width: 132px;
    background: #fff;
    border-bottom: 0 none;
    padding:0;
    margin:0;
  }
th.thumb_image, .thumb_image img, th#thumb img, .post img, .post img a, .item_thumbimg img {
    height: 128px!important;
    width: 130px!important;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    text-align: left;
    float: left;
  }

-- more codes --

.post {
    color: #fff !important;
    margin: 10px 10px 30px;
    height: 290px;
    padding: 0;
    list-style: none;
    list-style-type: none;
    width: 132px;
    float: left;
    position: relative;
    background: #fff;
    overflow: hidden!important;
    border-bottom: 0 none;
  }

Change the height value which equals the value of the amount changed with your H3 title tags above.

Save template and preview your changes.