Jump to content

Displaying Price Variants

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.jupiter10.com

Hi guys,

I’m a looking for help on how to change the way the pricing is displayed on the Clay template from Squarespace. I’ve looked everywhere and cannot find a solution.

I sell wallpapers and all my products have 2 variants, the client can either choose to buy a roll (£145) or a sample (£2).

When I add the 2 product variants the pricing is displayed as IMAGE 1 = from £2 ( the sample price)

However, I find it misleading and I would like the pricing to be displayed as IMAGE 2 = Roll £145 / Sample £2 -  this way I think it’s much clearer to customers the actual price of the product.

At the moment I can get away with hiding the price attribute from the page and inserting it as plain text, but I don’t think it’s good practice.

Is there any code or plugin I could use that would force Squarespace to display both prices from the product variants?

Any help will be appreciated,

Thank you very much.

Screenshot_20200222-163620.jpg

Link to comment
  • Solution
On 2/22/2020 at 6:18 PM, Esquirebr said:

Is there any code or plugin I could use that would force Squarespace to display both prices from the product variants?

Yes, JavaScript could be written to amend the price description for variant products. Before you pursue this change, it's worth considering if there are better ways to achieve your objective. 

Variants work really well when you have two sizes of a product, for example a perfume available in 100ml and 200ml sizes. The "from £20" label makes sense to customers in these circumstances, because they can choose to buy the smaller £20 bottle or the larger £30 bottle. Whichever one they choose, they are buying a bottle of perfume.

When you use variants to choose between a high value product and a sample, you face two issues:

  1. The "from £2" label seems misleading, as you suggested. The product description may be the same, but the sample will never be a substitute for the actual product.
  2. You want to make it as easy as possible for customers to go from interest to purchase, but there's now an additional step for every potential customer to complete, just to confirm that they want to buy the product, and not a sample. This additional friction is likely to irritate potential customers and could hurt your conversion rate, because clicking "Add to Cart" will result in an error if they don't select "Roll" first:

wallpaper-error-variant-not-selected.png.d0316b0412bfd9acb1dc376c4c381f7e.png

 

If you want to show clear pricing for both products and samples, and you want potential customers to be able to purchase products or samples with the fewest steps possible, then an alternative option is to add the sample as a separate product and then add an active "order sample" link to the full product page. I see that you already do this on your live pages, I really like that. The link isn't active (it doesn't add the sample to the cart right there), but I think it's much clearer than using variants.

You can improve this further by making the button 'active', so it adds the sample right there on the page. This reduces the series of steps a visitor takes to reach the checkout (the "purchase workflow"). Here's an example on a Squarespace 7.1 site:

wallpaper-sf-digital.gif.fb031d3f3f78ab3

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

I've sent you a direct message to follow up 😀

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
2 hours ago, paul2009 said:

I've sent you a direct message to follow up 😀

Hi @paul2009

I was searching on the forum and found this thread 

 

When I inject the code below on the header, the second button is displayed, but because each wallpaper has its respective different sample  I need the href to be different for each product, and if add the code on 'additional info' it doesn't work,  how can I inject individually on each product?

Any help would be much appreciated. 
 
Thank you 
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/commerce/show-cart'>ORDER SAMPLE</a>").insertAfter(".sqs-add-to-cart-button");        
   });
</script>

 

Link to comment
  • 2 months later...
On 2/24/2020 at 3:14 AM, paul2009 said:

I've sent you a direct message to follow up 😀

 

On 2/23/2020 at 8:55 AM, paul2009 said:

Yes, JavaScript could be written to amend the price description for variant products. Before you pursue this change, it's worth considering if there are better ways to achieve your objective. 

Variants work really well when you have two sizes of a product, for example a perfume available in 100ml and 200ml sizes. The "from £20" label makes sense to customers in these circumstances, because they can choose to buy the smaller £20 bottle or the larger £30 bottle. Whichever one they choose, they are buying a bottle of perfume.

When you use variants to choose between a high value product and a sample, you face two issues:

  1. The "from £2" label seems misleading, as you suggested. The product description may be the same, but the sample will never be a substitute for the actual product.
  2. You want to make it as easy as possible for customers to go from interest to purchase, but there's now an additional step for every potential customer to complete, just to confirm that they want to buy the product, and not a sample. This additional friction is likely to irritate potential customers and could hurt your conversion rate, because clicking "Add to Cart" will result in an error if they don't select "Roll" first:

wallpaper-error-variant-not-selected.png.d0316b0412bfd9acb1dc376c4c381f7e.png

 

If you want to show clear pricing for both products and samples, and you want potential customers to be able to purchase products or samples with the fewest steps possible, then an alternative option is to add the sample as a separate product and then add an active "order sample" link to the full product page. I see that you already do this on your live pages, I really like that. The link isn't active (it doesn't add the sample to the cart right there), but I think it's much clearer than using variants.

You can improve this further by making the button 'active', so it adds the sample right there on the page. This reduces the series of steps a visitor takes to reach the checkout (the "purchase workflow"). Here's an example on a Squarespace 7.0 site:

 

 

spacer.png

Hi Paul2009, I have a similar but different situation. I sell tea www.sterlingberry.com I have multiple sizes/types of tea bags of the same product. But on product page it hows only trial size price. Its not the main product, its misleading. Also, when uploading this to Facebook store it takes sample size price.

-It would be great to have either drop down or a display of variants and its prices in the same line.

-How to display main product price in SHOP main page

-How to fix Facebook uploads to show main product price and not sample's

Thank you,

Tatiana

Thank you!

Link to comment
  • 10 months later...
On 2/24/2020 at 12:14 AM, paul2009 said:

I've sent you a direct message to follow up 😀

Can you help me out with this, too? I'm trying to figure out how to change what pricing shows so I can simply ignore the first/lowest price and go with the next lowest since I have a similar low-priced additional service option with our site. I don't mind having to manually state what that amount is for each product (we only have a few products, so I can maintain that manually if things change in the future).

Link to comment
  • 1 year later...
On 2/23/2020 at 1:55 PM, paul2009 said:

If you want to show clear pricing for both products and samples, and you want potential customers to be able to purchase products or samples with the fewest steps possible, then an alternative option is to add the sample as a separate product and then add an active "order sample" link to the full product page. I see that you already do this on your live pages, I really like that. The link isn't active (it doesn't add the sample to the cart right there), but I think it's much clearer than using variants.

You can improve this further by making the button 'active', so it adds the sample right there on the page. This reduces the series of steps a visitor takes to reach the checkout (the "purchase workflow"). Here's an example on a Squarespace 7.0 site:

Hi Paul2009 - your example above is exactly what I need for my site (www.therum.company).

I need to offer £5 samples on my product pages with out the issues caused by variants. 

Whats the next step?

Thanks

Tom

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.