Shopify themes, liquid, logos, and UX
I would like to make the images on the blog posts section to be square not rectangle. i am using dawn theme.
see below ref:
To make the images on the blog posts section square instead of rectangular in the Dawn theme, you can follow these steps:
1. Log in to your Shopify admin.
2. Go to "Online Store" and select "Themes."
3. Find the Dawn theme and click on "Actions" > "Edit code."
Now, you'll need to make changes to the code to adjust the image display. Here's a general guide, but please note that the exact code and file location may vary based on your theme version and customization:
4. In the code editor, navigate to the "Templates" folder and find the file related to the blog posts. It might be named something like "blogs.liquid" or "article-template.liquid."
5. Look for the code that generates the blog post images. It might look something like this:
```liquid
{% for image in article.images %}
<img src="{{ image | img_url }}" alt="{{ image.alt }}" />
{% endfor %}
```
6. To make the images square, you can add CSS styling to the `img` element. Modify the code to look like this:
```liquid
{% for image in article.images %}
<img src="{{ image | img_url }}" alt="{{ image.alt }}" style="width: 100%; height: auto; object-fit: cover;" />
{% endfor %}
```
7. Save the changes to the file.
After making these changes, the blog post images should be displayed as squares. The `object-fit: cover;` CSS property ensures that the image fills the available space while maintaining its aspect ratio.
Remember to preview and test your changes to ensure they work as expected. If you encounter any issues or have further customization needs, you may consider reaching out to a Shopify expert or the theme's support for more specific guidance.
thanks @PMike but i cannot find "blogs.liquid" or "article-template.liquid." in my codes
or the blogs codes do not have the coding
{% for image in article.images %}
<img src="{{ image | img_url }}" alt="{{ image.alt }}" />
{% endfor %}
Hi @Montique,
Make sure you add featured image of blog is square image and then go to your Online store > Themes > Customize > click dropdown menu at the top > Blogs > Default blog > Blog posts > Featured image height > Adapt to image
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
thanks @Dan-From-Ryviu but this is for the "more blogs" section not the feature blog page.
my only options on the section are heading size and what blog to link to... i think it would require css change
I have a different problem. I did two blog posts last week in the Dawn theme and used the Insert Image button on the post page to put a small photo at the top of the pist - NOT the featured image which is WAY too big! I tried to do the same today and for some reason the Insert Image button does NOTHING! WTH???
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024