change format of product name

Store Design
,

Topic summary

A store owner wants to modify the product name and price formatting on their Shopify store to match a specific design shown in an attached image.

Requested Changes:

  • Product names in uppercase
  • Bold pricing
  • Adjusted font weight and letter spacing

Solutions Provided:

Two community members offered CSS code snippets to add to the theme files (base.css/main.css):

  1. Initial solution included uppercase text transformation and bold font weight for both product names and prices
  2. Follow-up adjustments addressed concerns about the price appearing too dark/bold
  3. Modified code reduced font weight from bold to 400 for a lighter appearance while maintaining uppercase formatting

Current Status:

The discussion includes working CSS solutions with visual examples. The store owner expressed concerns about darkness/boldness of pricing, prompting refinements to the font-weight values. Implementation requires editing theme CSS files through the Shopify admin panel.

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

I want the text for product name on my store https://swawe.store/
to look like this in the image attached and the price also to be bold as the image attached

Screenshot 2024-07-24 at 14.00.05.png
Screenshot 2024-07-24 at 14.00.05.png2822×738 435 KB

2

Hi @attackon ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Add code below to end of file
.product-card-wrapper .card__heading {
	text-transform: uppercase;
  	letter-spacing: 0;
}
.card-information .price > * {
	font-weight: bold;
}
3

can fans weight be made a little less bold because it is too dark now

4

Hi,

What do you mean?

5

Hi @attackon ,

Please see the solution below:

  1. In your Shopify admin, navigate to “Online Store” under Sales Channels. Click the three dots next to the theme you wish to edit, then select “Edit Code”.

  2. Next you can find Main.css/theme.css/base.css/style.css(it will be based on your theme file).

Add this css code:

.card__content h3 {
text-transform: uppercase;
font-weight: 400;
}
.card-information {
font-weight: bold;
}

Result:

Sweans_0-1721810650188.png
Sweans_0-1721810650188.png1884×565 142 KB

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

6

it looks very dark the price section, can it be less dark or bold

7

Hi,

Code above included bold for price.

EBOOST_0-1721812485519.png
EBOOST_0-1721812485519.png1234×107 2.76 KB

You can try add code below:

.card-information .price > * {
letter-spacing: 0;
color: #000;
}