Change Kiwi Size app position on product page & optimize the shape of a badge

[BettoM14]

Hi,

I've got the following situations where i need help with.

1. I want to change the position of the Kiwzi Size Chart on my product page. It has to be compatible for desktop and mobile of course. Here is an example of where i want it to be:

2. I want to re-shape and change the position of the discount badge on the different collection listings. This also needs to be compatible for desktop and mobile. Here is an example: 

My webshop url is www.asam-e.com.

Who is able to help me :)?

[theycallmemakka · Accepted solution]

Hi @BettoM14 ,

The Kiwzi Size Chart edit will require more time as it involves working at the theme level. I couldn't dedicate much time to it. However, I have written custom CSS for the second fix, which is the 'discount badge'.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.card__badge.right {
    left: 0;
    position: absolute;
    top: calc((var(--image-padding) + 1rem) * -1);
    margin: 0px;
    padding: 0px;
    border: transparent;
    line-height: 1;
}

.badge {
    border-color: transparent;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[theycallmemakka · Accepted solution]

Hi @BettoM14 ,

The Kiwzi Size Chart edit will require more time as it involves working at the theme level. I couldn't dedicate much time to it. However, I have written custom CSS for the second fix, which is the 'discount badge'.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.card__badge.right {
    left: 0;
    position: absolute;
    top: calc((var(--image-padding) + 1rem) * -1);
    margin: 0px;
    padding: 0px;
    border: transparent;
    line-height: 1;
}

.badge {
    border-color: transparent;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[BettoM14]

Thanks for the help @theycallmemakka. I appreciate it :)!

There is still maybe one little thing where i can use your help with.  

I can't get rid of the collection grids on my product pages. On the main page there is no grid, because i chose for it. But the option to hide it on the product page isn't available. I tried many things, but couldn't find a solution in the settings of the template.

Here is the example of the homepage and product page:

Homepage:  

Product page:

Is it possible for you to help me with this?

[theycallmemakka · Accepted solution]

Hi @BettoM14 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
slider-component .card {
    background-color: transparent;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[BettoM14]

Thanks a lot @theycallmemakka !!!