Hi,
Currently in my theme, the related products, and recently reviewed products have a default of showing 6 images with a scroll button at the end if you want to review more.
If you do not have 6 images it will align to the left with white space behind. Is there any way to change it so all the images are centered and aligned with no space behind if you have less than 6 images
Thanks,
Gary
Hi @GaryYoungCA ,
This is Theodore from PageFly - Shopify Page Builder App.
You want to center and align product images with less than 6 in your Shopify theme.
-
CSS Flexbox (Recommended): Add custom CSS code using display: flex; and other flexbox properties to center and align the images. You’ll need to find the right CSS selector for the image container (use browser developer tools).
-
CSS Grid (Alternative): Similar to flexbox, but uses grid properties.
-
Theme Options (if available): Check your theme customizer for settings to adjust product image alignment and spacing.
Best regards,
Theodore | PageFly
Hi Theodore,
Thanks for your reply. Would you please explain further about the CSS Flexbox? How do I apply this to my theme? Where do I find the CSS code?
Please bear with me for no coding background.
Super thanks,
Gary
Hi @GaryYoungCA
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Step 3: add code into EX:
Best regards,
Theodore | PageFly
1 Like
On the page, when I click related products, on the right side is this box, can I paste the code there?
no, I’m not sure your code will work here
1 Like
@GaryYoungCA If this is the solution you want to find. Please help me resolve and like this answer so everyone can refer to it
Hi Theodor,
I followed step 1 but I can not find in the whole page, also what will be CSS code in here refer to?
Thanks,