Moving product card text to be over an image?

Store Design
, , ,

Topic summary

A user wants to overlay product titles and prices on product card images, similar to a reference photo they provided. They’re considering the Stiletto theme for their Shopify store.

Key developments:

  • Initially shared preview links for an Envy theme trial, causing confusion
  • A helper confirmed this design is achievable with simple CSS in Stiletto theme, but would require code modifications in Envy theme
  • The helper provided detailed theme selection advice, emphasizing:
    • Matching theme to brand identity and product type
    • Testing mobile responsiveness (70%+ of shoppers use mobile)
    • Considering built-in features vs. customization needs
    • Checking theme support and reviews

Current status:

  • User has switched focus to Stiletto theme and is requesting specific CSS instructions
  • Multiple follow-up requests for the CSS code to implement the overlay design
  • Helper asked whether to use the user’s preview or demo store for providing instructions
  • Awaiting: The actual CSS solution has not yet been provided
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

We are after our design to look similar to the below photo where the product header and price is over the image. Is this possible? We haven’t chosen a theme yet but are thinking of using this one.

Is this something that can be easily added in through CSS?

Or does anyone know a modern looking theme that has this as an option?

IMG_1683.jpeg
IMG_1683.jpeg4032×3024 1.35 MB

1 Like
2

Hi @SundayMorning

Yes, it is possible. Let me know your store URL if you already have one.

3

Thank you, I am currently under a theme trial, here is the link to the preview.

https://3r1hbx0gjblwy88w-92213575995.shopifypreview.com

Password is sundaymorning

4

The preview link is expired.

5

Here is a new link: https://juede-official.myshopify.com/?_ab=0&_fd=0&_sc=1

6

Thanks for the info, but its password protected.

7

As mentioned above, the passowrd is sundaymorning

The site is in development so I can’t remove this password.

8

Please use this link to view the website as the theme we are using is not published yet.

https://rm3f7rlkyvulexrn-92213575995.shopifypreview.com

password: sundaymorning

9

Thanks for the info. You mentioned in your post that you are planning to use the Stiletto theme, but the preview you provided is using the Envy theme.

Paid themes have different code structures and features, so not all of them can achieve the specific design you want using CSS alone. While any theme can be customized to match your desired design, it would require a developer to modify the code according to the theme you’re using.

The Envy theme cannot achieve this design with simple CSS alone; it requires editing the theme’s internal code to implement the changes you want.

But, the Stilleto theme can do this design by simple css.

This is from the demo.

Made4uoRibe_0-1740916557808.png
Made4uoRibe_0-1740916557808.png1572×701 171 KB

My advice is to take your time when choosing a theme that aligns with both your design preferences and the products you’re selling.

**Additional Advice for Choosing the Right Theme:**1. Consider Your Brand Identity:

  • If you’re selling luxury or high-end products, go for a minimalist, elegant theme like Prestige or Stiletto.
  • If your store is more modern and dynamic, a theme like Impulse or Envy may work better.

  1. Check Built-in Features vs. Customization Needs:

    • Some themes come with advanced filtering, mega menus, or product quick views—make sure they align with what you need.
    • If a theme lacks a critical feature, check if it can be added via apps or custom code.

  2. Test on Mobile:

    • Over 70% of online shoppers use mobile devices.
    • Choose a theme with fast loading speed and a mobile-friendly layout.

  3. Check Theme Support & Updates:

    • Paid themes often have better support and regular updates.
    • Read theme reviews to see if other merchants faced any limitations.

  4. Use the Shopify Theme Trial Effectively:

    • Shopify allows you to preview a paid theme before purchasing.
    • Test different layouts, product pages, and navigation to see if it meets your needs.

Final Tip:

If you want a highly customized design, it may be more efficient to start with a flexible theme and hire a developer to make advanced modifications rather than forcing a theme to work against its core structure.

10

Thank you for this detailed response. Can you explain to me how to do this in the Stiletto theme?

11

Please let me know hot to do this in Stiletto! I have struggled to figure it out by myself and would like to know the CSS needed to do this.

12

Do you have the preview? or I will use it from the demo store?

13

Here is a link to the preview or you can use the demo store whatever is easiest. Please just let me know how to do this.

https://juede-official.myshopify.com/?_ab=0&_fd=0&_sc=1

14

Can you please use the demo store and let me know how to do this? I would love to know how to do this ASAP. Thank you!