Product Tags Overlays

[galati]

We are using Base Ready Theme and getting ready to go live. I see a few of the themes state they have product tags overlays incorporated. I cannot find any information anywhere on how to set-up product tags (sale, new, etc) in Miva, unless using one of these themes. Am I missing something? Please point me in the right direction. Thank you.

[Brennan]

These tags are custom fields at the product level. If you edit a product and go to the custom fields tab you should see a drop down where you select which tag you want to use.

[galati]

Thank you. I went into custom fields and created a new product custom field using the dropdown menu selection. I then created a few values such as new, closeout, sale, etc. I then went into the prod display and prod list pages and assigned the new custom field. I then went into the a product and selected one of the drop down selections. However, nothing shows on the product page, nor the category page listing. I must be missing a step somewhere. Is there a reference somewhere on this? Also, is there a way to edit these tags (color, etc), once we do get this working correctly?

Thank you.

[galati]

Still looking on how to set up these product tag overlays over the product picture. Is there any detailed info anywhere, as we still cannot get it work as it should. And perhaps a link to how others are using them or how they should look? Thank you.

[galati]

OK, I finally found something in the Levels instructions for Product Flags (however, we are not using Levels Ready Theme).
Is there a way to create Product Flags outside of using the Levels or Suivant Themes?
PRODUCT FLAGS 1. Go to Menu and click on “Catalog” 2. Choose a product and click on the icon with the arrow to edit 3. Click on “Custom Fields” - (if you don’t see Custom Fields, click on the “...” at the very right of the
menu and the rest of the menu will appear.) 4. Click on the “Product Flag” drop down menu, and choose which verbiage you want. 5. Click Update

Thank you for any help.

[Brennan]

The base readytheme does not have product flags built in. If you want to use them on that theme you will need to create the custom field yourselves (which is looks like you already did) then manually add the code to the category/product page to get them to display. You can reference the suivant theme for some of the heavy lifting but it is going to require editing the code and adding custom CSS.

[galati]

Thank you.

[phishbed]

While adding new product flags to custom fields in Suivant Readytheme, I updated the pages.css to include the new flag but it still doesn't show up. Is this info located in yet another css file?

[Matt Zimmermann]

Hi Jamin,

That should be the only edit you need to do. Can you post a link to the page in question?

[phishbed]

Test item: http://www.ktm-parts.com/780-0107KIT.html

/* ------------------------ product flags ------------------------ */
    .flag {
        display: block;
        overflow: hidden;
        position: relative;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
        .flag:before {
            border: solid transparent;
            border-width: 0 0 72px 72px;
            content: " ";
            pointer-events: none;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            height: 0;
            z-index: 10;
        }
        .flag:after {
            color: #fff;
            font-weight: 700;
            position: absolute;
            right: 0.50rem;
            bottom: 0.75rem;
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            z-index: 11;
        }
            .flag--new:before,
            .flag--sale:before {
                border-bottom-color: #1ac7e2;
            }
            .flag--new:after {
                content: "NEW";
            }
            .flag--sale:after {
                content: "SALE";
            }
            .flag--hot:before {
                border-bottom-color: #dd293a;
            }
            .flag--hot:after {
                content: "HOT";
            }
            .flag--2x:before {
                border-bottom-color: #ffba00;
            }
            .flag--2x:after {
                content: “2X”;
            }

[Matt Zimmermann]

Hi Jamin,

The 2X seems to be showing when I view the page in Chrome and Firefox. Is this a browser specific issue? As a side note, you should update your CSS to use standard text quotes and not smart-quotes as it may affect how the code is rendered.

[phishbed]

Yeh i fixed the quotes. Tip: don't use TextEdit on mac to edit code. It appears to be working now. Thanks!

[phishbed]

Actually I get it to work on Firefox and Safari but not chrome. I don't understand, it's the exact same code as the other flags???

[Matt Zimmermann]

Hi Jamin,

I am seeing the product flag show in Chrome, Firefox, Edge, Internet Explorer 11, and Opera. Have you tried clearing your cache and reloading the page?

[kayakbabe]

Just a note... for textEdit on mac, go into textEdit Preferences and turn off smart quotes. I have to do this on every mac I buy.