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;
}