Greetings,
I managed to invert the heading and subheading of the Brooklyn template by following this example. Nevertheless, the both the heading text and the subheading text are justified to respond to the size of the screen (100%). This makes my subheading a loooong line instead of a contained paragraph. Is there a way to make it contained?
Page: https://rawlab.com.mx/
Pass: raw!
Regards
Hey guys, so my html/css knowledge is pretty basic and I'm trying to align a div wrapper that contains a "secure checkout" svg under my "add to cart." I can get it to align properly on desktop view by setting the width the same as the add to cart button, however on mobile view the add to cart button changes width and I can't figure out how to make my svg align.
Here is the code I have right now along with a screenshot on desktop (I removed most of the svg content to make it easier to read):
<div class="Lock_Icon"><div style= "width: 312.5px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="isolation:isolate; margin: 0 auto;" viewBox="16.425 167.5 967.149 468.5">
--More SVG Content--<g transform="matrix(1,0,0,1,16.425,536)"><text transform="matrix(1,0,0,1,0,69.696)"
style="font-family:"Montserrat";font-weight:700;font-size:72px;font-
style:normal;fill:#4987b6;stroke:none;">100% SECURE CHECKOUT</text></g></svg></div></div>
As you can see it aligns perfectly when I have the div width set to the add to cart desktop width (312.5px) and then here is what it looks like on mobile when the add to cart button changes to 328px width:
It seems like I've tried a million different things and still can't figure it out so any help would be greatly appreciated. Thanks!
EDIT: And I guess the real question, which I think would solve the problem, is how do i get the div/svg width to change on mobile view?
SOLVED: Just figured it out finally. All I had to do was set the Lock_Icon to 50% in the bottom of the timber file and then add in the @media width at 100%, which looks like this for other noobs:
.Lock_Icon {
display: block;
width: 50%;
}
@media (max-width: 769px) {
.Lock_Icon
{
width: 100%;
}
}
Oops! You are correct, the Tags field is the order tags, not the product tags.
I am indeed using the API to pull product data for each order. I'm happy to guide you through that if you need.
Cheers,
Elliott
Hello,
I recently installed the Infinite Options app to easily add line items to my products for customer ease at customizing products at checkout. It's a been a long time since I've done custom coding and I'm still not fully comfortable with Liquid, so I don't quite know where to look to edit the CSS for the the form fields the app creates on my product page.
They look a bit out of sorts, because the title of the form field is showing up next to the form input field instead of above it, so nothing is lined up neatly. Can anyone point me in the direction of where to edit these things to clean this up?
An exmaple is on any of my products, like this one: https://shop.prettyinviting.com/products/boho-chic-bridal-shower-invitation-rustic-floral-feathers-in-watercolor-on-woodgrain-printable?variant=32866790604
Hey guys does anyone know how to change the icon on the product variant drop down box?
Example from the Minimal theme that I'm using:
And this is what I want:
If anybody can help me out I'd really appreciate it!
Hello - we have an app that will send automatic invites to customers when they sign up for an account on your site, or when they purchase as a guest on your site. You can also send bulk account invites to customers.
Check it out here: https://apps.shopify.com/automatic-account-invites
We will also be adding the functionality to have a customer trigger an account invite to themselves in a couple weeks. This will be included as part of our advanced plan.
Hey there, was wondering if anyone could help me! Currently wanting to change the text style and size for the colour/size tab when selecting a product. Any help woud be greatly appreciated!
Hello,
I am having trouble with my mobile menu button, it does not activate when pressed. I have found a few other posts with people trying to fix the same problem but with a different theme, and it ending up to be another app, or part of the theme overlapping the button. But I don't know how to look for this.
If someone could please help me out with this I would greatly appreciate it!
My shopify url is stevenmarkelon.myshopify.com
Thanks!
There seems to be a bug with Shopify, not handling special characters correctly in tag links, when the default language isn't English.
You can reproduce the error by following these steps.
1. Installed a fresh version of the Pixel Union “Launch” theme v3.2 (with no edits) in a site that has German as the default language.
Note: You can repeat the same test with a fresh version of the free “Simple” theme and get the same error. So the problem is limited to the Launch theme.
2. Created a “de.json” file and copy across the entire contents of the “en.default.json” file (again with no edits).
3. Go to their blog and click on a tag link which contains a special character (like “Männersachen”) and I get an error message “This blog is empty!“.
4. Go back and delete the “de.json” file and repeat the test, it correctly shows me all the posts that are tagged “Männersachen”.
Note the “Simple” theme, comes supplied with it’s own “de.json” file.
If it delete the “de.json” file, the tag links work correctly, but of course you loose the translation.
Hi Sagar, thankyou very much, that helps alot :) Just one other question, If I decided to make it the full width of the page, what piece of coding would I need for that? and would I need to figure out how to move the search bar (which is currently on the left hand side of my logo)?
I found this thread looking for something else, but I have actually got this working on my site - https://bee-equipment.co.uk/
It was a pain to set up about a year ago, but I thought if I could help someone else get through it then great. I hope the code makes sense.
Basically you have to subtract the margins around the slider rather than just resize it to fit the supply theme. There are a few other things going on as well. This is for 1060px width.
The mobile view becomes a bit crampt at the size of slide I was working with so I had it crop the slide somewhat on smaller devices.
This might not work for your site it might help you find an answer.
/*Main slideshow full width code*/
.main-content {
padding-top: 20px;
background-color: white;
}
.breadcrumb {
margin-top: 0px;
}
.slider-section {
margin-left: -30px;
margin-right: -30px;
margin-top: -20px;
}
@media screen and (max-width: 719px) {
.slider-section {
margin-left: -15px;
margin-right: -15px;
}
}
.flexslider .slides img {
width: 1060px;
height: 100%;
margin: 0 auto;
display: block;
}
/*slideshow mobile zoom*/
@media screen and (max-width: 480px) {
.flexslider {
transform: scale(1.2);
margin-top: 10px;
}
}
@media screen and (max-width: 480px) {
#shopify-section-slideshow {
overflow: hidden;
}
}
Site url : https://maderacraft.com/
i have created quantity box with plus and minus buttons on cart page and they are working perfectly, but price is not updating when i change quantity using plus and minus buttons, but when click on browser somewhere it will work(price update), can anyone help to solve this this erro?
i need when i press plus and minus buttons, product price also need change.
thank you
Hi!
I am the owner of the shop www.fuelme.fi.
I have noticed that on the mobile version of my store, there is no "remove items from cart" button if a customer wishes to clear their bakset. While on the desktop version there is no problem to do that. I am using the Debut theme.
Is there a way to fix this?
Pieter
Hi there Lisa,
I am having a similar issue to Sam and found this thread...
I'm using the Kingdom theme in Shopify (not that that should really matter) and have tried to add a custom MailChimp popup form for my store using the "create in MailChimp" button. When I click publish and go to my site, nothing has happened. When I unpublished it, it actually stuffed up all of the scrolling on my website. I had to uninstall the MailChimp app on my Shopify account to remedy this.
I've reinstalled the app and still want to get a custom form working but and wondering if you have any ideas as to why that might have been happening... It's great that MailChimp is trying to make it easy to put these forms in but unfortunately it's just not working effectively yet.
Any help would be greatly appreciated.
Kind regards,
Lachie
Hello,
In my shop there is not a return to cart button in checkout page.
Does anyone knows how to set up this?
Hi everyone,
I'm working on my Shopify store and I'm using the debut theme. I've got lot's of imagery and different product variants, so the product pages get really crowded with images. Now, on mobile, the Debut theme uses an image thumbnail slider and I'd like to use that as well on the desktop site. Can anyone help me with the code edits to get the product image thumbnail slider to work on desktop?
Jesse
Hi there,
we would like to add the "AddToCart"-button to our account page (or to any other page but the 'product'-page) and we copied the corresponding HTML code (including the <form> and <button> tags) from the product-template.liquid file. After clicking on the button, the product is actually added to the cart, so the post request to the ajax API works fine. Nonetheless, the Drawer/ RightDrawer ( theme.RightDrawer.open(); ) of the cart is not triggered and does not open.
Any help is highly appreciated, thank you in advance.
Hello Pieter,
In you file theme.scss.css you have displayed none to ".cart .cart__update-wrapper" class on line number 3689
Just follow these steps and it will solve your problem
Hope that helps!