Change the mini cart variant text size

EBonnets
New Member
2 0 0

Hi,

I am trying to fix the way the variants are displaying in the Mini Cart. I am using the Artisan theme.  I am not super technical but I can follow directions very well.  have managed to get the image to display correctly which captures the variant selections, as well as remove some unwanted variants. 

Anyone know where I could reduce the variant font size so it doesn't wrap like it is(first photo), I would like to have the variants display like it does in the cart (second photo)

Thanks,

Pam

2021-04-26 (12).png

2021-04-26 (15).png

0 Likes
satsinghrana
Shopify Partner
118 11 16

Hello @EBonnets 

In mini cart there it not enough space thats why the text got shrinked.

If we reduce the font size it will become un readable, I suggest to adjust the cart html to 50% for image and 50% for the description(variants).

Then with some Css you can adjust the styling.

Pretty cool if you can do the code your self, or you can get in touch on below email to get the assistance.

Thanks!

If helpful then please Like and Accept Solution
Hire for Custom Shopify Solutions, Apps development or Any kind of Web development work.
Contact : satsinghrana1@gmail.com
See our Shopify Apps: HERE
0 Likes
EBonnets
New Member
2 0 0

Hi,

Thanks for getting back to me.  There should be plenty of room.  Here is the mini cart before I filtered out the unwanted variant data. You can see it was not wrapping and displayed just fine. Once I filtered out the unwanted variant data, the display of the correct variants changed.  So, what did I do???

Here is the code I have now after I filtered out the variants that had the _mzcr.  What I added is in REDEB - Mini Cart hover text removal.png

 

<div class="miniCart__itemDetails">
<div class="miniCart__itemTitle">
<a href="{{ item.url }}" class="item__link">
{{ item.product.title }}
</a>
{% unless item.variant.title contains "Title" or item.variant.title contains 'mczr' %}
-
{% for option in item.product.options %}
{{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %}
{% endfor %}
{% endunless %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank or p.first != '_mczr' %}
<div class="line-item">
{{ p.first }}: {{ p.last }}
</div>
{% endif %}
{% endfor %}
{% endif %}

 

0 Likes
satsinghrana
Shopify Partner
118 11 16

Please share the store url. Thanks!

If helpful then please Like and Accept Solution
Hire for Custom Shopify Solutions, Apps development or Any kind of Web development work.
Contact : satsinghrana1@gmail.com
See our Shopify Apps: HERE
0 Likes
freya0328
Excursionist
69 0 6

Have you solved this problem?

0 Likes