How can I customize my product page to look like this picture?

Store Design
, , ,

Topic summary

A user seeks help customizing their Shopify product page layout to match a specific design shown in an attached screenshot. They provide their store URL as a reference.

Another user responds with a CSS-based solution:

  • Navigate to Themes → Edit Code → Assets → base.css
  • Add custom CSS code at the bottom of the file
  • The code targets product media galleries for screens wider than 990px
  • Modifies the display to use CSS Grid with specific column templates and gap spacing
  • Sets media items to 100% width

The discussion remains open, as the original poster hasn’t confirmed whether the solution worked. The proposed fix involves direct theme file editing, which requires some technical knowledge of CSS and Shopify’s theme structure.

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

Hi Guys,

I want to make the product page similar to the attached photo. Please see the screenshot for a better understanding. I would appreciate your help.

Thanks in advance.

URL: https://basicbastard.co/products/bleep-off-tee

Untitled design.png
Untitled design.png1920×1080 43.8 KB

2

Hi @basicbastardco
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

@media screen and (min-width: 990px){
.product__media-gallery .product__media-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.product__media-gallery .product__media-list .product__media-item {
width: 100%;
max-width: 100%;
}
}
1 Like