AvinT

Hey y'all
took some tinkering and found another code from the original solution provider (Paul 2009)
There's a simpler, more elegant solution, that worked for my site (Taki Pets). We're on Bedford, Squarespace version 7.0.
Note : This solution only works if you have a Business or Commerce Plan.
------------------
Here's the link to the solution, since the author have requested that we don't repost without his permission (only fair).
It's a simple piece of code that replaces a space hyphen space e.g. Red Wine - Italy with a line break so on the website it appears as
Red Wine
Italy
Using the CSS code provided in this tutorial, I was able to combine both and achieve the look, where the name title is featured more prominently than the descriptive information that follow. 
example:
Red Wine
Italy
------------------
I've selected the third option from the link (solution) above as it works best for product pages. Copy the codes there and paste it in the footer (as suggested, though I found that it worked better in the header.)
Dashboard -> Setting (left menu) -> Advanced (all the way at the bottom) ->Code Injection
For this to work in Bedford, you'll have to replace the code 
'.ProductList-title, .ProductItem-details-title' with
.product-title Note that this is case sensitive.
For other templates, you'll want to fire up your site, right click anywhere on your page, and select view source. Then do a quick search for the keyword product name. scroll till you find something that looks like this. use the class right before the name of your product.
<a href="/order/signature-king-salmon" class="product hentry category-signature-series category-new-product tag-king-salmon tag-signature-series author-junchen-hong post-type-store-item article-index-1 featured on-sale clear" id="thumb-signature-king-salmon" data-item-id="614405c8047c7b2987b721d3"> <div> <div class="product-image sqs-pinterest-image"> <div class="intrinsic"> <div> <img data-src="https://images.squarespace-cdn.com/content/v1/597adfce1b631b892b8cd3b5/1632998527604-JRAN79XLUY94ATD2XTU3/Taki+web-10.jpg" data-image="https://images.squarespace-cdn.com/content/v1/597adfce1b631b892b8cd3b5/1632998527604-JRAN79XLUY94ATD2XTU3/Taki+web-10.jpg" data-image-dimensions="3317x4975" data-image-focal-point="0.5,0.5" alt="Taki web-10.jpg" data-load="false" /> </div> </div> </div> <div class="product-overlay"> <div class="product-meta"> <div class="product-title">King Salmon - 10 individual packs - free islandwide delivery</div> ------------------
Now to style it
There's two section of style, the product collection page, where the page list all your products, and the product detail page, the page after you click on a product, where it will list all the details, write up and add to cart option.
Paste the codes in the CSS section of your site not page.
Dashboard -> Design (left menu) -> Custom CSS 
Part 1 - Product collection page
Make sure you're referencing the same parameters as above. 
For example, if you changed .ProductItem-details-title to .product-title, then make sure you change it here too.
The little addition :first-line will automatically change your product title to a larger font. So make sure it isn't too long.
#productList .product .product-title, .no-touch .product-list-titles-overlay #productList .product { font-size: 1em; } #productList .product .product-price, .no-touch .product-list-titles-overlay #productList .product .product-price { font-size: 1em; } .product-title:first-line { font-size: 1.4em; line-height: 1.6em; } Part 2 - Product detail page
This code will define the text styling on your individual product page.
#productSummary .product-title { font-size: 1.1em; } #productDetails .product-price { font-size: 0.9em; } Save all your settings, and hopefully your page will look the way you want it.
This works on mobile platform too.

Hey y'all
took some tinkering and found another code from the original solution provider (Paul 2009)
There's a simpler, more elegant solution, that worked for my site (Taki Pets). We're on Bedford, Squarespace version 7.0.
Note : This solution only works if you have a Business or Commerce Plan.
------------------
Here's the link to the solution, since the author have requested that we don't repost without his permission (only fair).
It's a simple piece of code that replaces a space hyphen space e.g. Red Wine - Italy with a line break so on the website it appears as
Red Wine
Italy
Using the CSS code provided in this tutorial, I was able to combine both and achieve the look, where the name title is featured more prominently than the descriptive information that follow. 
example:
Red Wine
Italy
------------------
I've selected the third option from the link (solution) above as it works best for product pages. Copy the codes there and paste it in the footer (as suggested, though I found that it worked better in the header.)
Dashboard -> Setting (left menu) -> Advanced (all the way at the bottom) ->Code Injection
For this to work in Bedford, you'll have to replace the code 
'.ProductList-title, .ProductItem-details-title' with
.product-title Note that this is case sensitive.
For other templates, you'll want to fire up your site, right click anywhere on your page, and select view source. Then do a quick search for the keyword product name. scroll till you find something that looks like this. use the class right before the name of your product.
<a href="/order/signature-king-salmon" class="product hentry category-signature-series category-new-product tag-king-salmon tag-signature-series author-junchen-hong post-type-store-item article-index-1 featured on-sale clear" id="thumb-signature-king-salmon" data-item-id="614405c8047c7b2987b721d3"> <div> <div class="product-image sqs-pinterest-image"> <div class="intrinsic"> <div> <img data-src="https://images.squarespace-cdn.com/content/v1/597adfce1b631b892b8cd3b5/1632998527604-JRAN79XLUY94ATD2XTU3/Taki+web-10.jpg" data-image="https://images.squarespace-cdn.com/content/v1/597adfce1b631b892b8cd3b5/1632998527604-JRAN79XLUY94ATD2XTU3/Taki+web-10.jpg" data-image-dimensions="3317x4975" data-image-focal-point="0.5,0.5" alt="Taki web-10.jpg" data-load="false" /> </div> </div> </div> <div class="product-overlay"> <div class="product-meta"> <div class="product-title">King Salmon - 10 individual packs - free islandwide delivery</div> ------------------
Now to style it
There's two section of style, the product collection page, where the page list all your products, and the product detail page, the page after you click on a product, where it will list all the details, write up and add to cart option.
Paste the codes in the CSS section of your site not page.
Dashboard -> Design (left menu) -> Custom CSS 
Part 1 - Product collection page
Make sure you're referencing the same parameters as above. 
For example, if you changed .ProductItem-details-title to .product-title, then make sure you change it here too.
The little addition :first-line will automatically change your product title to a larger font. So make sure it isn't too long.
#productList .product .product-title, .no-touch .product-list-titles-overlay #productList .product { font-size: 1em; } #productList .product .product-price, .no-touch .product-list-titles-overlay #productList .product .product-price { font-size: 1em; } .product-title:first-line { font-size: 1.4em; line-height: 1.6em; } Part 2 - Product detail page
This code will define the text styling on your individual product page.
#productSummary .product-title { font-size: 1.1em; } #productDetails .product-price { font-size: 0.9em; } Save all your settings, and hopefully your page will look the way you want it.
This works on mobile platform too.