Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
Builder public api key
b0905fdceba0412cbd170bafb0fd3b7a
What are you trying to accomplish
Adding an image (icon) in the CTA. On the left of the CTA there is copy and on the right, there will be an arrow (icon).
The other scenario is adding an arrow icon next to the text in the 2 column - copy reads “Respect the diet” so it should be (“arrow” then respect the diet)
Screenshots or video link
Code stack you are integrating Builder with
Shopify
Thanks, Logan for getting back to me.
On the same project, I have three mobile questions
The copy and the arrow are not fitting in the CTA border - can you tell me why? I am unable to figure it out. I made the CTA in a box with 2 columns one for the text of the CTA and one for the arrow of the CTA.
Homepage hero image - do I need to add the crop image I cant move it around in the field itself -correct?
The carousel at the bottom of the page - the arrows either are sitting on the text or they disappear if you have padding - how to properly format that section?
Could you clarify more about what you are looking to accomplish with the hero image? You have some options to select its origin and sizing in the Options tab for the image.
It looks like sizing the carousel to be a smaller width on the page works to keep the arrows from being misplaced. I’ve reduced the carousel to 70% and set its self-alignment to center. Please take a look to see if this solved it!
As I was updating the styling for the mobile and it looks like it has messed with the desktop as well. Do you know why that would happen and how that can be resolved?
For the hero image on mobile, the image is not centered where I need it to be (like the bottle needs to be on the right and smaller), can I upload a different image for mobile or what are the options for sizing you mentioned in your comment.
Thanks for reducing the carousel size - how did you do that?
Thanks for mentioning the margin in the CTA hence not fitting.
One more thing - for the section with the heading “wine that’s better for you” if you notice, the copy wine is getting cut for some reason - any idea why?
Attached screenshot, “Shop the red” section. The arrow and shop the red has to be in the same line but whatever I am doing is not working. I have checked there is no extra padding anywhere. Can you take a look please. I will do it for the rest of the sections below.
Hey @ananya! Lots of really great questions here. We are not weekenders, but please feel free to post on the forum any time and we’ll respond as soon as we can!
Styling in Builder uses a cascading technique. Styles that you set in Desktop will be reflected in Tablet and Mobile, Tablet styles will only affect Tablet and Mobile, and Mobile styles are exclusive to Mobile. In general, you’ll find it best to work on the desktop version of your site first, then make tweaks to your content on Tablet and Mobile.
Would you be able to mock up what the exact look you’re going for might be? The image might need to be switched out for a taller one at a certain breakpoint because of how wide it is, and how closely it crops in on Mobile. To switch elements, you can use the Style > Visibility section to cleverly hide/show different heroes for different screen sizes!
You can select the Carousel and head to Style, then type “70%” in the “width” style
Unfortunately, it looks great on my end! Could you screenshot what you are seeing?
For this one, I took the items out of the columns element and set the parent box to “row” layout in the Style tab. Orange shows how that resulted, blue shows the next item that has the old layout
A couple of questions more for you and some replies to the previous message.
(1) 5. See the screenshot of what I am seeing for the wine that’s better for you section, it might just be a rendering issue on my end?
(2) 1. & 2. I was updating styling for mobile only but seemed to have affected the desktop as well, this was for the homepage hero. I have mocked up how the hero image should size (almost like a new image would need to be added) but if you have a different solution here that would be great. thank you so much!
Also, if you see the spacing on the copy on the image on mobile is not right as well. see mockup attached.
For the section - the wine that’s ready when you are. For the second point, the copy on mobile is not contained in that 408px width. Do you know the reason for that, it is flowing off the page currently on mobile.
How can you hide a section that is there on desktop and not on mobile? and is it possible to do vice versa? for example, hide the press section on mobile?
For the homepage hero - if I wanted to do a layout like this (see screenshot), would this be doable. Where the copy doesn’t sit on the image but cascades down to a new section?
I think that text glitch is likely only on your device or browser. I am not able to recreate that on my end, on Mac or Windows, or on Mobile. I don’t think your users will be able to see that, but let me know!
I have spent some time styling your hero with the information provided. This includes a desktop hero and two mobile designs, according to the mockups you shared. Please visit this Fiddle Builder.io: Drag and drop page builder and CMS to see that in action! You’ll want to look at the Layers tab to see how these are constructed. Please review the styles applied and let me know if I can clarify anything for you.
I think the mobile alt version is much more accessible and showcases the product a little better than the original design, but that’s up to you! You can tweak the exact way that text is wrapped by adjusting the size of the text and the max-width style of the text box.
The “Wine that’s ready when you are” section is not showing that style issue for me. Could you screenshot it with the element selected if you need further help troubleshooting?
You can hide and show content via the “Visibility” style section. Just flip the switch for each breakpoint that should not show the element you have selected.
the arrows move and are not consistently aligned with the edge of the image. I have attached a screenshot of the arrows I’m referring to and also the style section of the arrow.
People buzzing about section - on tablet the layout is off, I was trying to fix it for tablet but it started messing with the desktop and mobile, am I doing something wrong?
Getting this published - how does that work through shopify. If I publish it but it does archive the current homepage and create a new theme? We want to make sure we preserve the old version so wanted to learn more.
All the stuff I have asked about so far, are there tutorials that cover all of this or the right practices I should follow as I saw you did different things like 100vw … I am sorry for all the trouble with this one page! Look forward to hearing from you.
You can use the Preview/Draft of your page and then enter the Dev Tools to check out exactly how things will look on each device. Just right-click anywhere on your Preview draft and choose “Inspect Element”, then choose from one of the devices your browser will let you preview! You can also preview how things behave at different specific sizes by using the handlebar to the left of the canvas. There are some great 3rd party testing tools for this as well, so feel free to look into this further if you would prefer something with more features/browsers to test.
Here’s how that section looks for me, specifically on a narrow iPhone X display. If you are still seeing it on your end, try setting a maximum width property to see how that affects the text box!
These boxes have a max-height property, which means that content is spilling out of them and displaying over each other. Try removing the max-height to see how it affects the layout. This should help you fix it!
You can make a new homepage, publish, and unpublish and the old one will still show. But if you make a page in Shopify and then make a Builder landing page with the same URL, publish and unpublish, it will show a 404 error. In short, your old page will still be there if you need to roll back to it.
We are always working to improve our documentation, but there are some aspects of designing for the web that just require time to learn. Keep gaining that experience and knowledge by asking questions and searching for the best answers, and you’ll learn all the great tricks!
You may enjoy learning what’s possible with CSS, then applying your knowledge with Builder’s UI. No need to learn the code, so much as learn the concepts that are available! That will really strengthen your understanding of what is possible in the web and in Builder. CSS Tutorial
For number 1 Logan - when I take out the margin you highlighted it aligns to the center of the column not the image, it shows in the work space that it is aligning to the image but when you preview it it is aligning to the center of the 2 columns. See screenshot.
For the old homepage, the new homepage we made on builder is the same URL as the old homepage we have - so are you saying when we unpublish it the builder version will show a 404 error? If so, do we need to create some sort of redirect though the page URL is the same for both (usualwines.com? )
Lastly, as you can see we had pushed the page live, we were trying to run an A/B (the original vs the builder page) but not sure how to go about it as when we did the A/B test, when you click the default and the variation one both look the same. Can you guide me here please.
For the arrows, can you adjust the right-margin of the arrow until you get the exact result you are looking for? I’m understanding that you’d like the arrow to align to the right edge of the image. I did see on Tablet that the Link box didn’t have the same max-width property as your image, so I added it here. Is this the result you are going for?
Regarding publishing, this feature will work as you might expect. Just a warning that you will want to unpublish your Builder page if you need to roll back, rather than trying to publish your Shopify page over top of it.
A/B testing allows you to test between Builder pages, not between a Builder and Shopify-created page. You can switch between the variant pages you created here:
The max-width seemed to be missing on the desktop version as well, so I added that and that seems to have fixed it. That logic made sense. Thank you.
As fr A/B testing - is there anyway to do an A/B test with the builder and shopify page? Could we use google optimize? As otherwise the page we have on Shopify cant really be tested against anything.
Hi @ananya! I checked with my team, and there is not a way to do this currently inside of Builder.io. Unfortunately, I can’t advise any particular path to follow for the A/B testing you are looking to run, as it would be outside the scope of Builder. Please let me know if you have any other questions, though!
