Title inline with Price product page on mobile

Store Design
, , , ,

Topic summary

A user is attempting to align the product title and price inline on mobile product pages for their Shopify store using the Taste theme. Despite multiple attempts, they haven’t been able to achieve the desired layout.

Proposed Solution:

  • Another user provided CSS code to be added to the theme.liquid file
  • Instructions include navigating to Online Store → Theme → Edit code
  • The code should be pasted before the closing tag
  • The CSS targets specific product price and info container elements with media queries for mobile viewports (max-width: 767px)

Status:
The discussion appears to have a potential solution offered, but no confirmation yet on whether it successfully resolved the issue. The implementation requires direct theme file editing.

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

Schermafbeelding 2023-12-25 om 11.59.44.jpeg
Schermafbeelding 2023-12-25 om 11.59.44.jpeg828×1792 93.5 KB

Hey, Ive been trying to make this work for AGES, but nothing seems to work! Does anyone happen to know how I can put the product title and product price inline on my product page on MOBILE ONLY? I will put an example down below! Thanks in advance!

THEME: TASTE

LINK:https://e8aaa0-3.myshopify.com/collections/exfoliate/

PASSWORD: mohwhi

2

Hello @PRETTYFRIDAYS

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 .product__info-container { position: relative; } .product .price.price--large.price--show-badge { position: absolute; top: 0; left: 313px; } }