Product items are not displayed properly on My Wishlist page

On some Shopify Stores, we saw that the products were not getting displayed properly. Either there were alignment issues or the product title overlapped with Variant Title or Price. This was happening because the CSS of theme conflicted with the CSS of Bootstrap framework and App’s CSS.

We shall provide fix to each such problem here. In all these cases, the CSS patch is added either to Extra CSS tool or to Theme’s CSS file.

To open Extra CSS tool, visit the following location in your Shopify Admin.

Apps => Smart Wishlist => Configure Appearance => Extra CSS

Or, to access your theme’s CSS file, visit the following location in your Shopify Admin:

Online Store => Themes => Edit HTML/CSS

Go to Assets section and look for any file with extension .css.liquid or .scss.liquid. Double Click it to open and then you can make changes to it,

1. The title of product items is aligned left.

The product title should ideally remain centrally aligned. However, on some stores, it gets left aligned. This can be easily centered by adding following CSS

h3.product_title {
text-align: center !important;
}

2. Product title overlaps with the variant title or price.

We need to alter the height of product title element. By default, the height of product title is 40px.

If you want this height to be adjusted automatically, then use the following CSS.

h3.product_title {
height: inherit !important;
}

In case you want the height to remain fixed, use the following code. You can replace the “50px” below with any value you deem fit

h3.product_title {
height: 50px !important;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.