Creating your Online Shop: Blurred Gallery Product Pictures (Wordpress+Astra Theme)

blog cover image
7
210 followers

Hi WA Family, how are you doing?

I am busy creating my website for my fabrics shops with an ONLINE SHOP for physical products.

There is the thing: while here at WA, most of the people are creating an online shop for affiliate products (very easy and basic), those like me who are selling physical products, need a more sophisticated shop (which is actually more complicated to build).

I have spent the WHOLE week trying to solve a technical problem which made all my gallery photos totally blurred. How could I accept that? What could a customer think watching a product page with blurred pictures?

First, I googled to understand if it was my problem or a general technical issue.

I discovered it was caused by a problem of integration between Wordpress and Astra.

I read all that I could find on internet, wrote to Astra support (who reply me with a answer I found on another forum), but nothing was working on my case.

Having worked for more than 10 years in a IT company, I don't give up easily on these things. I remembered my team leader's words: "Guys, let's create a work-a-round!" :)

So this is my work-a-round for this technical problem:

  1. Install Astra's CHILD THEME (I will write another post on child themes) > activate it
  2. Install the Plugin PRODUCT VIDEO GALLERY FOR WOOCOMMERCE
  3. Go on ASTRA Child Theme > CUSTOMIZE > WOO > SINGLE PRODUCT PAGE
  4. Container layout > choose the second
  5. Container style > Unboxed
  6. Sidebar layout > chose the first
  7. Sidebar style > default
  8. Gallery layout >choose the first
  9. Thumbnail colums > choose the third
  10. Enable zoom effect > yes
  11. Image width > 35%
  12. Product description > choose the first

By doing this way, not only I was able to obtain very crisp gallery pictures, but at the same time, I was able to upload in my product gallery a YOUTUBE SHORT that people can watch without leaving my site.

This is the product page I created: https://tessutiafricani.com/product/tessuto-wax-print-rosa-motivo-floreale-stilizzato/

Let me know your opinions! And if you are creating your online shop and have any issues, let's keep in touch! Two brains think better than ones :)





Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training

Recent Comments

27

Hi Romy, congratulations on your work around, most impressive, especially incorporating the YouTube short into your gallery..it looks so good!

Just one observation for you to double check, some of the images on your about me page look like they have some formatting errors in terms of size and misaligned text...I did visit your site using 2 different browsers to rule out a browser issue.

You are using Astra which is very smart of you, it's fast and extremely lightweight. Your site is looking very slick and professional. Great work 👍

Thank you so much for the feedback on my about me page! I will surely revisit it and work better on the pictures!!

Yeah, adding the youtube shorts to gallery is a win-win! You increase the views of your shorts and in the same time, you serve better the customers by providing more pictures of the product (consider that - for having a cohesive look of the product page, you have only 4 slots in the gallery, one already occupied by the main picture, so the remaining three must be used properly!)

Thanks for sharing how you did the work around. I should write them down when I create these little work arounds because I can't remember what I did to fix the problem when it arises again!

Glad you got this sorted out. The page looks nice!

Karin

I have created my personal WIKI on Notion! It is extremely useful to keep all your notes, manuals and any other resource well organized there!

Great job, Romy!! 👍👍😎

On my Chrome (US) browser, you have some additional white space under CARATTERISTICHE TESSUTO.

Is that showing up for you?

Frank 🎸

yes :((( and there is no way to get rid of it!!! if I remove that space, the following words will be so attached to the title and the effect is even worst! I tried every possible title from h1 to h6!

Better this than the impossible blurred pics!

Hi Romy

I use GenerateBlocks Pro, which lets me create a separate container for list blocks and then adjust the padding and margins.

A potential workaround could be to take a screenshot of the list bock and save it as a .jpg file. Then load the list as an image block under the CARATTERISTICHE TESSUTO header. It's additonal work, but something to consider.

See attached image.

Frank 🎸

yeah it is a good work-a-round (I want a t-shirt with this slogan: "I am a workaround person!Lol")

I will prepare a screnshot because I need other plugins for my catalogue!

Thank you big brother Frank! :)

Great additional info Frank... I did not know that!

Rock On!!

👍😎🎸🍻

You're welcome, Romy! 😎

"Workaround people" are the best!

Maybe you could make the T-shirt out of your fabric. Lol 🤣

Take care, My Italian Friend! 🇮🇹
Frank 🎸

Thanks, Nick! 🙏

You might be surprised at what Rock guitar players know! Lol 😂🤣

Frank 🤘🎸

Starting a new collection right away! Lol!!!

Not when it comes to you Frank...

You are a wealth of knowledge my friend!!

👍🎸😎🍹

Nice!

I knew you'd love that idea!! Lol 😂 🤣

Thanks, Nick! 😎 🙏

Yeah, I have lots of crazy things floating around in my head! Lol 😆

Lol! Always connected Frank!!!

Yup! 😎😎

As do I Frank!!

🤣👍🍻

Very well done, my friend!

Jeff

hope this work around could help someone else too!

I am certain that it can!

Jeff

Great going Romy! Many would've given up but you found a workaround and persevered!

All the very best moving forward my friend! :-)

Thank you so much!! I am really putting all my blood in this website because I understood its potential thanks to WA family!!!

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training