Product Layout - how to alter

[DforDog]

Hi,

I am changing my cart to SPP. I am also getting rid of the extended info tab. If I am going to have a single product per page I might as well include all information on that page and do away with the pop up.

So I am using small 150x150 product images on my sub-section and much bigger 300x300 images on the product page. But this has destorted the layout a bit. The product title, quantity and add to cart are all to the right, away from all the other product options.



I have looked at all the preset layout options and none suit, mainly because they nearly all put important options at the bottom.

How would I go about getting something more like this please?



Thank you.

[malbro]

I have looked at all the preset layout options and none suit, mainly because they nearly all put important options at the bottom.

How would I go about getting something more like this please?

A great deal depends on the code used in the selected layout, if the layout is using tables then it is relatively easy to modify an existing pattern. I would copy the layout that is nearest to your requirements, give it a new name and then modify the code.

To give you more help you will need to post the code in the layout you are using.

[DforDog]

Many thanks for your reply.

It is the Product Layout called 'Standard Layout using CSS'

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
      <form method="post" action="<actinic:variable value="Shopping Cart Script URL" name="OnlineScriptURL" />"> 
         <input type="hidden" name="SID" value="<actinic:variable name="SectionID" />" />
         <input type="hidden" name="PAGE" value="PRODUCT" />           
         <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
         <Actinic:SECTION BLOB='<actinic:variable name="SectionCatFile" />'/>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" >
            <!-- Hidden field when in trial mode -->
            <input type="hidden" name="SHOP" value="<actinic:variable name="HiddenFields" />" />
         </actinic:block>
</actinic:block>

	<div class="product_list">
		<div class="image_product"><actinic:variable name="ProductImageLayout" /></div>
			<div>
         <div style="float: right;">
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
            <actinic:variable name="AddToCartButton" />
         </actinic:block>
			</div>

         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" >
            <div style="float: right;"><strong><span class="actrequired"><actinic:variable name="OutOfStock" /></span></strong></div>
         </actinic:block>

         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
            <div style="float: right;"><strong><span class="actrequired"><actinic:variable name="CatalogSuspended" /></span></strong></div>
         </actinic:block>
         
         <a name="<actinic:variable name="EncodedProductAnchor" />"></a>
			<h3 class="product"><actinic:variable name="ProductName" /></h3>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
            <p>Ref: <actinic:variable name="ProductReference" /></p>
         </actinic:block>
			<h3 class="product_price">
         <actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e" >
				<Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />">
            <actinic:variable name="PriceListRetail" />
            </Actinic:PRICES>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False" >
	         <Actinic:NOTINB2B><br /><actinic:variable name="ProductPriceNotEnabledMessage" /></Actinic:NOTINB2B>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e" >
            <br />
            <Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable name="ProductID" />" COMPONENTID=-1><actinic:variable name="RetailCustomerMessage" /></Actinic:PRICE_EXPLANATION>
         </actinic:block>
         </h3>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e" >
            <p>
            <span class="actrequired"><actinic:variable formatting="bold" name="QuantityPrompt" /> </span><input type="text" name="Q_<actinic:variable name="ProductID" />" size="4" value="<actinic:variable name="DefaultQuantity" />" class="form_input_general" />
            </p>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e" >
            <input type="hidden" name="Q_<actinic:variable name="ProductID" />"  value="<actinic:variable name="DefaultQuantity" />" />
         </actinic:block>
         <actinic:variable name="AttributeList" />
         <actinic:variable name="ComponentList" />
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e" >
            <br />
            <script language=JavaScript>
             setotherinfo('<Actinic:Variable Name="OtherInfoPrompt"/>', 'NAME="O_<Actinic:Variable Name="ProductID"/>">', '40', '1000');
            </script><br />
         </actinic:block>      
</div>  
			<p>
         <actinic:variable name="CartError" />         
			<actinic:variable formatting="font(Color|003333)" name="ProductDescription" /><br />
			<actinic:variable name="ExtendedInformationLinks" />
         <actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" >
            <br />
            <a href="<actinic:variable name="ProductLinkInfo" />">
               <actinic:variable name="ProductLinkText" />
            </a>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22DiscountDescriptionIsShownForProducts%22%20%2f%3e" >      
            <br /><actinic:variable value="Standard Discount List" name="DiscountList" />
         </actinic:block>
         

         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsDatePromptShown%22%20%2f%3e" >
            <br />
            <span class="actrequired"><actinic:variable name="DatePrompt" /></span><br />
            <actinic:variable name="DayList" /><actinic:variable name="MonthList" /><actinic:variable name="YearList" />
         </actinic:block>
         
         <actinic:variable name="ProductAlsoBoughtList" />
         
         <actinic:variable name="ProductRelatedProductsList" />
         </p>
	</div>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
      </form>
</actinic:block>