Instructions

Welcome to the Metamorph Categories instructions! We've got some helpful tips for you to make your category styles pop. Just follow these steps:

1. To apply a category style, simply copy and paste the code. Click the COPY STYLE button on your favorite style.
2. In your Liftoff account, go to Website > Design > CSS Override tab and paste the code at the end, after any existing styles.
3. Important things to remember:
• Use only one category style at a time. Combining whole Category Style sections may have unintended consequences.
• These CSS styles should only apply to your category boxes and shouldn't affect other parts of the site. Any global styles should still be in effect such as fonts or text colors (unless COLOR is specified in the design).
• If you had previous customizations to your categories, make sure to remove them, as these styles may not completely override them. If you're unsure, make a backup and test it. If any issues arise, undo the changes and submit a support request for us to investigate. If the issue is due to customizations on your account, we may need to provide you with an estimate to diagnose and solve the issue.
4. Each Category Style begins and ends with comments that look like this:
   
   */ BEGINNING OF CATEGORY STYLE #1 /*
   ...
   */ END OF CATEGORY STYLE #1 /*
   
   
5. When trying a new style, remove the entire section of code for the previous style. Remove everything shown above before replacing it with a new Category Style. Other styles for the rest of the site can remain in place, but ensure that you only have one CATEGORY STYLE section in your CSS Override.
6. Feeling adventurous and comfortable with CSS? You can use these styles as a starting point or mix and match effects. But remember to make a backup of the existing code, just in case!
7. If you're not confident in making edits to the CSS but want a different combination of effects or a unique style, don't hesitate to reach out to our support team. We can guide you through the process or provide a quote for a custom implementation.
8. Remember, each category style uses images, so make sure to assign an image to each parent category. You can do this by going to Products > Categories > Edit.
9. Keep in mind that some category styles use the description field, while others do not. If the style specifies "NO DESCRIPTION," it means that the design does not display that field, even if you have set it in the backend.
10. If the style specifies a color, then the CSS will include a section called VARIABLES, which is where you will enter the hex value of your desired colors.

We hope these instructions help you create stunning category styles. If you have any further questions, feel free to ask!