Product title above image on Enterprise Theme

Store Design
, ,
1

I’m trying to move the product title above the image on mobile only for the Enterprise theme.

Link to a product page: https://ryfie.com/collections/living-room/products/massage-recliner-chair-black-faux-leather-2

Any help would be greatly appreciated as Clean Canvas does not provide support for customization.

2

Since you’re using a premium theme, it’s going to be very unlikely that someone on here can help with this change - as it requires changing the positioning of the coding (and potentially adding a bit to make it responsive to mobile-only). Unless someone has purchased the theme themselves (and has the same version you’re using), they/we wouldn’t be able to simply post something on here that you can copy-and-paste into your theme. Whoever helps you with this will need to access your Shopify store, so that they can work with your theme’s coding directly.

Your best bet would be to hire a coder from the Shopify Partners directory to handle this for you:

https://www.shopify.com/partners/directory/services/store-setup/customize-theme

If you want to hire me, you can reach me via email Edited by Community Moderator

3

In most cases, what you’re looking for isn’t available in the theme and requires custom software intervention. But I guess today is your lucky day, so I’m sending you the following codes :slightly_smiling_face:

Add these between the or tags. Or simply add the contents of the section to your CSS and clear the caches. I’ve tested it on Google Chrome and it worked seamlessly. I placed the title directly at the top of the image, not above it. Of course, with coding, anything is possible.

These codes will only work on mobile. I recommend checking for any conflicts with other areas after testing.

If you have any questions, feel free to ask!

@media (max-width: 771.98px){ .product-info__block.product-info__block--sm.product-info__title { position: absolute; top: 0; background: azure; text-align: center; padding-top: 10px; padding-left: 10px; padding-right: 10px; width: 100% } .product-info__block.product-info__block--sm.product-info__title > .product-title { color: darkseagreen; font-family: fangsong; } .product.js-product { position: relative; } }

Terence Keane

1 Like
4

This worked like a charm. I really appreciate your help here!

5

glad to hear that :waving_hand:

6

Hi can you please send me your email address.