Product title above image on Enterprise Theme

jasper11 · ‎02-03-2024

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.

TerenceKEANE · ‎02-03-2024

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 🙂

Add these between the <head> or <body> tags. Or simply add the contents of the <style> </style> 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!

<style>

@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;

}

</style>

Terence Keane

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

StephensWorld · ‎02-03-2024

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**

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

TerenceKEANE · ‎02-03-2024

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 🙂

Add these between the <head> or <body> tags. Or simply add the contents of the <style> </style> 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!

<style>

@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;

}

</style>

Terence Keane

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

jasper11 · ‎02-03-2024

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

TerenceKEANE · ‎02-04-2024

glad to hear that 👋

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

ohboost · ‎04-24-2024

Hi can you please send me your email address.

Product title above image on Enterprise Theme

Product title above image on Enterprise Theme

Community Blog Articles