Only if you know Shrine PRO 1.0.1

Store Design
, , , , ,

Topic summary

Goal: place an image on the right side of the homepage, aligned inline with text on the left in the Shrine Pro 1.0.1 theme.

Proposed approach (CSS):

  • Make the text-and-image block a flex container (.image-with-text) for side-by-side layout and vertical centering.
  • Constrain the image (max-width 100%, height auto) and add spacing (margin-left).

How to insert the image (theme editing steps):

  • Online Store > Themes > Actions > Edit code.
  • Find the correct Liquid template/section for the homepage (e.g., index.liquid; or sections like image-banner.liquid, custom-content.liquid).
  • Add a custom HTML image container and reference the uploaded asset (replace the filename; include an alt attribute for accessibility/SEO).
  • Upload the image under Assets.

Additional styling (CSS):

  • .custom-image-container to center and size the container; nested img set to width: 100% with object-fit: cover.

Notes:

  • The screenshot and CSS/HTML snippets are central to implementing the layout.
  • No confirmation of success from the requester yet; the thread appears open/ongoing without a final resolution.
Summarized with AI on December 16. AI used: gpt-5.
4

hi @GulfGate1 ,

by adding custom HTML and CSS you can do it.

follow these steps

Online Store > Themes, click Actions > Edit code

Locate the Relevant Template or Section

If you’re adding the image to a specific page (like the homepage), locate the correct Liquid template or section. Common files include:

Templates: index.liquid (for homepage),product.liquid (for product pages), etc.

Sections: image-banner.liquid , custom-content.liquid, or any relevant file for the section you’re working with.

add the image container attached

Replace ‘your-image.jpg’ with the correct image filename. Upload the image in Assets by going to the Assets folder and uploading the image there.

The alt attribute provides a description of the image for accessibility and SEO.

now add custom CSS in theme.scss.liquid file

.custom-image-container {
    max-width: 100%; /* Adjust width as needed */
    height: auto;
    margin: 0 auto; /* Centers the image container */
    text-align: center;
}

.custom-image-container img {
    width: 100%; /* Ensures the image fills the container */
    object-fit: cover; /* Ensures the image covers the container without distortion */
}

save the changes.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Regards

Akshay bhatt