Our store is in Icon theme which has a few settings for the pop-up but not size. I have searched for and tried a few css solutions within both Shopify help and the community but none so far has worked. I am able to change the content and layout of the pop-up window by changing the code but I can’t find a way to make the window itself smaller. Very grateful for any suggestions!
Topic summary
Problem: Reduce the size of a newsletter pop-up in the Icon theme. Prior CSS attempts failed; content/layout could be edited, but not the window size.
Proposed solutions:
- Edit stylesheet.css and apply a CSS transform to the Fancybox container: add “.fancybox-skin { scale: 0.8 !important; }”. The scale value can be adjusted to control overall popup size. Steps and screenshots were provided.
- Add custom code in theme.liquid before the tag to resize the popup (exact snippet not shown in the thread).
Outcome:
- The store owner confirmed both approaches worked and they could fine-tune the pop-up dimensions.
Notes:
- “fancybox-skin” is the modal’s wrapper class (Fancybox library). “scale” is a CSS transform that uniformly resizes the element.
- Images/screenshots were included to illustrate the file path and the resized result.
Status: Resolved; no remaining questions or disagreements.
Hello @TheRedPeril ,
Yes, you can reduce the size of popup. You just need to place the below code into theme.liquid file before tag.
Go to Shopify Dashboard then choose Online Store > Themes > Edit Code. Then you need to find the theme.liquid file and paste before tag.
If you still need any further help, please feel free to reach out to me.
Regards,
Osama Farooqi
1 Like
Hi @TheRedPeril ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file stylesheet.css. And add this code snippet to the end of the file.
.fancybox-skin {
scale: 0.8 !important;
}
In this step, you can change the scale to make make the window itself smaller as you want.
In my example, I choose scale: 0.8.
Step 3: Save your code and reload this page.
=>> The result:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
1 Like
Thank you so much - I tried this and it worked and I was able to play with the dimensions.
Thank you so much - I tried this also and it also worked!
1 Like