If you've created custom templates using the Beginner's Guide then your custom templates are BB custom templates. BB custom templates have many options that you have probably already tested, but if you haven't, you can check them out on the BB Template Basics page. One option explained here is how to change the way prices are displayed on category pages and more information pages.
With the BB templates you can easily change the way product prices are displayed in your store without any HTML coding, you can simply change the pricing layout include file that is being called. You will want to specify which pricing layout is being used by setting a new VAR tag in your product template to point to the pricing layout include file you like best.
Start by looking through the pricing layouts shown below and decide which layout works best for your store. The default pricing layout used by most built-in BB product templates is the BB-PriceTwoLine.sst layout.
All layouts below show what the final product price display will be if a product has and displays both the regular and sale price. The CSS to style the prices like below can all be found within the bb-basicmoreinfo.css publish file. Merchants can change the color of the green shown below by modifying the Color 3 field under Preferences > Layout Settings.
BB-PriceOneLine.sst
BB-PriceOnly.sst
BB-PriceOnlyPlus.sst
BB-PriceRounded.sst
BB-PriceTable.sst
BB-PriceTitled.sst
BB-PriceTwoLine.sst
Next, figure out what product template your products are using. The default is the BB-Product.sst product template, but merchants can choose from many other product layouts including 2 column more information page layouts, accordion or tabbed layouts, etc. Once you have determined which product template the products in your store are using (Products > Edit Product Layout), go to Merchandising > Custom Templates > Page/Product > Copy ShopSite Product Template, and make a copy of this product template. Name it whatever you would like. I like to name custom templates with the name of the store so I know I edited the template specific for a certain store. So if my store name was "Lo's Candles", I might name my product template BB-Los-Product.sst.
Highlight your copied template in the list of product templates and click "Edit Template". Find the [-- INCLUDE BB-VARs-DOCTYPE.sst PROCESS --] tag, and immediately below that tag, add the tag below that corresponds to the layout you selected in Step 1.
[-- VAR.PriceDisplay BB-PriceOneLine.sst --]
[-- VAR.PriceDisplay BB-PriceOnly.sst --]
[-- VAR.PriceDisplay BB-PriceOnlyPlus.sst --]
[-- VAR.PriceDisplay BB-PriceQuickNDirty.sst --]
[-- VAR.PriceDisplay BB-PriceRounded.sst --]
[-- VAR.PriceDisplay BB-PriceTable.sst --]
[-- VAR.PriceDisplay BB-PriceTitled.sst --]
[-- VAR.PriceDisplay BB-PriceTwoLine.sst --]
Click "Save Changes" after adding the VAR tag from Step 2, and go to Utilities > Publish > Regenerate, to re-create all your product more information pages with the new product price layout you setup. View your website, refresh your page, and check that the price layout looks how you wanted in your store.
The 3 steps listed above walk you through changing the price layout for your more information pages, but don't affect the price layout on category pages. If you would like to change that layout as well, add the VAR tag you want from Step 2 immediately before the [-- INCLUDE VAR.ProductDefine PROCESS --] tag near the beginning of your product template.