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.
Announcement
Collapse
No announcement yet.
Product Tags Overlays
Collapse
X
-
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
-
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.
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
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
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
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
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
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
Comment
Comment