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

Customize order confirmation page

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

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

Can you share link to order confirmation page? We can check easier.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


Link to post
  • 0

@paul2009 YOU ARE AMAZING!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU so much for taking the time!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Thanks everyone else too!!!!!!! All sorted!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...