Shopify themes, liquid, logos, and UX
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 ⤵️
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
Hey Akshay, appreciate your input. how do we insert a image after creating a image container in that area ?
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
<div class="custom-image-container">
<img src="{{ 'your-image.jpg' | asset_url }}" alt="Your Image Alt Text">
</div>
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
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025