Shopify themes, liquid, logos, and UX
Hello,
Having a hard time centering product titles and prices underneath the product images on collection pages.
I've tried adding this code to theme.scss.liquid file with no luck.
.price { justify-content: center !important; } .product-single__title { text-align: center!important; }
Theme is Debut.
I also want to reduce the size of the price font and enlarge the size of the title font.
Have any suggestions?
Solved! Go to the solution
This is an accepted solution.
@kailasachse wrote:Lol thanks!
Trying to eliminate any chance of SEO being picked up unnecessarily. 😉
Okay, replaced original price code with your suggested and it worked, but now price on product page is now centering.
How do we isolate to just the collections pages?
Also tried to add in code to eliminate underline upon hover but did not work.
Thoughts?
This is code as of now:
/*== Center Align Titles and Prices Under Product Images in Collections ==*/ dl.price { align-items: center; } .h4.grid-view-item__title.product-card__title { text-align: center; width: 100%; display: inline-block; text-decoration: none; }
to make prices left on only PRODUCT PAGE add following css
.template-product dl.price{align-items: flex-start;}
This is an accepted solution.
@kailasachse wrote:Update: I was able to center recommended products with this code:
.product-recommendations__inner dl.price { display: block!important; text-align: center; }Still not sure how to remove underlines upon hover. Any thoughts?
To remove border, try this CSS
@suyash1 would you happen to know if there is a way on the "product" page to hover over images, and then get another image to appear?
@suyash1 sorry for all the questions but on the main "homepage" how can I add another rectangle bar to "shop" tab please?
@gracema - please add this and check
.filters-toolbar__product-count {
display: none;
visibility: hidden;
}
@gracema - it is part of navigation bar, if you we make it like that then in future if you add more menu items then those too will be like that
Hello.
Thank you so much for this! Worked perfectly on my computer but it's a bit skewed still on mobile. Is there a fix for that?
Thanks!
Hi, tried countless codes from the suggestions but nothing works. Here's our website: https://thekitchenbookstore.com/
Theme is Motion
We would want to center align the product name and cost plus if we can add an "add to cart" button.
Thank you in advance.
@KBookstore - you want link this?
also add to cart can be added but will need some coding changes
Anyone know how to center my reviews under my title? The review is from an app called Judge.me.
Here's my website: pampasgal.com
Thanks for sharing the codes, I have tried a dozens and this is the only one works.
The title and price on collection page is finally center, but the code also center the price on product pages, is there any way to keep the price left on product page?
Thank you!!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024