Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Customize order confirmation page


Anna10e

Question

Site URL: http://www.annatenne.com

Hi everyone! ūüôā
I'm relatively new to SS, and really been struggling to customize the order confirmation page (I sell digital products!)

I'd love to customise to better highlight the download link, as most people seem to miss it or don't know the link will expire in 24hrs.
I've customised the confirmation and product emails that get sent, but not everyone opens them, thinking they have more time to access their links (it seems to be expiring 24hrs from purchase, rather than 24hrs from accessing the link/email too).

I use Squarespace 7.1, have tried looking online but was only able to edit the confirmation page by adding additional text below the footer (to say the link will expire), but I'd love to know if it's possible/how to customize the default info (to better highlight the link - maybe make it blue and underlined?) and remove the footer that then appears in the middle due to the new text underneath, at least.
I also don't know how to view the order confirmation page, aside from actually placing an order, is there anywhere to find it on my site in order to view/customize? 

Can anyone please help? Thanks in advance! 
(I'm relatively new to SS, and don't have code knowledge, but I've done my best to try finding a solution before writing here.
THANK YOU SO MUCH!

 

IMG_2006.jpg

Edited by Anna10e
Link to comment

Recommended Posts

  • 0
1 hour ago, Anna10e said:

I tried changing the text "Your purchase includes digital downloads. Get them here:" to something more urgent, because people seem to miss it, maybe something like "To access your purchase, please download the LOGIN, NOW. Thank you!" (in bold too!) Is that possible?

You should be able to modify the message by replacing the CSS with something like this:

#confirmed-page {
  // Order Confirmed title
  h1 {
    font-size: 34px!important;
  }
  // Order details text
  p {
    font-size: 20px!important;
  }
  // Your purchase includes digital...
  h3 {
    font-size: 0!important;
    visibility: hidden;
  }
  h3:after {
    content: "To access your purchase, please click the link below. Thank you!";
    font-size: 28px!important;
    visibility: visible;
    font-weight: bold;
  }
  // Link to digital content
  a {
    font-size: 20px!important;
    color: blue!important;
    border-bottom: 1px solid blue!important;
  }
}

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

Can you place an order & share order confirmation page? We can check easier.

I also wrote this guide, maybe useful: Customize Order Confirmation Page

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
12 hours ago, tuanphan said:

Can you place an order & share order confirmation page? We can check easier.

I also wrote this guide, maybe useful: Customize Order Confirmation Page

Thanks so much @tuanphan!
Sorry, I had done that and attached a screenshot in the original post, it was just on my phone though, sorry if it wasn't enough or clear enough.
I've just done so again, on desktop, hopefully that's better, attached below - ideally I'd love to remove the footer and space that now appears in the middle (due to me adding text at the bottom), and make the download link stand out more (maybe blue with an underline?).
Honestly the whole page is pretty boring though haha, but those two practical elements would be amazing!

Oh yes!!!!!!!! I actually found your post already (I did my best to research before asking here)!!! Thank you so much! I did struggle with how to apply it though (both because I don't know coding that well) but mostly because I didn't know where to put it - the only section I could find was to add to the confirmation page footer (settings/advanced), as I've already attempted to do, whereas in the Design/custom CSS I didn't know how to just apply to that specific page! Sorry!

Thank you!

Screenshot (1937).png

Screenshot (1937)2.png

Link to comment
  • 0
17 hours ago, IXStudio said:

Hi @Anna10e
Welcome to SQSP world!

Please make a duplicate from your website via account panel and add me as admin collaborator.

ixstudio[dot]net[at]gmail[dot]com

Please use the like button if it helps you!

Best,
Leopold

Thank you so much @IXStudio for the warm welcome!

Wow, and thank you so much for the offer! That's extremely generous of you (and can imagine how much easier that is than trying to explain it to me haha, although Id love to know how to do it)

I will be honest - part of me is skeptical about how safe that is, handing out access to a stranger, but maybe if @tuanphan can confirm it's not a terrible idea to do so, or how to do it securely, I can invite you ūüôā (my apologies for not being fully trusting, I'm sure you have the best intentions, but stranger danger, you know? haha).

If so, I'm now on the duplicated site, guessing I'm in the right spot, is Content Editor enough? ūüôā
Thanks so much!

 

Screenshot (1938).png

Link to comment
  • 0
On 9/6/2020 at 8:39 AM, Anna10e said:

I'd love to know if it's possible/how to customize the default info (to better highlight the link - maybe make it blue and underlined?)

Hi Anna

You can style the confirmation page by adding some CSS styles to Design > Custom CSS.

Here's an example showing how you could change the size of the various elements and style the link to be blue and underlined. You can edit this to suite your needs. I've provided some screenshots showing how these styles will affect the content. When selecting the font-size, bear in mind that larger text will push the link further down on mobile devices, often pushing it out of sight.

I hope this helps. Let me know if you have any questions.

#confirmed-page {
  // Order Confirmed title
  h1 {
    font-size: 34px!important;
  }
  
  // Order details text
  p {
    font-size: 20px!important;
  }
  
  // Your purchase includes digital...
  h3 {
    font-size: 28px!important;
  }

  // Link to digital content
  a {
    font-size: 20px!important;
    color: blue!important;
    border-bottom: 1px solid blue!important;
  }
}

1059458649_Screenshot2020-09-07at11_16_57.thumb.png.a14c334c3e63f82551609b2546ca049f.png

2047854077_Screenshot2020-09-07at11_17_19.thumb.png.e44c6a715ee7d5987a481452017b4ab0.png

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

You are ALL amazing!! Thank you SO MUCH!!!

@paul2009, you are incredible! Done! I now have a blue underline! WOO!
I tried changing the text "Your purchase includes digital downloads. Get them here:" to something more urgent, because people seem to miss it, maybe something like "To access your purchase, please download the LOGIN, NOW. Thank you!" (in bold too!) Is that possible? I tried and epically failed on that front, where I put it didn't work haha!

Sorry, I totally misunderstood @tuanphan here's the link! 

https://www.annatenne.com/checkout/order-confirmed?oid=5f562b4fc647701a91f8d912&authCode=NWY1NjJiNGZjNjQ3NzAxYTkxZjhkOTEyOjIwMjAtMDktMDdUMTI6NDU6MDMuNjQ0Wk-hJ3TKw6G0nZljUNkDXsfwlKv7NoV-xqTFNTdIOJlB

Thanks so much @IXStudio! I'm halfway there now, I'll wait and see if it's an easy fix for the last change ūüôā Thanks so much though!

You're all awesome! Thank you so much for your time!

119025139_1751026608394226_8658944002253959972_n.jpg

Screenshot (1939).png

Link to comment
  • 0

I saw this example and was wondering how to change the background color on the order confirmation page.  You've got details on the fonts, but not the background color.  The page currently has a black background and white text by default and I need to change it to the opposite -- white background with black text.  Thanks so much. @IXStudio @paul2009

Edited by Skor
add more information
Link to comment
  • 0
18 hours ago, Skor said:

I saw this example and was wondering how to change the background color on the order confirmation page.

No problem. Add this to the CSS I provided above:

body#order-confirmed {
  background: white;
}

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
Just now, Skor said:

Of course the body text was still white

Sure, but the original post should take care of that¬†ūüôā

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

Hi @paul2009,

I was just reading how you helped out Anna Tenne trying to find an answer to my question, which is the following:

I'm looking for a way to change the text of the confirmation page. I would like to change the site title into a custom name. Could you please help me out with the right CSS? You can find a printscreen of the page below.

If possible I would also like to change the page title from 'Order confirmed' to 'Thank you for your order!'.

Thank you in advance!

Julie
 

 

order confirmed page.jpg

Link to comment
  • 0
On 11/24/2020 at 9:58 PM, julierom said:

Hi @paul2009,

I was just reading how you helped out Anna Tenne trying to find an answer to my question, which is the following:

I'm looking for a way to change the text of the confirmation page. I would like to change the site title into a custom name. Could you please help me out with the right CSS? You can find a printscreen of the page below.

If possible I would also like to change the page title from 'Order confirmed' to 'Thank you for your order!'.

Thank you in advance!

Julie
 

 

order confirmed page.jpg

Have you found the code yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 12/3/2020 at 5:31 PM, julierom said:

Hi @tuanphan,

Thanks for replying! ūüôā

No, I didn't find the code yet.¬†It would be great if you could help me out! ūüôā

Thank you!

Can you place an order & share order confirmation page? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi @Paul2009

Thanks for linking me in here, I've tried adding this to my CSS a few times but nothing seems to be updating - am I missing anything really obvious?

I've adjusted what my CSS message is saying but not messed with any of the other code, but the confirmation page isn't changing - it remains as it was originally. 

 

Any help would be greatfully appreciated from a code novice!

Thanks!

https://www.merrygoroundglasgow.co.uk/checkout/order-confirmed?oid=5fce0c9abfb4c51ffaedc9b9&authCode=NWZjZTBjOWFiZmI0YzUxZmZhZWRjOWI5OjIwMjAtMTItMDdUMTE6MDY6MDIuMTg3WmH4S1QnNjCFFMIBKBe5vJSwPeA6XJdwQhfg-7U37d_z

Edited by CHSgt
Link to comment
  • 0
16 minutes ago, CHSgt said:

Thanks for linking me in here, I've tried adding this to my CSS a few times but nothing seems to be updating - am I missing anything really obvious?

I should have explained that the code was specific to the user who wanted to use it for a Digital Download confirmation page and had h3 header that they wanted to change. You need to use the same principle, but on your site there is only the h1 title and two lines of paragraph text like this:

order-conf-page-chsgt.thumb.png.63d0a4d0fbf139dad092b824946d23cd.png

To add some text below the second paragraph, you can add something like this to Custom CSS instead:

#confirmed-page {
  p:nth-of-type(2):after {
    content: "If you don't receive your order confirmation in the next hour, please check your spam folder.";
    display: block;
    margin-top: 20px;
    font-weight: bold;
  }
}

 

This add the additional content, like this:

 

1536160825_Screenshot2020-12-07at11_21_38.thumb.png.3df1c03189adf0f8c8b6557728002b36.png

¬†¬†¬†If a post helps you,¬†please click a "Like"¬†option below¬†¬†‚ÜėÔłŹ

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

@paul2009I must be being really dumb - I'm adding it into the 

Settings-Advanced-CSS Injection  and then scrolling down to the order confirmation box and inputting there, but nothing is changing when I test the order....

What am I missing? Thanks so much for your help so far...it's very much appreciated!

Edited by CHSgt
Link to comment
  • 0
5 minutes ago, CHSgt said:

I'm adding it into Settings-Advanced

No problem. Add to Design > Custom CSS (not code injection).

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

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...