Hello! I have two problems in the quick add section; the button looks off and i want the badge there to look smaller or to be cut off from there
. My site is : bymo.es
Topic summary
A user is experiencing two issues with the “Complete Your Look” quick add section: the button appears misaligned, and the badge needs to be smaller or repositioned. A screenshot was provided showing the problem.
Proposed Solutions:
Three different approaches were suggested:
- Solution 1: Add custom code to the bottom of the
theme.liquidfile (above the</body>tag) - Solution 2: Insert CSS code into Custom CSS via Online Store > Themes > Customize > Theme settings, targeting
.complementary-products__containerwith a max-width adjustment - Solution 3: Modify
component-card.cssby adding code at the bottom to hide the badge using.complementary-slide .card__badge { display: none; }
All responses included code snippets, though some text appears corrupted or reversed in the original posts. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.
. My site is : bymo.es
Hey @robertsolcan
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
You can solved it by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.complementary-products__container .card--horizontal .card__inner {
max-width: 40% !important;
}
Go to online store ----> themes ----> actions ----> edit code---->find file component-card.css--------> Add this code at the very bottom
.complementary-slide .card__badge {
display: none !important;
}
Create a new Snippets-> Name :- icon-arrow → and add this code and and save it
Please let me know if you have any question
1 Like