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

discount strike outs

Question

Site URL: https://naonow.com/products

Hi! I'd love to do something like this on my product page with a strike out of prices or a SAVE code on the site that can be used at checkout. The code appears at the top of the site, on the products, and at checkout. How do I do this?! @tuanphan

My site URL: https://naonow.squarespace.com/config/

https://naonow.com/products

Share this post


Link to post

23 answers to this question

Recommended Posts

  • 0
Posted (edited)

@tuanphan yes!! How do I add that? That link you resent requires a password! and is there a way to add a discount code too that appears at the top of the page?

Edited by rachelt

Share this post


Link to post
  • 0

Hi @ryandejaegher,  thanks for responding! yes I created those like this! How do I add a markdown price to my table? 

 

Also anytime I edit this, it seems to affect my "Get started" button (see pic below). How do I avoid it changing? 

SharedScreenshot.jpg

SharedScreenshot.jpg

Share this post


Link to post
  • 0

@rachelt looks like it's a formatting error on your markdown block. 

Try adding this code for your Markdown block. Once you get the color and style the way you like you can take the CSS in between the style tags and add it to your custom CSS

 

<style>
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  }
  
  .regular-price {
  text-decoration: line-through;
  color: gray;
  }
  
   .discount-price {
  margin-left: 8px;
  font-size: 24px;
  
  }
</style>

### Standard

1 HOUR

<div class="flex">
  <span class="regular-price">$75</span>
  <span class="discount-price">$99</span>
</div>

Per Hour Lesson
* Access to Live Online Course
* 1-on-1 Introduction
* Flexible Scheduling
* Quality Tutors

[Get Started](Get Started)

 


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0

Thank you SO much @ryandejaegher!! A few questions:

1) How do I made the old original price bigger font? 

2) Is there a way to add a pop up on home page with a code to these discounted prices to use at checkout?

3) How do I make the box for standard the same price as the other two boxes? 

Share this post


Link to post
  • 0

@rachelt

1.  

.regular-price {
font-size: 36px /* or add your font size here */
}

2. You can do this with a promo pop up: https://support.squarespace.com/hc/en-us/articles/115008375848-Creating-a-promotional-pop-up
 

3. Not sure I understand, if you want to make the price the same you update the price for the other price boxes. 


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0
Posted (edited)

Thanks so much @ryandejaegher!!!

I'd like to make the box for standard end at the same length as the other two (it's slightly shorter right now because it has one less line of font)

SharedScreenshot.jpg

Edited by rachelt

Share this post


Link to post
  • 0

@rachelt add this to your custom CSS
 

[data-section-id="5e8b998cf9fd7e2e2f4c8c69"] .row.sqs-row:nth-of-type(2) {
    display: flex;
    flex-direction:column;
}

[data-section-id="5e8b998cf9fd7e2e2f4c8c69"] .sqs-row:nth-of-type(2) .col {
    display: flex;
 
}

[data-section-id="5e8b998cf9fd7e2e2f4c8c69"] .sqs-row:nth-of-type(2) .col div {
    width: 100%;
}

@media(min-width:767px) {
[data-section-id="5e8b998cf9fd7e2e2f4c8c69"] .row.sqs-row:nth-of-type(2) {

    flex-direction:row;
}
}

Result:

image.thumb.png.23c309ca84ce45d96c27e68279368731.png


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0
Posted (edited)

Sorry @ryandejaegher a few more questions!

1) I added my promo code but it won't allow me to change the color of the bar, font text color/ size, and bar width. How do I do this? I tried doing it under custom---> design --> colors

2) I'd like to add strike out discount prices on my product pages without it actually affecting the price until I add the promo code at checkout. How do I do this on these pages?

https://naonow.com/pricing/pro

https://naonow.com/cart

 

Thanks again!!!

Edited by rachelt

Share this post


Link to post
  • 0

@rachelt for the price to dynamically show up that would require JavaScript to automatically change the price. 

These are the classes you can target to change the announcement bar


/* Font size  and centering*/
.sqs-announcement-bar-text p  {
    text-align: center;
   font-size: 20px;
}

/* Background-color and height */
.sqs-announcement-bar-text {
    background: pink;
    padding-top: 20px;   
  	padding-bottom: 20px;
}



 


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0

Ok! So there's no way to do something like this without the actual price being affected until the promo code is entered?

 

SharedScreenshot.jpg

Share this post


Link to post
  • 0

@rachelt correct not without done custom code/JavaScript which is more involved than CSS. If you really want to pursue that you can send me a message and we can discuss availability


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0
Posted (edited)

Hi @RyanDejaegher for some reason my banner looks like this in mobile now!! image.thumb.png.e5367da5a14fdcdba1d3e5df43f79d48.png😞 How do I fix it? Thanks!!

 

Also, in computer mode it's cutting off the top of some of the pages, like the home and about pages! As seen here: 

 

image.thumb.png.46ffedca42be0d94fe9a41893c67529c.png

image.thumb.png.72f2e3620ea2f43844013420f24824df.png

Edited by rachelt

Share this post


Link to post
  • 0
Posted (edited)

@rachelt you're missing a ".". Copy and paste the code above exactly

This:

.sqs-announcement-bar-text {
    font-size: unset !important;
}


Not this:

sqs-announcement-bar-text {
    font-size: unset !important;
}


 

Edited by RyanDejaegher

Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

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