How do you center the Featured Product? Taste Theme

Store Design
, ,

Topic summary

A user seeks help centering the Featured Product section in Shopify’s Taste Theme.

Initial Problem:

  • Featured Product display is not centered
  • User provides store URL and screenshot showing the alignment issue

Proposed Solution:
A community helper suggests adding CSS code to the theme’s stylesheet:

  • Navigate to: Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add specific CSS targeting the featured product grid with justify-content: center !important

Resolution:

  • Initial attempt placing code in the suggested location did not work
  • User successfully resolved the issue by adding the CSS code to a different file location instead
  • The helper confirms this alternative approach is valid, noting the code can be placed in either the liquid file or the section-main-product.css file

Status: Resolved through alternative CSS file placement.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

How do I make it go to the center? Taste Theme.

ex2.PNG
ex2.PNG1596Ă—885 170 KB

1 Like
2

Hi @ABash

Would you mind to share your store URL?

3

churchcaps.com

1 Like
4

Thanks for the info, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.featured-product.product.product--small.grid.grid--1-col.gradient.color-background-1.product--left.isolate.grid--2-col-tablet {
    justify-content: center !important;
}

And save.

Result:

Made4uoRibe_0-1705445149267.png
Made4uoRibe_0-1705445149267.png1686Ă—633 91.3 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Did not work. :disappointed_face:

6

ABash_0-1705445787464.png
ABash_0-1705445787464.png1635Ă—569 38.4 KB

I added your code here instead and it worked. Thanks :grinning_face_with_smiling_eyes:

7

Yes, that is the style for liquid file but you can paste it there. You can also paste it on the section-main-product.css.

Good thing the code work but in the different file. Please atleast likes the post. Thanks!