Product page customisation - Prestige Theme

Store Design
, ,

Topic summary

A user is experiencing inconsistent spacing between the subtitle and SKU fields on product pages using the Prestige theme. Products without subtitles display correct spacing, while products with subtitles show excessive gaps between the subtitle and SKU.

Issue Details:

  • The problem appears to be mobile-specific (max-width: 767px)
  • Screenshots demonstrate the spacing difference between products with and without subtitles

Proposed Solutions:
Three community members offered CSS fixes targeting the gap:

  1. Tech_Coding: Add CSS to theme.liquid before </body> targeting .product-info__block-list with margin-block-end: 4px

  2. GTLOfficial: Insert CSS into theme.css targeting elements at max-width 667px with display: none

  3. websensepro: Add CSS to theme.liquid before </head> targeting product info blocks with product-info-gap: 0rem

All solutions involve adding custom CSS code through the theme editor. The discussion remains open with no confirmed resolution indicated.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hello Everyone, I need help fixing the gap between the Subtitle and SKU, For products where there is only Title and not having subtitle it has accurate gap, But products having subtitle has extra space between Subtitle and SKU.

Please check the screenshots for reference.

Product which do not has Subtitle :down_arrow: :

learnify_0-1726205735340.png
learnify_0-1726205735340.png568×1011 87.3 KB

Product which has Subtitle :down_arrow: :

learnify_1-1726205811832.png
learnify_1-1726205811832.png568×1011 90.2 KB

Store Link: https://9bqeh5vkg9lyaw3p-34794897548.shopifypreview.com

Thanks in advance.

2

Hello @learnify

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .product-info__block-list>:not(:last-child) { margin-block-end: 4px !important; } }

Tech_Coding_0-1726206761762.png
Tech_Coding_0-1726206761762.png319×197 7.01 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Hello @learnify
Go to online store ----> themes ----> actions ----> edit code---->theme.css
add this code at the end of the file.

@media (max-width: 667px) {
.loox-rating {
display: none !important;
}
}

result

4.png
4.png481×470 122 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi @learnify ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
@media screen and (max-width: 767px){
.product-info__block-item:is([data-block-type=text]) {
    --product-info-gap: 0rem;
}}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!