text and price under photos

Store Design
, ,

Topic summary

Goal: On mobile, place product title (left) and price (right) on the same line beneath photos, slightly inset from the photo edges; make the price text black. Apply the same layout on product pages.

Proposed solutions:

  • Edit theme.liquid to add custom code (exact snippet not visible in the post). A screenshot shows a side‑by‑side result under images.
  • Edit theme.css/base.css to use flexbox:
    • .justify-items-center { display: flex !important; justify-items: safe center; }
    • .v-stack.justify-items-center.gap-1 { justify-content: space-between; gap: 7.25rem !important; }

Latest update: After trying suggestions, the text aligns with the photo edges; the requester wants it moved slightly inward. The price color is still dark gray; no explicit CSS provided yet to force black. Matching the product page layout to the landing page remains unaddressed.

What’s needed next: Add left/right padding or margins on the text container to create the insets, and set the price selector’s color to black in CSS. Ensure selectors apply to both the landing and product templates.

Status: Open; awaiting revised CSS/layout tweaks. Images and the missing code snippet are central to implementation.

Summarized with AI on December 13. AI used: gpt-5.
1

Hi!

discinetherlands.com

Password: joepjoep

This is regarding the landing page on phone view

I want the title of the product and the price to be on the same line under the product photos.

I want the title to be on the left and the price to be on the right. Not on the complete right or left, but just a tiny bit off the side of the right and left.

Besides that I want the price text to be the colour black, because now it is like dark grey.

If it is possible I want it to be like this on the product page as well. Now it is in the middle under the photos, but I want it to be the same as on the landing page; title left and price on the right.

Thanks a lot in advance!

1 Like
2

Hey @Disci

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1733136107580.png
Moeed_0-1733136107580.png1436×694 278 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello,

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.justify-items-center {
    justify-items: safe center;
    display: flex !important;
}

.v-stack.justify-items-center.gap-1 {
    justify-content: space-between;
    gap: 7.25rem !important; /* increase as per your choice */
}

Thanks!

4

on my screen it is still aligned to the sides of the photos, but i want it to be a tiny bit to the inside

You think you can fix this?