Shopify themes, liquid, logos, and UX
I'm using the paid theme Venue, and an app called infinite options to add custom options to my products. When outside the product page, on hover-over of a product, it gives the option to add to cart, bypassing the option selection, which is not good. However if the product has variants, it will instead show "Select Options" on hover-over, and leads to the product page. I don't want to make these custom options each a variant as I need it all pulled from a single product inventory. How can I make my theme recognize the inclusion of custom options the same way it does variants?
I am sort of shocked this seems so difficult. The infinite options support said they weren't able to help. It seems like a pretty basic setting. Being able to just bypass the options selection that I have made required makes the app pretty useless.
These are just shopify limitations. If you didn't need a third party app to do it, it wouldnt be a problem, but you do. I think the simplest solution would be to remove the add to cart functionality from the collection page entirely, or just omit it from products that have your unlimited options by tagging those products and then telling your code "if it has this tag, don't show the add to cart option."
@Ninthony wrote:"or just omit it from products that have your unlimited options by tagging those products and then telling your code "if it has this tag, don't show the add to cart option.""
I like the sound of this. I have found that I can disable the add to cart feature all together but I really like the look and dynamic feel of the hover-over effect that I'll lose if disabled.
Can you point me towards how I might go about tagging these products in such a way as to have them omitted? Since my theme sees variants as something that require options be selected, and the button leads to the product page instead of adding to cart, would there be a way to tag these products in such a way as to make them look like they have variants? I'm not completely inept at dealing with some code, as I used to work with html and css in another lifetime. I'm new to shopify code and I don't have a handle on the structure yet.
Or is there a way to add a hidden variant to these products and trick the theme into displaying the desired button?
So what you'd want to do is tag your products with something unique you can identify them with. Something like "multi-option" -- I don't know, it could be anything but lets just assume you use that tag. You’d have to find where in your collection template the HTML code is for the option when you hover. I would just hover the code and right click and Inspect it with DevTools, then apply a hover to it so it’ll display the option and you can see it and inspect it’s class name. I can’t really tell you cause you haven’t given us a URL. Here’s a codepen showing how something like it might look:
https://codepen.io/ninthony/pen/zYZgVdo
So let's say the first product is what you want to show for normal products that you want people to be able to add to the cart from the collection page and the second product is one of your products with the multiple options that you want them to continue to the product page and select their options. In reality, we'd be inside a loop and what we'd want to do is make the "product-hover" div conditional. So it would look something like this with liquid code:
{% for product in collection.products %}
<div class="product-container">
<div class="product-image">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F23%2F2021%2F03%2F03%2Fnutribullet-smart-touch-blender-ecomm.jpg">
</div>
<div class="product-title">
Some Generic Title
</div>
<div class="product-price">
$19.99
</div>
{% if product.tags contains 'multi-option' %}
<div class="product-hover">
<a href="{{ product.url }}">View All Options</a>
</div>
{% else %}
<div class="product-hover">
<a href="link-to-add-to-cart">Add To Cart</a>
</div>
{% endif %}
</div>
{% endfor %}
So it's going to put out the hover container to "add to cart" for any option that doesnt have the "multi-option" tag, but if it has the multi-option tag it's going to put a link to the product page instead. This is just a basic example and may be more complicated, but that's the general idea.
I very much appreciate the thorough response. Digging through the code I'm not really finding anything obvious. If I'm not mistaken it seems to be calling on js to determine how the hover-over button is determined. I could definitely be wrong though. Here's a preview link, as my site is not open yet. Still very rough.
https://j09lwgthpkt9j3kw-26499645530.shopifypreview.com/collections/roasts
if you notice, the second product, "Colombia - El Bombo" has the desired hover-over button that I'm hoping to apply to anything that needs custom options, but not variants. I'm not opposed to hiring someone to fix this, but my concern is that I will constantly adding new products and making changes as we grow and I am afraid I'll have to have to hire someone every time I make changes or additions.
Sorry for the late reply, I don't typically check the forums over the weekend. If you'd like, I can request access to your site and see if I can't get it figured out for you. I'll just need access to your themes, products, and a product that has your custom options you want to apply the same hover to as the product you mentioned in the above post. This is the div you'd be looking for:
<div class="product-btn product-btn--hover">
<a href="/collections/roasts/products/colombia-broken-robot-coffee-affogato-espresso" class="c-btn c-btn--full c-btn--primary c-btn--arrow c-btn--small-tab product-btn__btn">Select Options</a>
</div>
I'd probably start by Ctrl + F and searching for "product-btn--hover" in your product template and see if you can't find it.
Just let me know, send me a DM on here with your store url if you want me to request access and try to get it figured out for you.
Hello @lifson ,
Check in theme settings collection page may be there you have an option to disable it.
If not then you have to edit the collection template and comment/delete the code.
Thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024