UNA Market like on Boonex site.

studio/template/css/store.css

@@ -89,30 +89,42 @@ div.bx-std-block-panel-bottom .bx-menu-btns-hor .bx-btn u {
 	overflow: hidden;
 }
 
-.bx-std-product-no-thumb,
-.bx-std-product-thumb {
-    display:block;
-    overflow:hidden;    
+/*--- Title ---*/
+.bx-std-product-title,
+.bx-std-product-title .bx-std-pt-cnt {
+	position: relative;
 }
+.bx-std-product-title .bx-std-pt-icon {
+	position: absolute; 
+	top: 0px;
+	left: 0px;
 
-.bx-std-product-info {
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-}
+	vertical-align: middle;
 
-.bx-std-product-gallery .bx-std-product-no-thumb,
-.bx-std-product-gallery .bx-std-product-thumb {
-    float:none;
-    line-height:1.25em;
-    background-size:cover;
-    background-repeat:no-repeat;
-    background-position:center center;
-    display:table;
-    width:100%;
-}
+	border-radius: 25px;
+	-moz-border-radius: 25px;
+	-webkit-border-radius: 25px;
 
-.bx-std-product-gallery h2 {
+	text-align: center;
+	overflow: hidden;
+}
+.bx-std-product-title .bx-std-pt-icon .bx-std-pt-icon-plate {
+	background-color: #ffffff;
+}
+.bx-std-product-title .bx-std-pt-icon .sys-icon {
+	font-size: 72px;
+	font-size: 4.5rem;
+	line-height: 96px;
+	line-height: 6rem;
+}
+.bx-std-product-title .bx-std-pt-content {
+	padding-left: 120px;
+	padding-left: 7.5rem;
+}
+.bx-std-product-title .bx-std-pt-title {
+	white-space: nowrap;	
+}
+.bx-std-product-gallery .bx-def-font-h3 {
 	margin-bottom: 0;
 	max-height: 3.75em;
     line-height: 1.25em;
@@ -121,16 +133,38 @@ div.bx-std-block-panel-bottom .bx-menu-btns-hor .bx-btn u {
     overflow: hidden;
 }
 
+/*--- Cover Section ---*/
+.bx-std-pc-no-cover,
+.bx-std-pc-cover {
+    display: block;
+    background-color: #ffffff;
+    overflow: hidden;
+}
+
+.bx-std-product-gallery .bx-std-pc-no-cover,
+.bx-std-product-gallery .bx-std-pc-cover {
+    float:none;
+    line-height:1.25em;
+    background-size:cover;
+    background-repeat:no-repeat;
+    background-position:center center;
+    display:table;
+    width:100%;
+}
 .bx-std-product-strecher {
     visibility: hidden;
 }
 
-.bx-std-product-title {
-	white-space: nowrap;	
+
+/*--- Actions Section ---*/
+.bx-std-pa-info {
+    white-space: nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
 }
 
-.bx-std-product-vendor,
-.bx-std-product-count {
+.bx-std-pa-vendor,
+.bx-std-pa-count {
 	white-space: nowrap;
 }
 
@@ -140,37 +174,23 @@ span.bx-std-product-versions {
 	font-weight: bold;
 }
 
-.bx-std-product-info {
-	overflow: visible;
-	white-space: nowrap;
-}
-
-.bx-std-pi-cell {
-	display: inline-block;
-	vertical-align: middle;
-}
-.bx-std-pi-cell.bx-std-pic-left {
-	width: 34%;
-}
-.bx-std-pi-cell.bx-std-pic-right {
-	width: 64%;
-	text-align: right;
-}
-.bx-std-pi-cell.bx-std-pic-right .bx-btn {
+.bx-std-pa-actions .bx-btn {
 	display: inline-block;
 	float: none;
 	vertical-align: top;
 }
 .bx-std-pic-price-or {
-	line-height: 24px;
-    line-height: 1.5rem;
+	line-height: 42px;
+    line-height: 2.625rem;
 }
 .bx-std-pic-price-or:first-child {
 	display: none;
 }
 
+/*--- Star based Rating style ---*/
 .bx-std-pic-stars {
 	position: relative;
+	display: inline-block;
 }
 
 .bx-std-pic-underlay {}

studio/template/scripts/BxBaseStudioStore.php

@@ -326,16 +326,30 @@ class BxBaseStudioStore extends BxDolStudioStore
 
         //--- Prepare modules.
         foreach($aProducts['modules'] as $aModule) {
-        	$sImage = BxDolStudioUtils::getModuleIcon($aModule, 'store');
+        	$sIcon = BxDolStudioUtils::getModuleIcon($aModule, 'store');
+        	$bIcon = strpos($sIcon, '.') !== false;
+
+        	$sImage = '';
         	$bImage = strpos($sImage, '.') !== false;
 
         	$bInstalled = $aModule['installed'];
         	$bQueued = !$bInstalled && $this->oDb->isQueued('action', $aModule['dir']);
-        	
 
             $sModules .= $oTemplate->parseHtmlByName('str_product_v1.html', array(
                 'js_object' => $sJsObject,
              	'name' => $aModule['name'],
+            	'bx_if:no_icon' => array (
+	                'condition' => !$bIcon,
+	                'content' => array(
+            			'icon' => $sIcon
+            		),
+	            ),
+                'bx_if:icon' => array (
+	                'condition' => $bIcon,
+	                'content' => array(
+	                	'icon_url' => $sIcon,
+	            	),
+	            ),
                 'bx_if:no_image' => array (
 	                'condition' => !$bImage,
 	                'content' => array(
@@ -371,12 +385,27 @@ class BxBaseStudioStore extends BxDolStudioStore
 
         //--- Prepare updates.
         foreach($aProducts['updates'] as $aUpdate) {
-        	$sImage = BxDolStudioUtils::getModuleIcon(array('type' => $aUpdate['module_type'], 'name' => $aUpdate['module_name'], 'dir' => $aUpdate['module_dir']), 'store');
+        	$sIcon = BxDolStudioUtils::getModuleIcon(array('type' => $aUpdate['module_type'], 'name' => $aUpdate['module_name'], 'dir' => $aUpdate['module_dir']), 'store');
+        	$bIcon = strpos($sIcon, '.') !== false;
+
+        	$sImage = '';
         	$bImage = strpos($sImage, '.') !== false;
 
             $sUpdates .= $oTemplate->parseHtmlByName('str_update_v1.html', array(
                 'js_object' => $sJsObject,
             	'name' => $aUpdate['module_name'],
+            	'bx_if:no_icon' => array (
+	                'condition' => !$bIcon,
+	                'content' => array(
+            			'icon' => $sIcon
+            		),
+	            ),
+                'bx_if:icon' => array (
+	                'condition' => $bIcon,
+	                'content' => array(
+	                	'icon_url' => $sIcon,
+	            	),
+	            ),
                 'bx_if:no_image' => array (
 	                'condition' => !$bImage,
 	                'content' => array(
@@ -620,7 +649,10 @@ class BxBaseStudioStore extends BxDolStudioStore
             $sPrice = !$bFree ? _t('_adm_str_txt_price_single', $aItem['author_currency_sign'], $aItem['price_single']) : _t('_adm_str_txt_price_free');
             $sDiscount = !$bFree && !empty($aItem['discount_single']) ? _t('_adm_str_txt_discount_csign', $aItem['author_currency_sign'], $aItem['discount_single']['price']) : '';
 
-            $sImage = !empty($aItem['thumbnail']['big']) ? $aItem['thumbnail']['big'] : BxDolStudioUtils::getIconDefault(BX_DOL_MODULE_TYPE_MODULE);
+            $sIcon = !empty($aItem['thumbnail']['small']) ? $aItem['thumbnail']['small'] : BxDolStudioUtils::getIconDefault(BX_DOL_MODULE_TYPE_MODULE);
+			$bIcon = strpos($sIcon, '.') !== false;
+
+            $sImage = !empty($aItem['cover']['big']) ? $aItem['cover']['big'] : '';
 			$bImage = strpos($sImage, '.') !== false;
 
             $sResult .= $oTemplate->parseHtmlByName('str_product_v2.html', array(
@@ -629,6 +661,18 @@ class BxBaseStudioStore extends BxDolStudioStore
             	'name' => $aItem['name'],
                 'url' => $aItem['url'],
             	'description_plain_attr' => bx_html_attribute($aItem['description_plain']),
+            	'bx_if:no_icon' => array (
+	                'condition' => !$bIcon,
+	                'content' => array(
+            			'icon' => $sIcon
+            		),
+	            ),
+                'bx_if:icon' => array (
+	                'condition' => $bIcon,
+	                'content' => array(
+	                	'icon_url' => $sIcon,
+	            	),
+	            ),
                 'bx_if:no_image' => array (
 	                'condition' => !$bImage,
 	                'content' => array(
@@ -644,12 +688,17 @@ class BxBaseStudioStore extends BxDolStudioStore
 	            	),
 	            ),
                 'title' => $aItem['title'],
-                'bx_if:show_vendor_price' => array(
-                    'condition' => !$bShoppingCart && false, //--- Completely hidden for now.
+                'bx_if:show_vendor' => array(
+                    'condition' => !$bShoppingCart,
                     'content' => array(
                         'vendor_name' => $aItem['author_name'],
-                        'price_single' => $sPrice,
-                        'discount_single' => $sDiscount,
+	            		'vendor_url' => $aItem['author_url'],
+	            		'bx_if:show_version' => array(
+	            			'condition' => !empty($aItem['file_version']),
+	            			'content' => array(
+	            				'version' => $aItem['file_version'],
+	            			)
+	            		),
                     )
                 ),
                 'bx_if:show_count_price' => array(
@@ -661,6 +710,7 @@ class BxBaseStudioStore extends BxDolStudioStore
                     )
                 ),
                 'rate' => !$bShoppingCart ? $this->getVoteStars($aItem) : '',
+                'votes_cnt' => !$bShoppingCart && (int)$aItem['votes_cnt'] > 0 ? (int)$aItem['votes_cnt'] : '',
                 'bx_if:show_purchase_single' => array(
                     'condition' => $bPurchaseSingle && !$bInCart,
                     'content' => array(
@@ -735,7 +785,10 @@ class BxBaseStudioStore extends BxDolStudioStore
         foreach($mixedItems as $aItem) {
             $bDownloadable = (int)$aItem['is_file'] == 1;
 
-            $sImage = !empty($aItem['thumbnail']['big']) ? $aItem['thumbnail']['big'] : BxDolStudioUtils::getIconDefault(BX_DOL_MODULE_TYPE_MODULE);
+            $sIcon = !empty($aItem['thumbnail']['big']) ? $aItem['thumbnail']['big'] : BxDolStudioUtils::getIconDefault(BX_DOL_MODULE_TYPE_MODULE);
+			$bIcon = strpos($sIcon, '.') !== false;
+
+            $sImage = !empty($aItem['cover']['big']) ? $aItem['cover']['big'] : '';
 			$bImage = strpos($sImage, '.') !== false;
 
             $sResult .= $oTemplate->parseHtmlByName('str_update_v2.html', array(
@@ -743,6 +796,18 @@ class BxBaseStudioStore extends BxDolStudioStore
                 'id' => $aItem['id'],
             	'name' => $aItem['name'],
                 'url' => $aItem['url'],
+            	'bx_if:no_icon' => array (
+	                'condition' => !$bIcon,
+	                'content' => array(
+            			'icon' => $sIcon
+            		),
+	            ),
+                'bx_if:icon' => array (
+	                'condition' => $bIcon,
+	                'content' => array(
+	                	'icon_url' => $sIcon,
+	            	),
+	            ),
             	'bx_if:no_image' => array (
 	                'condition' => !$bImage,
 	                'content' => array(

studio/template/str_product_v1.html

@@ -1,40 +1,59 @@
 <div class="bx-std-product bx-std-product-gallery bx-def-gal-unit-size" id="bx-std-product-__name__">
 	<div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-margin-sec bx-def-border bx-def-round-corners bx-def-box bx-def-color-bg-box">
-        <a href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">
+		<!-- Title section -->
+		<div class="bx-std-product-title bx-def-padding-sec">
+			<div class="bx-std-pt-cnt">
+				<div class="bx-std-pt-icon bx-def-ava-size">
+					<a href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">
+						<bx_if:no_icon>
+							<div class="bx-std-pt-icon-plate bx-def-ava-size">
+								<i class="sys-icon __icon__"></i>
+							</div>
+						</bx_if:no_icon>
+						<bx_if:icon>
+							<img class="bx-def-ava-size" src="__icon_url__" />
+						</bx_if:icon>
+					</a>
+				</div>
+				<div class="bx-std-pt-content bx-def-ava-size-min-height">
+					<div class="bx-std-pt-title bx-def-padding-sec-top bx-def-font-h3">
+			            <a class="bx-def-margin-sec-topbottom bx-def-font-color" href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">__title__</a>
+			        </div>
+				</div>
+			</div>
+		</div>
+		<!-- Cover section -->
+        <div class="bx-std-product-cover">
 			<bx_if:no_image>
 				<div class="bx-def-gal-img-column">
-		            <div class="bx-std-product-no-thumb bx-def-gal-div-size bx-def-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
+		            <div class="bx-std-pc-no-cover bx-def-gal-div-size bx-def-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
 		                __note__
 		                <div class="bx-std-product-strecher">__strecher__</div>
 		            </div>
 		        </div>
 			</bx_if:no_image>
 			<bx_if:image>
-				<div class="bx-std-product-thumb bx-def-gal-div-size bx-def-font-middle" style="background-image:url(__image_url__)">
+				<div class="bx-std-pc-cover bx-def-gal-div-size bx-def-font-middle" style="background-image:url(__image_url__)">
 	                <div class="bx-std-product-strecher">__strecher__</div>
 	            </div>
 			</bx_if:image>
-        </a>
-	    <div class="bx-std-product-content bx-def-padding-thd">
-	        <div class="bx-std-product-title bx-def-font-align-center">
-	            <a class="bx-def-margin-sec-topbottom bx-def-font-color" href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">__title__</a>
+        </div>
+        <!-- Actions section -->
+        <div class="bx-std-product-actions bx-def-padding-sec">
+	        <div class="bx-std-pa-info">
+				<span class="bx-std-pa-vendor bx-def-font-h3">__vendor__</span> &bull; <span class="bx-std-pc-version">__version__</span>
 	        </div>
-	        <div class="bx-std-product-info bx-def-margin-thd-top">
-	        	<div class="bx-std-pi-cell bx-std-pic-left">
-	        		<span class="bx-def-font-small">__vendor__ &bull; <span class="bx-std-pc-version">__version__</span></span>
+	        <div class="bx-std-pa-actions bx-def-margin-thd-top">
+	        	<div class="bx-std-pc-buttons bx-std-pcb-install bx-def-margin-thd-leftright-neg bx-clearfix" <bx_if:hide_install>style="display:none"</bx_if:hide_install>>
+	        		<a class="bx-btn bx-def-margin-thd-leftright" onclick="javascript:__js_object__.install('__dir__', this)"><bx_text:_adm_btn_install_submit /></a>
+	        		<a class="bx-btn bx-def-margin-thd-leftright" onclick="javascript:__js_object__.remove('__dir__', this)"><bx_text:_adm_btn_delete_submit /></a>
 	        	</div>
-	        	<div class="bx-std-pi-cell bx-std-pic-right">
-		        	<div class="bx-std-pc-buttons bx-std-pcb-install bx-def-margin-thd-leftright-neg bx-clearfix" <bx_if:hide_install>style="display:none"</bx_if:hide_install>>
-		        		<a class="bx-btn bx-btn-small bx-def-margin-thd-leftright" onclick="javascript:__js_object__.install('__dir__', this)"><bx_text:_adm_btn_install_submit /></a>
-		        		<a class="bx-btn bx-btn-small bx-def-margin-thd-leftright" onclick="javascript:__js_object__.remove('__dir__', this)"><bx_text:_adm_btn_delete_submit /></a>
-		        	</div>
-		        	<div class="bx-std-pc-buttons bx-std-pcb-queued bx-def-margin-thd-leftright-neg bx-clearfix" <bx_if:hide_queued>style="display:none"</bx_if:hide_queued>>
-		            	<a class="bx-btn bx-btn-small bx-def-margin-thd-leftright bx-btn-disabled"><bx_text:_adm_btn_queued_submit /></a>
-		            </div>
-		            <div class="bx-std-pc-buttons bx-std-pcb-installed bx-def-margin-thd-leftright-neg bx-clearfix" <bx_if:hide_installed>style="display:none"</bx_if:hide_installed>>
-		            	<a class="bx-btn bx-btn-small bx-def-margin-thd-leftright bx-btn-disabled"><bx_text:_adm_btn_installed_submit /></a>
-		            </div>
-				</div>
+	        	<div class="bx-std-pc-buttons bx-std-pcb-queued bx-def-margin-thd-leftright-neg bx-clearfix" <bx_if:hide_queued>style="display:none"</bx_if:hide_queued>>
+	            	<a class="bx-btn bx-def-margin-thd-leftright bx-btn-disabled"><bx_text:_adm_btn_queued_submit /></a>
+	            </div>
+	            <div class="bx-std-pc-buttons bx-std-pcb-installed bx-def-margin-thd-leftright-neg bx-clearfix" <bx_if:hide_installed>style="display:none"</bx_if:hide_installed>>
+	            	<a class="bx-btn bx-def-margin-thd-leftright bx-btn-disabled"><bx_text:_adm_btn_installed_submit /></a>
+	            </div>
 	        </div>
 	    </div>
 	</div>

studio/template/str_product_v2.html

@@ -1,59 +1,79 @@
 <div class="bx-std-product bx-std-product-gallery bx-def-gal-unit-size" id="bx-std-product-__id__">
 	<div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-margin-sec bx-def-border bx-def-round-corners bx-def-box bx-def-color-bg-box">
-        <a href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)" title="__description_plain_attr__">
+		<!-- Title section -->
+		<div class="bx-std-product-title bx-def-padding-sec">
+			<div class="bx-std-pt-cnt">
+				<div class="bx-std-pt-icon bx-def-ava-size">
+					<a href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)" title="__description_plain_attr__">
+						<bx_if:no_icon>
+							<div class="bx-std-pt-icon-plate bx-def-ava-size">
+								<i class="sys-icon __icon__"></i>
+							</div>
+						</bx_if:no_icon>
+						<bx_if:icon>
+							<img class="bx-def-ava-size" src="__icon_url__" />
+						</bx_if:icon>
+					</a>
+				</div>
+				<div class="bx-std-pt-content bx-def-ava-size-min-height">
+					<div class="bx-std-pt-title bx-def-padding-sec-top bx-def-font-h3">
+			            <a class="bx-def-margin-sec-topbottom bx-def-font-color" href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">__title__</a>
+			        </div>
+			        <div class="bx-std-pt-rate bx-def-margin-thd-top">__rate__ __votes_cnt__</div>
+				</div>
+			</div>
+		</div>
+		<!-- Cover section -->
+		<div class="bx-std-product-cover">
             <bx_if:no_image>
 	            <div class="bx-def-gal-img-column">
-		            <div class="bx-std-product-no-thumb bx-def-gal-div-size bx-def-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
+		            <div class="bx-std-pc-no-cover bx-def-gal-div-size bx-def-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
 		                __description_plain__
 		                <div class="bx-std-product-strecher">__strecher__</div>
 		            </div>
 		        </div>
 			</bx_if:no_image>
 			<bx_if:image>
-				<div class="bx-std-product-thumb bx-def-gal-div-size bx-def-font-middle" style="background-image:url(__image_url__)">
+				<div class="bx-std-pc-cover bx-def-gal-div-size bx-def-font-middle" style="background-image:url(__image_url__)">
 	                <div class="bx-std-product-strecher">__strecher__</div>
 	            </div>
 			</bx_if:image>
-        </a>
-	    <div class="bx-std-product-content bx-def-padding-thd">
-	        <div class="bx-std-product-title bx-def-font-align-center">
-	            <a class="bx-def-margin-sec-topbottom bx-def-font-color" href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">__title__</a>
-	        </div>
-	        <div class="bx-std-product-info bx-def-margin-thd-top">
-	        	<div class="bx-std-pi-cell bx-std-pic-left">
-		        	<bx_if:show_vendor_price>
-		        		<div class="bx-std-product-vendor bx-def-font-small">__vendor_name__</div>
-			        </bx_if:show_vendor_price>
-			        <bx_if:show_count_price>
-			        	<div class="bx-std-product-count bx-def-font-small">__count__ <bx_text:_adm_str_txt_items_by /> <span class="bx-std-product-price">__price_single__ __discount_single__</span></div>
-			        </bx_if:show_count_price>
-		        	__rate__
-	        	</div>
-		        <div class="bx-std-pi-cell bx-std-pic-right">
-		        	<bx_if:show_download>
-		            	<a class="bx-btn bx-btn-small bx-std-pc-download" onclick="javascript:__js_object__.getFile(__file_id__, this)"><bx_text:_adm_btn_download_submit /></a>
-		            </bx_if:show_download>
-		            <bx_if:show_download_disabled>
-		            	<a class="bx-btn bx-btn-small bx-btn-disabled bx-std-pc-download"><bx_text:_adm_btn_download_submit /></a>
-		            </bx_if:show_download_disabled>
-		            <bx_if:show_queued_disabled>
-		            	<a class="bx-btn bx-btn-small bx-btn-disabled bx-std-pc-queued"><bx_text:_adm_btn_queued_submit /></a>
-		            </bx_if:show_queued_disabled>
-		            <bx_if:show_delete>
-		            	<a class="bx-btn bx-btn-small bx-std-pc-delete" onclick="javascript:__js_object__.deleteFromCart(__vendor_id__, __id__, this)"><bx_text:_adm_btn_delete_submit /></a>
-		            </bx_if:show_delete>
-		            <div class="bx-std-pic-price">
-			        	<bx_if:show_purchase_single>
-							<a class="bx-std-pic-price bx-btn bx-btn-small" onclick="javascript:__js_object__.addToCart(__vendor_id__, __id__, this)">__price_single__</a>
-			            </bx_if:show_purchase_single>
-			            <bx_if:show_checkout_single>
-			           		<a class="bx-std-pic-price bx-btn bx-btn-small bx-std-pc-checkout" onclick="javascript:__js_object__.checkoutCart(__vendor_id__, this)" <bx_if:show_as_hidden>style="display:none;"</bx_if:show_as_hidden>><bx_text:_adm_btn_checkout_submit /></a>
-			            </bx_if:show_checkout_single>
-			            <bx_if:show_purchase_recurring>
-			            	<span class="bx-std-pic-price-or bx-def-font-grayed"><bx_text:_adm_str_txt_or /></span>
-			            	<a class="bx-std-pic-price bx-btn bx-btn-small" onclick="javascript:__js_object__.subscribe(__vendor_id__, __id__, this)">__price_recurring__</a>
-			            </bx_if:show_purchase_recurring>
-			        </div>
+		</div>
+		<!-- Actions section -->
+	    <div class="bx-std-product-actions bx-def-padding-sec">
+	        <div class="bx-std-pa-info">
+	        	<bx_if:show_vendor>
+	        		<a class="bx-std-pa-vendor bx-def-font-h3" href="__vendor_url__">__vendor_name__</a>
+	        		<bx_if:show_version> &bull; <span class="bx-std-pc-versions">__version__</span></bx_if:show_version>
+		        </bx_if:show_vendor>
+		        <bx_if:show_count_price>
+		        	<div class="bx-std-pa-count bx-def-font-small">__count__ <bx_text:_adm_str_txt_items_by /> <span class="bx-std-product-price">__price_single__ __discount_single__</span></div>
+		        </bx_if:show_count_price>
+			</div>
+			<div class="bx-std-pa-actions bx-def-margin-thd-top">
+	        	<bx_if:show_download>
+	            	<a class="bx-btn bx-std-pc-download" onclick="javascript:__js_object__.getFile(__file_id__, this)"><bx_text:_adm_btn_download_submit /></a>
+	            </bx_if:show_download>
+	            <bx_if:show_download_disabled>
+	            	<a class="bx-btn bx-btn-disabled bx-std-pc-download"><bx_text:_adm_btn_download_submit /></a>
+	            </bx_if:show_download_disabled>
+	            <bx_if:show_queued_disabled>
+	            	<a class="bx-btn bx-btn-disabled bx-std-pc-queued"><bx_text:_adm_btn_queued_submit /></a>
+	            </bx_if:show_queued_disabled>
+	            <bx_if:show_delete>
+	            	<a class="bx-btn bx-std-pc-delete" onclick="javascript:__js_object__.deleteFromCart(__vendor_id__, __id__, this)"><bx_text:_adm_btn_delete_submit /></a>
+	            </bx_if:show_delete>
+	            <div class="bx-std-pic-price">
+		        	<bx_if:show_purchase_single>
+						<a class="bx-std-pic-price bx-btn" onclick="javascript:__js_object__.addToCart(__vendor_id__, __id__, this)">__price_single__</a>
+		            </bx_if:show_purchase_single>
+		            <bx_if:show_checkout_single>
+		           		<a class="bx-std-pic-price bx-btn bx-std-pc-checkout" onclick="javascript:__js_object__.checkoutCart(__vendor_id__, this)" <bx_if:show_as_hidden>style="display:none;"</bx_if:show_as_hidden>><bx_text:_adm_btn_checkout_submit /></a>
+		            </bx_if:show_checkout_single>
+		            <bx_if:show_purchase_recurring>
+		            	<span class="bx-std-pic-price-or bx-def-padding-thd-leftright bx-def-font-grayed"><bx_text:_adm_str_txt_or /></span>
+		            	<a class="bx-std-pic-price bx-btn" onclick="javascript:__js_object__.subscribe(__vendor_id__, __id__, this)">__price_recurring__</a>
+		            </bx_if:show_purchase_recurring>
 		        </div>
 		    </div>
 		</div>

studio/template/str_update_v1.html

@@ -1,31 +1,50 @@
 <div class="bx-std-product bx-stdp-update bx-std-product-gallery bx-def-gal-unit-size" id="bx-std-update-__name__">
 	<div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-margin-sec bx-def-border bx-def-round-corners bx-def-box bx-def-color-bg-box">
-        <a href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">
+		<!-- Title section -->
+		<div class="bx-std-product-title bx-def-padding-sec">
+			<div class="bx-std-pt-cnt">
+				<div class="bx-std-pt-icon bx-def-ava-size">
+					<a href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">
+						<bx_if:no_icon>
+							<div class="bx-std-pt-icon-plate bx-def-ava-size">
+								<i class="sys-icon __icon__"></i>
+							</div>
+						</bx_if:no_icon>
+						<bx_if:icon>
+							<img class="bx-def-ava-size" src="__icon_url__" />
+						</bx_if:icon>
+					</a>
+				</div>
+				<div class="bx-std-pt-content bx-def-ava-size-min-height">
+					<div class="bx-std-pt-title bx-def-padding-sec-top bx-def-font-h3">
+			            <a class="bx-def-margin-sec-topbottom bx-def-font-color" href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">__title__</a>
+			        </div>
+				</div>
+			</div>
+		</div>
+		<!-- Cover section -->
+        <div class="bx-std-product-cover">
             <bx_if:no_image>
 				<div class="bx-def-gal-img-column">
-		            <div class="bx-std-product-no-thumb bx-def-gal-div-size bx-def-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
+		            <div class="bx-std-pc-no-cover bx-def-gal-div-size bx-def-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
 		                __note__
 		                <div class="bx-std-product-strecher">__strecher__</div>
 		            </div>
 		        </div>
 			</bx_if:no_image>
 			<bx_if:image>
-				<div class="bx-std-product-thumb bx-def-gal-div-size bx-def-font-middle" style="background-image:url(__image_url__)">
+				<div class="bx-std-pc-cover bx-def-gal-div-size bx-def-font-middle" style="background-image:url(__image_url__)">
 	                <div class="bx-std-product-strecher">__strecher__</div>
 	            </div>
 			</bx_if:image>
-        </a>
-	    <div class="bx-std-product-content bx-def-padding-thd">
-	        <div class="bx-std-product-title bx-def-font-align-center">
-	            <a class="bx-def-margin-sec-topbottom bx-def-font-color" href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">__title__</a>
-	        </div>
-	        <div class="bx-std-product-info bx-def-margin-thd-top">
-	        	<div class="bx-std-pi-cell bx-std-pic-left">
-	        		<span class="bx-def-font-small">__vendor__ &bull; <span class="bx-std-pc-versions">__versions__</span></span>
-	        	</div>
-		        <div class="bx-std-pi-cell bx-std-pic-right">
-		        	<a class="bx-btn bx-btn-small" onclick="javascript:__js_object__.update('__dir__', this)"><bx_text:_adm_btn_install_submit /></a>
-		        </div>
+        </div>
+        <!-- Actions section -->
+        <div class="bx-std-product-actions bx-def-padding-sec">
+	        <div class="bx-std-pa-info">
+				<span class="bx-std-pa-vendor bx-def-font-h3">__vendor__</span> &bull; <span class="bx-std-pc-versions">__versions__</span>
+			</div>
+			<div class="bx-std-pa-actions bx-def-margin-thd-top">
+				<a class="bx-btn" onclick="javascript:__js_object__.update('__dir__', this)"><bx_text:_adm_btn_install_submit /></a>
 			</div>
 	    </div>
 	</div>

studio/template/str_update_v2.html

@@ -1,33 +1,52 @@
 <div class="bx-std-product bx-stdp-update bx-std-product-gallery bx-def-gal-unit-size" id="bx-std-update-__name__">
 	<div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-margin-sec bx-def-border bx-def-round-corners bx-def-box bx-def-color-bg-box">
-        <a href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">
+		<!-- Title section -->
+		<div class="bx-std-product-title bx-def-padding-sec">
+			<div class="bx-std-pt-cnt">
+				<div class="bx-std-pt-icon bx-def-ava-size">
+					<a href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">
+						<bx_if:no_icon>
+							<div class="bx-std-pt-icon-plate bx-def-ava-size">
+								<i class="sys-icon __icon__"></i>
+							</div>
+						</bx_if:no_icon>
+						<bx_if:icon>
+							<img class="bx-def-ava-size" src="__icon_url__" />
+						</bx_if:icon>
+					</a>
+				</div>
+				<div class="bx-std-pt-content bx-def-ava-size-min-height">
+					<div class="bx-std-pt-title bx-def-padding-sec-top bx-def-font-h3">
+			            <a class="bx-def-margin-sec-topbottom bx-def-font-color" href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">__title__</a>
+			        </div>
+				</div>
+			</div>
+		</div>
+		<!-- Cover section -->
+        <div class="bx-std-product-cover">
             <bx_if:no_image>
 				<div class="bx-def-gal-img-column">
-		            <div class="bx-std-product-no-thumb bx-def-gal-div-size bx-def-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
+		            <div class="bx-std-pc-no-cover bx-def-gal-div-size bx-def-box bx-def-font-middle bx-def-font-grayed bx-def-padding bx-def-box-sizing">
 		                __note__
 		                <div class="bx-std-product-strecher">__strecher__</div>
 		            </div>
 		        </div>
 			</bx_if:no_image>
 			<bx_if:image>
-				<div class="bx-std-product-thumb bx-def-gal-div-size bx-def-font-middle" style="background-image:url(__image_url__)">
+				<div class="bx-std-pc-cover bx-def-gal-div-size bx-def-font-middle" style="background-image:url(__image_url__)">
 	                <div class="bx-std-product-strecher">__strecher__</div>
 	            </div>
 			</bx_if:image>
-        </a>
-	    <div class="bx-std-product-content bx-def-padding-thd">
-	        <div class="bx-std-product-title bx-def-font-align-center">
-	            <a class="bx-def-margin-sec-topbottom bx-def-font-color" href="javascript:void(0)" onclick="javascript:__js_object__.info('__name__', this)">__title__</a>
+		</div>
+	    <!-- Actions section -->
+        <div class="bx-std-product-actions bx-def-padding-sec">
+	        <div class="bx-std-pa-info">
+				<span class="bx-std-pa-vendor bx-def-font-h3">__vendor__</span> &bull; <span class="bx-std-pc-versions">__versions__</span>
 	        </div>
-	        <div class="bx-std-product-info bx-def-margin-thd-top">
-	        	<div class="bx-std-pi-cell bx-std-pic-left">
-	        		<span class="bx-def-font-small">__vendor__ &bull; <span class="bx-std-pc-versions">__versions__</span></span>
-	        	</div>
-		        <div class="bx-std-pi-cell bx-std-pic-right">
-		        	<bx_if:show_download>
-		            	<a class="bx-btn bx-btn-small bx-std-pc-download" onclick="javascript:__on_click__">__caption__</a>
-		            </bx_if:show_download>
-		        </div>
+	        <div class="bx-std-pa-actions bx-def-margin-thd-top">
+	        	<bx_if:show_download>
+	            	<a class="bx-btn bx-std-pc-download" onclick="javascript:__on_click__">__caption__</a>
+	            </bx_if:show_download>
 			</div>
 	    </div>
     </div>