FROM CACHE - en_header
Promotion image

Product Landing Page Fix

Solved

Product Landing Page Fix

TuneToyz
Explorer
69 0 17
‎09-23-2024 09:15 PM

 

My site is TuneToyz.com and this is what the ladning page currently looks like. I want it to look more like the below image with the product being in the center of the page and being relatively larger compared to mine. I also want to make it so that Home Catalog and FAQ part shows above it(Currently you have to scroll down to make it show). Thank you!

Screen Shot 2024-09-23 at 6.14.01 PM.png

 

Screen Shot 2024-09-23 at 6.12.28 PM.png

 

 

 

Screen Shot 2024-09-23 at 6.11.49 PM.png

 

 

Labels:
380 Views
0 Likes
Report
Accepted Solutions (2)
In response to TuneToyz

Dan-From-Ryviu
Shopify Partner
9527 1913 1948
‎09-24-2024 10:44 PM

This is an accepted solution.

You have too much code in custom CSS of your theme, please add this code to theme.liquid file, in Online store > Themes > Edit code after <head>

<style>
.section-header .header-wrapper { 
    position: relative !important; 
}
.header__menu-item { 
    color: #121212 !important; 
}
#shopify-section-template--18148672340180__featured_collection_XTEyrK .grid {
    justify-content: center !important;
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

201 Views
1 Like
Report
In response to TuneToyz

Dan-From-Ryviu
Shopify Partner
9527 1913 1948
‎09-24-2024 10:58 PM

This is an accepted solution.

Code update 

<style>
.section-header .header-wrapper { 
    position: relative !important; 
}
.header__menu-item { 
    color: #121212 !important; 
}
#shopify-section-template--18148672340180__featured_collection_XTEyrK .grid {
    justify-content: center !important;
}
@media (max-width: 749px) {
    body .header__icon--menu .icon-hamburger {
        color: #000;
    }
    #shopify-section-template--18148672340180__featured_collection_XTEyrK .collection .grid__item:only-child {
        max-width: 60%;
    }
    #shopify-section-template--18148672340180__featured_collection_XTEyrK .card-information,
    #shopify-section-template--18148672340180__featured_collection_XTEyrK .card__information { text-align: center; }
}
</style>

Screenshot 2024-09-25 at 09.57.48.png

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

185 Views
1 Like
Report
Replies 18 (18)

suyash1
Shopify Partner
9851 1225 1566
‎09-23-2024 09:16 PM

@TuneToyz  are you going to have this single product on this page?

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
376 Views
0 Likes
Report
In response to suyash1

TuneToyz
Explorer
69 0 17
‎09-23-2024 09:25 PM

yes I am

367 Views
0 Likes
Report
In response to TuneToyz

suyash1
Shopify Partner
9851 1225 1566
‎09-23-2024 09:30 PM

@TuneToyz  please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

 

.product-grid{justify-content: center;}
To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
360 Views
0 Likes
Report
In response to suyash1

TuneToyz
Explorer
69 0 17
‎09-23-2024 09:33 PM

Screen Shot 2024-09-23 at 6.33.00 PM.png

hey I added it but tit didnt seem to change

358 Views
0 Likes
Report
In response to TuneToyz

suyash1
Shopify Partner
9851 1225 1566
‎09-23-2024 09:35 PM

@TuneToyz  where exactly did you add it? I am not seeing this code on browser view

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
357 Views
0 Likes
Report
In response to suyash1

TuneToyz
Explorer
69 0 17
‎09-23-2024 09:42 PM

Screen Shot 2024-09-23 at 6.42.30 PM.png

I added here 

346 Views
0 Likes
Report
In response to TuneToyz

suyash1
Shopify Partner
9851 1225 1566
‎09-23-2024 09:47 PM

@TuneToyz add closing bracket  }  to the line 3705 and check

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me
342 Views
0 Likes
Report
In response to suyash1

TuneToyz
Explorer
69 0 17
‎09-24-2024 10:40 PM

Hey,

I want it to look like this. Would you know how to do it?

Screen Shot 2024-09-24 at 7.39.51 PM.png

204 Views
0 Likes
Report

Dan-From-Ryviu
Shopify Partner
9527 1913 1948
‎09-23-2024 10:09 PM

Add this code to Custom CSS in Online Store > Themes > Customize > Theme settings. 

.section-header .header-wrapper { 
    position: relative !important; 
}
.header__menu-item { 
    color: #121212 !important; 
}
#shopify-section-template--18148672340180__featured_collection_XTEyrK .grid {
    justify-content: center !important;
}

Screenshot 2024-09-24 at 09.08.06.png 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

325 Views
0 Likes
Report
In response to Dan-From-Ryviu

TuneToyz
Explorer
69 0 17
‎09-24-2024 10:25 PM

hey,

Whenever I try to add the code I get this error 

Screen Shot 2024-09-24 at 7.24.51 PM.png

210 Views
0 Likes
Report
In response to TuneToyz

Dan-From-Ryviu
Shopify Partner
9527 1913 1948
‎09-24-2024 10:44 PM

This is an accepted solution.

You have too much code in custom CSS of your theme, please add this code to theme.liquid file, in Online store > Themes > Edit code after <head>

<style>
.section-header .header-wrapper { 
    position: relative !important; 
}
.header__menu-item { 
    color: #121212 !important; 
}
#shopify-section-template--18148672340180__featured_collection_XTEyrK .grid {
    justify-content: center !important;
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

202 Views
1 Like
Report
In response to Dan-From-Ryviu

TuneToyz
Explorer
69 0 17
‎09-24-2024 10:46 PM

Thank you so much!

194 Views
1 Like
Report
In response to TuneToyz

Dan-From-Ryviu
Shopify Partner
9527 1913 1948
‎09-24-2024 10:47 PM

Happy I could help! 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

192 Views
0 Likes
Report
In response to Dan-From-Ryviu

TuneToyz
Explorer
69 0 17
‎09-24-2024 10:50 PM

Hey theres one small problem the product appears to be too big on mobile and the menu bar on mobile is white instead of black would it be possible to fix this. I want it to look like the first image. Thanks again! 

Screen Shot 2024-09-24 at 7.50.23 PM.png

Screen Shot 2024-09-24 at 7.48.23 PM.png

188 Views
0 Likes
Report
In response to TuneToyz

TuneToyz
Explorer
69 0 17
‎09-24-2024 10:52 PM

Also would there be a way to make the price be centered?

187 Views
0 Likes
Report
In response to TuneToyz

Dan-From-Ryviu
Shopify Partner
9527 1913 1948
‎09-24-2024 10:58 PM

This is an accepted solution.

Code update 

<style>
.section-header .header-wrapper { 
    position: relative !important; 
}
.header__menu-item { 
    color: #121212 !important; 
}
#shopify-section-template--18148672340180__featured_collection_XTEyrK .grid {
    justify-content: center !important;
}
@media (max-width: 749px) {
    body .header__icon--menu .icon-hamburger {
        color: #000;
    }
    #shopify-section-template--18148672340180__featured_collection_XTEyrK .collection .grid__item:only-child {
        max-width: 60%;
    }
    #shopify-section-template--18148672340180__featured_collection_XTEyrK .card-information,
    #shopify-section-template--18148672340180__featured_collection_XTEyrK .card__information { text-align: center; }
}
</style>

Screenshot 2024-09-25 at 09.57.48.png

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

186 Views
1 Like
Report
In response to Dan-From-Ryviu

TuneToyz
Explorer
69 0 17
‎09-24-2024 11:11 PM

Thanks again!

182 Views
1 Like
Report
In response to TuneToyz

Dan-From-Ryviu
Shopify Partner
9527 1913 1948
‎09-24-2024 11:12 PM

Very welcome! 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

181 Views
0 Likes
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy