× Got a CSS, HTML or webdesign question? Ask it here!

Creating an 'On Sale'

1 year 6 months ago - 1 year 6 months ago #15970 by brenden
Hi,

We had a client ask is there an easy way to create an 'On Sale' type panel for decorated products.

I suggested the following:

1. Edit the Decorated Product and check the 'Featured Product' checkbox.
2. Edit your Home page and Activate the 'Extra's panel. Turn off all options in this panel except the 'Featured Products' tab.
3. Add the following CSS to your site:
#feature_featured .block {
    position: relative;
}

#feature_featured .block::after {
    background-image: url("/uploads/10343058/File/sale_ribbon_left.png");
    background-repeat: no-repeat;
    background-size: 90px auto;
    content: "";
    height: 90px;
    left: -5px;
    position: absolute;
    text-align: center;
    top: -5px;
    width: 90px;
}

#tab_featured a {
    text-transform: capitalize;
}

#tab_featured a::after {
    content: " on sale!";
}

#feature_featured .det_price {
    color: red;
    font-size: 1.2em !important;
}

This will:

- Make an 'On Sale' banner on the product.
- Highlight the price in red.

See decodemo.secure-decoration.com/ as an example.



Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Attachments:
The following user(s) said Thank You: Thread Cred, 2LiveCards, Briancresswell, mycompanyapparel

Please Log in or Create an account to join the conversation.

1 year 6 months ago #15985 by Briancresswell
Can this be done on the plain garments as well ? and is there a way to display rrp or previous price.

Please Log in or Create an account to join the conversation.

1 year 6 months ago #16010 by 2LiveCards

brenden wrote: Hi,

We had a client ask is there an easy way to create an 'On Sale' type panel for decorated products.

I suggested the following:

1. Edit the Decorated Product and check the 'Featured Product' checkbox.
2. Edit your Home page and Activate the 'Extra's panel. Turn off all options in this panel except the 'Featured Products' tab.
3. Add the following CSS to your site:

#feature_featured .block {
    position: relative;
}

#feature_featured .block::after {
    background-image: url("/uploads/10343058/File/sale_ribbon_left.png");
    background-repeat: no-repeat;
    background-size: 90px auto;
    content: "";
    height: 90px;
    left: -5px;
    position: absolute;
    text-align: center;
    top: -5px;
    width: 90px;
}

#tab_featured a {
    text-transform: capitalize;
}

#tab_featured a::after {
    content: " on sale!";
}

#feature_featured .det_price {
    color: red;
    font-size: 1.2em !important;
}

This will:

- Make an 'On Sale' banner on the product.
- Highlight the price in red.

See decodemo.secure-decoration.com/ as an example.



We'd like to find a way to differentiate certain products in the listings...............
"Recommended" & "Budget" come to mind immediately :) Is there a way of doing this without having to upload the sales image with the banner already on there?

cheers

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16431 by Foutees
Hi Brendan,
Great post and great idea however I was just wondering is there a way to make it so this also is shown when looking on a mobile device? I tried copying it into the mobile CSS tab but that didnt work.
Also how can I change the text from Featured Products to On Sale or something similar as the above code didn't change it.
Thank you.

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16441 by brenden
Hi there,

Glad you like the tip!

I did a quick test on my mobile and I could see the 'sale' sticker. See:



One other thing I did notice: See how your sale sticker is covered by a white line? This is from the image thumbnail cover.

Make one small change to the CSS and add:
.row li a.over {
    box-shadow: 0 0 0 1px transparent inset, 0 0 20px rgba(0, 0, 0, .1) inset;
}

This changes the box-shadow from being a white line to transparent.

Then you'll be good to go!

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Attachments:

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16445 by Foutees
Hi
I feel silly now I had forgotten to clear the cached data on my phone even though I had done it on my PC.
What about changing the "Featured" title to "On Sale" is that possible?
Thanks so much for the other change its much appreciated and it looks so much better. I think I may need to study up on my CSS so I'm not bothering you guys any more!
Aoife

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16453 by brenden
Hi,

Try adding this:

.column_a div:nth-child(3) h3 {
    visibility: hidden;
}
.column_a div:nth-child(3) h3::before {
    content: "Items on sale!";
    visibility: visible;
}

Now keep in mind this only works on your site as it's created to suite how you currently have the divs setup. If you change the layout of your site you'll need to change the CSS to match.

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



The following user(s) said Thank You: Foutees

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16454 by Foutees
You're the best Brendan. Thank you from Ireland!

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16455 by brenden
Any time! BTW a fun site to get your head around the awesomeness of CSS is css-tricks.com/

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

10 months 1 week ago #17509 by errebipromo
Hi Brenden,

Is it possible to apply it on a blank product's category?

Please Log in or Create an account to join the conversation.

8 months 3 days ago #17756 by toffeshirts
Which store template did you use here?

decodemo.secure-decoration.com/

Tnx for the reply!

Nick

Please Log in or Create an account to join the conversation.

6 months 3 weeks ago - 6 months 3 weeks ago #18105 by familyfanclub
Is it possible to designate which products within a category are on Sale or is the only way currently to do an entire section? I figure we'd need more access to the Product Category html to identify products on a case by case basis that we want to be on Sale vs. the entire category. See attachment for an example of what I'm talking about, where there are 3 products in the section, but only 2 are on sale.

It would be great if that was one of the levers we could pull with DN8 and customize the text. So instead of Sale, could say Personalize for example.

Attachment not found

Attachments:

Please Log in or Create an account to join the conversation.

6 months 3 weeks ago #18112 by brenden

toffeshirts wrote: Which store template did you use here?

decodemo.secure-decoration.com/

Tnx for the reply!

Nick


Hi Nick,

This store is using the new 'Clean Responsive' template.

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

6 months 3 weeks ago #18114 by brenden

familyfanclub wrote: Is it possible to designate which products within a category are on Sale or is the only way currently to do an entire section?


Hi,

At present this is the only way. But we are exploring options for DN8 to allow products to be put on sale using a true 'On sale' flag so CSS hacks like this are not needed.

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

Time to create page: 0.396 seconds
Powered by Kunena Forum

Latest from our blog

DecoNetwork 8 - Update 3: GDPR Compliance (+56 tasks completed)

DecoNetwork 8 - Update 3: GDPR Compliance (+56 tasks completed) In this release, DecoNetwork updated its Privacy Policy and Terms of Use, effective May 23, 2018. These changes were made primarily in preparation...Read More

This Week in Catalog - May 18, 2018

This Week in Catalog - May 18, 2018 I have two big announcements to make in regards to the DecoNetwork catalogs. We read and listen to your complaints and suggestions. Recently, I...Read More

DecoNetwork 8 - Available Now!

DecoNetwork 8 - Available Now! After an incredible amount of work in design, development, and testing, DecoNetwork 8 is here! With version 8, we recommitted ourselves...Read More

This Week in Catalog: May 11, 2018

This Week in Catalog: May 11, 2018 Lately, we've been getting a lot of new products in each week. More than is typical. All those new products (mostly in the S&S Activewear...Read More

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75 tasks implemented)

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75  tasks implemented) DecoNetwork 8 was released just ten days ago, but we have already a second update (8.002) available for you with many improvements and fixes...Read More