discount strike outs

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

Like this?

Just updated the guide.

@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?

@rachelt, did you create those price tables with markdown? If so you could add your discount price to the markdown table and then add a class to style the discounted price. 

 

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? 

@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)

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? 

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

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)

@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:

Thank you SO much!!! 

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

@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;
}

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

@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

@ryandejaegherHow do I make this announcement bar text look better in mobile mode? (Without overlapping text) 
 

@rachelt

@media(max-width:767px) {
.sqs-announcement-bar-text p {
    font-size: 16px !important;
    line-height: 1.4;
}
}

Hi @RyanDejaegher for some reason my banner looks like this in mobile now!! 😞 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: 

@rachelt for some reason the font-size is large for the close button. 

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

Result:

Hi @RyanDejaegher just added in that code but didn't see anything change! Do I need to edit previous ones too? Thanks!!

@rachelt can you share a screenshot where you added the code? It doesn't appear to be added on the live site

Here!  @RyanDejaegher

@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;
}

Hi @RyanDejaegher sorry to message again! But still some issues with this, such as in Korean mode such as here: