How to change the featured image size of blog posts in blog template?

AliceDo
New Member
6 0 0

Hi everyone, since my featured image of blog posts is too huge right now, I would like to ask how I can change this.

Currently, the width is about 1296 pixels and I want to change it to 900 pixels. Please help to support. Thanks a lot!  

FYI, here is my blog page: https://upfos.com.vn/blogs/tin-tuc

 

0 Likes
Mac
Shopify Staff
Shopify Staff
131 15 17

Hi, @AliceDo ! 

Thanks for reaching out in our Community forums and for sharing your concern, I’d be happy to help.

I understand that you would like to reduce the width of your featured image on your blog post to improve visibility. Depending on your theme, you have a few options to achieve this customization. 

Your first option would be to reach out to your theme developer and see if they can provide a step by step guide on how to change this line of code manually. Check out our Help Center resource here to learn how to contact your theme developer. 

Depending if the theme developer can provide you with the code, another option would be to work with Shopify Experts for a more customised solution. This is a marketplace that connects you to professionals in a variety of fields related to your e-commerce business. Doing so will allow you to outline your exact requirements and specifications to create the perfect product page. If you would like to know more about finding the right Expert, please click here.

You can also try to implement this customisation yourself at your own discretion. Please be sure to create a back up before attempting to make changes to ensure that you can revert to your original theme file. Here are the steps: 

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:

@media (min-width: 900px){

     #shopify-section-blog-template .blog-list-view .page-width{

     max-width: 900px;

     width: 100%;

     display: block;

     margin: 0 auto;

}

}

Please let me know which solution works best for you! 

I’d love to know more about your business! What is your goal with blog posts and what are your plans to get customers on your page?

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
made4Uo
Trailblazer
269 10 64

Hi @AliceDo ,

I assume you know coding. You dont have to change your image. You just have to change the max-width of your iframe image. 

In your Asset folder. Find the code below. You can change the max-width to make your image smaller but. This will make your image way not centered, 

iframe, img {
max-width: 100%;
}

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
AliceDo
New Member
6 0 0

Hi, @Mac , thank you a lot for your supportive help. 

For some reason, currently, I am having limited contact with the theme developer, so I decided to figure out the way by myself if can be.

I have tried the code, but unfortunately, nothing changed after. 

About my business, my goal of blog posts is focusing on branding, and two main ways to approach customer is SEO and social sharing.

Thank you again, I very much appreciate your help!

0 Likes
AliceDo
New Member
6 0 0

Hi @made4Uo ,

Thank you so much. Since I know very little about coding, just at the level of copy & paste (lol), so I want to reduce the risk that I might cause. 

I tried to file the code you shared me in Assets folder but I do not know which particular asset the code is placing at. 

0 Likes
made4Uo
Trailblazer
269 10 64

@AliceDo Oh. At the Asset folder, find the theme.css file. Then you can paste the code below. This will make your image smaller but it will bring it to the left side. It will need more coding though since your image is in absolute position. 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
AliceDo
New Member
6 0 0

@made4Uo I see. Yes, you're right. This can make the image be smaller but it moves to the left & top side and leaving a space beside. 

0 Likes
made4Uo
Trailblazer
269 10 64

@AliceDo . This require more coding since your image is positioned absolute. I can give you directions on how to change it but it requires coding knowledge

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
Mac
Shopify Staff
Shopify Staff
131 15 17

Hi again, @AliceDo 

Thank you so much for reaching back out and sharing more context. I’m glad to see that @made4Uo  is able to provide some additional guidance on how to make this customization. 

You also mentioned that you have limited contact with your theme developer. Are you currently working with a developer from our Theme Store? If so, feel free to reach out to our Help Center and we’d be happy to continue assisting you through live chat, email, or callback to reach out to the developer on your behalf. 

It’s great to hear that you are using organic ways to attract customers. Adding a blog helps you tell stories that convert visitors into customers, increase engagement and improve your store’s SEO. Feel free to check out this resource on How to Start a Blog to view a step-by-step guide on what content to write about. Also, social sharing is a highly effective way to attract local customers to your store through growing your social media presence. This can be done by creating curated, relevant and local content as much as possible. Click here to learn more about creating a social media marketing strategy.

I would also like to know if you have considered running social media advertisements through Facebook, Instagram, or Google? Doing so will allow you to create highly targeted campaigns based on specific demographics and geographic conditions to ensure that you are advertising to the correct customers. For more information on this, along with a variety of marketing campaign ideas, check out our Shopify Blog here.  

Let me know if this helps and we can continue our conversation regarding targeted ads!

Mac | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes