Jump to content

discount strike outs

Recommended Posts

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

Link to comment
  • Replies 23
  • Views 1.1k
  • Created
  • Last Reply

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

Link to comment

@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

👉 Squarespace Tutorials 

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

 

Link to comment

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? 

Link to comment

@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

👉 Squarespace Tutorials 

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

 

Link to comment

@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

👉 Squarespace Tutorials 

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

 

Link to comment

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

Link to comment

@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

👉 Squarespace Tutorials 

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

 

Link to comment

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

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