Product title above image on Enterprise Theme

Solved

Product title above image on Enterprise Theme

jasper11
New Member
4 0 0

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.

Accepted Solution (1)

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

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

Replies 5 (5)

StephensWorld
Shopify Partner
1390 170 350

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
Shopify Partner
511 86 78

This is an accepted solution.

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
New Member
4 0 0

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

TerenceKEANE
Shopify Partner
511 86 78

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
Shopify Partner
1 0 0

Hi can you please send me your email address.