Only if you know Shrine PRO 1.0.1

[GulfGate1]

I would like to add an image to the right of the homepage just in-line with the text on the left.
The theme is Shrine Pro 1.0.1.

If you know how to obtain the results that im looking for, your help would be highly appreciated.
Image has been attached below

[akshay_bhatt]

hey @GulfGate1 ,

first of all you need to change the css.

follow these steps

online Store > Themes

Actions > Edit code

in the assets folder, find the theme.scss.liquid or similer css file

add the custom css attached below.

.image-with-text {
    display: flex; /* Makes the image and text side by side */
    align-items: center; /* Vertically centers the items */
}

.image-with-text img {
    max-width: 100%; /* Ensures the image doesn't exceed the container width */
    height: auto; /* Maintains aspect ratio */
    margin-left: 20px; /* Adjusts space between text and image */
}

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

[GulfGate1]

Hey Akshay, appreciate your input. how do we insert a image after creating a image container in that area ?

[akshay_bhatt]

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