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

Creating an 'On Sale'

1 year 9 months ago - 1 year 9 months ago #15970 by brenden
Creating an 'On Sale' was created 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

File Attachment:


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 9 months ago #15985 by Briancresswell
Replied by Briancresswell on topic Creating an 'On Sale'
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 8 months ago #16010 by 2LiveCards
Replied by 2LiveCards on topic Creating an 'On Sale'

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 6 months ago #16431 by Foutees
Replied by Foutees on topic Creating an 'On Sale'
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 6 months ago #16441 by brenden
Replied by brenden on topic Creating an 'On Sale'
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

File Attachment:


Attachments:

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

1 year 6 months ago #16445 by Foutees
Replied by Foutees on topic Creating an 'On Sale'
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 6 months ago #16453 by brenden
Replied by brenden on topic Creating an 'On Sale'
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

File Attachment:


The following user(s) said Thank You: Foutees

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

1 year 6 months ago #16454 by Foutees
Replied by Foutees on topic Creating an 'On Sale'
You're the best Brendan. Thank you from Ireland!

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

1 year 6 months ago #16455 by brenden
Replied by brenden on topic Creating an 'On Sale'
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

File Attachment:


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

1 year 1 month ago #17509 by errebipromo
Replied by errebipromo on topic Creating an 'On Sale'
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.

10 months 3 weeks ago #17756 by toffeshirts
Replied by toffeshirts on topic Creating an 'On Sale'
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.

9 months 2 weeks ago - 9 months 2 weeks ago #18105 by familyfanclub
Replied by familyfanclub on topic Creating an 'On Sale'
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.

9 months 2 weeks ago #18112 by brenden
Replied by brenden on topic Creating an 'On Sale'

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

File Attachment:


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

9 months 2 weeks ago #18114 by brenden
Replied by brenden on topic Creating an 'On Sale'

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

File Attachment:


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

1 month 3 weeks ago #21130 by DigiTees
Replied by DigiTees on topic Creating an 'On Sale'
Hi Greg,

Is there a way to put a product on sale in DN8? Please see Brenden's last comment. Cheers.

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

Time to create page: 0.269 seconds
Powered by Kunena Forum