Announcement

Collapse
No announcement yet.

Product Tags Overlays

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Product Tags Overlays

    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.

  • 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.
    Brennan Heyde
    VP Developer Relations
    Miva, Inc.
    [email protected]
    https://www.miva.com

    Comment


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

      Comment


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

        Comment


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

          Comment


          • 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.
            Brennan Heyde
            VP Developer Relations
            Miva, Inc.
            [email protected]
            https://www.miva.com

            Comment


            • Thank you.

              Comment


              • 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?
                Jamin Jones, CEO
                the Appalachian Offroad Motorcycle Company

                Comment


                • Hi Jamin,

                  That should be the only edit you need to do. Can you post a link to the page in question?
                  Matt Zimmermann
                  Director of UI/UX Standards and Theme Development
                  / Miva, Inc.

                  Comment


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

                    Code:
                    /* ------------------------ 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”;
                                }
                    Jamin Jones, CEO
                    the Appalachian Offroad Motorcycle Company

                    Comment


                    • 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.
                      Matt Zimmermann
                      Director of UI/UX Standards and Theme Development
                      / Miva, Inc.

                      Comment


                      • Yeh i fixed the quotes. Tip: don't use TextEdit on mac to edit code. It appears to be working now. Thanks!
                        Jamin Jones, CEO
                        the Appalachian Offroad Motorcycle Company

                        Comment


                        • 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???
                          Jamin Jones, CEO
                          the Appalachian Offroad Motorcycle Company

                          Comment


                          • 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?
                            Matt Zimmermann
                            Director of UI/UX Standards and Theme Development
                            / Miva, Inc.

                            Comment

                            Working...
                            X

                            This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                            This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                            Accept