Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
- About Ninthony
01-30-2019
12:46 PM
You'll have to apply the same kind of logic to the add to cart button. So you would find where your add to cart button is and say something like: {% if isPlanTagFound %}
<button class="add-to-cart" onclick="warning()" disabled>Add to Cart</button>
{% else %}
<button class="add-to-cart" >Add to Cart</button>
{% endif %}
<script>
function warning(){
alert("WAIT! You have to add an additional product before checking out")
}
</script> Something like that, it should point you in the right direction.
... View more
01-30-2019
11:52 AM
1 Like
Well the file you're going to want to edit is your collection.liquid in your Templates folder. Your sidebar is in a 3 column space and your collection images, header, and title are in a 9 column space. What you would have to do is make a new row and column that takes up a 12 column space, take the code that contained your image and title and put it in that 12 column space, and move it above a row that contains your sidebar as a 3 column space and product images that take up a 9 column space. It's a little hard to say exactly what to do without being able to see the code, as it's probably broken into multiple files which show up like {% section 'collection-list' %} or {% include 'collection-list' %} or something like that, depending on if your developer used sections or snippets. Probably sections if they developed it for further customization for a client like yourself.
... View more
01-30-2019
10:15 AM
1 Like
Use customer.orders_count {% if customer.orders_count == 0 %}
<div class="add-to-cart"> Add to Cart </div>
{% else %}
{% for order in customer.orders %}
Whatever else you want to do here.
{% endfor %}
{% endif %} Here's a reference to the customer object: https://help.shopify.com/en/themes/liquid/objects/customer#customer-orders_count
... View more
01-29-2019
11:37 AM
I prefer bootstrap if I'm using a grid system at all, though I usually like to make my containers myself and use percentages and flexbox. Bootstrap has flexbox functionality, I'm not entirely sure about timber CSS, though in their documentation it seems pretty similar to bootstrap. Since developing for my current employer, we have bootstrap included on our page, but I rarely use it at all.
... View more
01-25-2019
12:37 AM
1 Like
If I add this css it works on my end: .boost_performance__answer.rte {
display: none;
} So if you put that at the bottom of your theme.scss.liquid it should work. Alternatively you can go onto the faq page itself and put it in style tags at the top, or manually add it to the divs inline. <style>
.boost_performance__answer.rte {
display: none;
}
</style> <div class="boost_performance__answer rte" style="display: none;">
... View more
01-25-2019
05:28 PM
It's not a problem, Ill look into it being collapsed a little later, but all you should have to do is set the .boost_performance_answer class to display:none in the theme.scss.liquid file. .boost_performance__answer{ display: none; } All slideToggle() does is switch it from display none to display block and give it a nifty little animation. You can also set how long you want the slide to take in milliseconds in the parentheses. So like slideToggle(200) it will take .2 seconds. Yes, that's the error I'm seeing. It looks like there needs to be a closed script tag above that html comment, because there is an opening script tag with jQuery directly above it. It's definitely nothing with liquid code, javascript wouldn't be throwing you an error for something wrong in liquid. But as long as it's not breaking your code, the issue is minimal, I just hate seeing errors in the console.
... View more
01-25-2019
02:44 PM
Hmm, okay I think I see what's going on. I think that the former script never got closed, so when it gets to the next opening <script> tag, it sees the "<" and says that's the error. So I say close that other script tag above that comment... I think that's the case anyway, I can't tell without seeing the rest of the code. (function(){
// Your code here
console.log("Developer Tools: Hello from the mothership 🚀");
if (Shopify && Shopify.Checkout && Shopify.Checkout.OrderStatus) {
console.log("📦 📦 📦 📦 📦 📦 📦 📦 📦");
console.log("Welcome to the Order Status page. You now have access to the Shopify object:");
console.log(Shopify);
console.log("Make use of Shopify.Checkout.OrderStatus.addContent to add a custom message to this page.");
Shopify.Checkout.OrderStatus.addContentBox(
'<div style="text-align: center; font-size: 4em; line-height: 1.2;">🤖</div>'
)
}
})();
</script>
<!-- Event snippet for Purchases conversion page -->
<script>
gtag('event', 'conversion', {
'send_to': 'AW-949706116/A60pCIuz534QhLvtxAM',
'value': 1.0,
'currency': 'USD',
'transaction_id': ''
});
</script> Did you try the above code I did for your FAQ page? It should work out.
... View more
01-25-2019
10:24 AM
Actually I accidentally opened that in a different window and didn't see the whole code. Could you post all the code so I can see it? It looks like you have script tags in there and I don't know if they should be there. Is this an external javascript file? Or is it included under the HTML for the page?
... View more
01-25-2019
10:19 AM
You have jQuery included on your page already, I just adjusted the css on your page with jQuery to see if it was included. The Problem may be with your code, I have an Uncaught SyntaxError in the console : "Unexpected token <" I took a look at whats making it throw that error and I see you have an HTML comment in your code which can break it. Comments in javascript are done with double backslashes like this: // This is a single line comment in javascript
<!-- This is a comment in html --> Here's what the console shows me is throwing the error: (function(){
// Your code here
console.log("Developer Tools: Hello from the mothership 🚀");
if (Shopify && Shopify.Checkout && Shopify.Checkout.OrderStatus) {
console.log("📦 📦 📦 📦 📦 📦 📦 📦 📦");
console.log("Welcome to the Order Status page. You now have access to the Shopify object:");
console.log(Shopify);
console.log("Make use of Shopify.Checkout.OrderStatus.addContent to add a custom message to this page.");
Shopify.Checkout.OrderStatus.addContentBox(
'<div style="text-align: center; font-size: 4em; line-height: 1.2;">🤖</div>'
)
}
})();
<!-- Event snippet for Purchases conversion page -->
<script>
gtag('event', 'conversion', {
'send_to': 'AW-949706116/A60pCIuz534QhLvtxAM',
'value': 1.0,
'currency': 'USD',
'transaction_id': ''
});
</script> So that comment in there "Event snippet for Purchases conversion page" is probably throwing the error. This will work for what you want to do, I tested it on your page: $('.boost_performance_faq__question').on('click', function(){
$(this).parent().children('.boost_performance__answer').slideToggle()
})
... View more
01-25-2019
09:47 AM
Im assuming that's the collection list section, I believe it would be in "collection-grid-item.liquid" in your snippets folder. At the bottom of mine there is a span with {{ collection_title }} in it. <span class="collection-grid__item-title">
{{ collection_title }}
</span> Just comment it out in case you want it later. <span class="collection-grid__item-title"> {% comment %}{{ collection_title }}{% endcomment %}
</span>
... View more
01-24-2019
09:05 PM
That's cool, cant really advise you on anything though until then. I'll assume you have a theme.scss.liquid file in your assets folder. That will be where your changes will most likely need to be made regarding typography. The settings.schema.json file is where the settings for your sections are held.
... View more
01-24-2019
08:00 PM
Can you post a little more of your code? Where are you getting those variables number1 and number3 from? Edit: Actually, I see they are in quotes so I don't really know what that's about. When you add an item to the cart, you have to use a variant ID of a product. As far as I know, all variant id's are numbers, there are no strings like "number1" and "number2" or are you just using that as an example? Either way Ill need to see more of your code before I can say "this is why it's not working". This is typically how I attack adding an item to the cart without the Shopify.addItem function: {% for product in collections.whatever-collection.products %}
<div class="add-to-cart" data-url="{{ product.url }}">Add to Cart</div>
{% endfor %}
<script>
$('.add-to-cart').on('click',function(){
var product_url = $(this).data('url');
jQuery.getJSON(product_url + '.js', function(product){
var product_id = product.variants[0].id;
jQuery.post('/cart/add.js', function(){
quantity:1,
id: product_id;
});
});
});
</script>
... View more
01-24-2019
05:03 PM
You can invite me as a developer and I can change it for you. Here's instructions on how to do that. https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts My email is lestatownzu@gmail.com
... View more
01-24-2019
04:56 PM
Could you post a link to your store? Pacific is a paid theme so I do not have it and cannot look.
... View more
01-24-2019
04:33 PM
Also I just checked and the assignment isnt even necessary, you could just increment and it starts at 0. So you could do: {% for block in section.blocks %}
<div class="faq-block faq-block--{{ block.id }}">
<input id="faq{% increment count %}" type="radio" name="faqaccordion" />
<label class="faq-block__question" for="faq{% increment count2 % }">{{ block.settings.title }}</label>
<div class="faq-block__answer">{{ block.settings.richtext }}</div>
</div>
{% endfor %}
... View more
01-24-2019
04:23 PM
Hmm, thats weird I would think that the increment of the variable count would change it's value, I haven't used it much at all in liquid. If I really needed them to be the same I would just make another count variable called count_2 or something and increment that if I couldn't figure out another way to do it like you did.
... View more
01-24-2019
04:19 PM
Actually make that 20px, it also will fix your issue with the whitespace showing through on scroll.
... View more
01-24-2019
04:17 PM
In your theme.scss.liquid file you have a .site-header class that has an invalid property value. it says: .site-header {
padding: 50;
background-color: #010000;
} Your 50 doesnt have any measurement on it, so it's not reading. 50 is a bit much, I would say just add 10px of padding to the top and bottom .site-header {
padding: 10px 0px 10px 0px;
background-color: #010000;
}
... View more
01-24-2019
03:31 PM
You have a .wrapper class in your timber.scss.liquid file in your assets folder that has a max width of 1050px. Just increase that number, but it will increase the wrapper for everything on your site. Which I think you should do anyway, everything should be consistent. I would change it to 1200px.
... View more
01-24-2019
03:17 PM
I think I found a solution to your problem. Go into your sections folder and click on header.liquid. There's an assignment that says to make that header full height. It looks like this {% assign hero_full_height = true %} Just replace that with this: {% if template.name == "index" %}
{% assign hero_full_height = false %}
{% else %}
{% assign hero_full_height = true %}
{% endif %} Let me know if that works : )
... View more
01-24-2019
02:55 PM
couldn't you just use {{ count }} the second time instead of incrementing? {% assign count = 0%}
<div class="faq-block">
<input id="faq{% increment count%}" type="radio" name="faqaccordion" />
<label class="faq-block__question" for="faq{{ count }}"><h4> {{ block.settings.title }} </h4></label>
<div class="faq-block__answer"><p> {{ block.settings.richtext }} </p><div>
</div>
... View more
01-24-2019
02:45 PM
1 Like
You'll have to just keep playing with it, do it inside the inspector. You can change the css on the side and it will make changes live, they will go away on refresh though. So you can figure out what will work for your image. 95 may have been a little conservative. Make it like 90, 85, or 80. Just keep fiddling with it till you get the result you want.
... View more
01-24-2019
02:40 PM
Hmm, on my page it just pushed everything down from the header. I see what you're saying on your end, it makes it so the image gets cut off, so actually you could find this as well: .hero--full-height .hero__image {
height: 100%;
width: 100%;
object-fit: cover;
margin-top: 22px;
font-family: "object-fit: cover";
} And change comment out that height option .hero--full-height .hero__image {
/* height: 100%; */
width: 100%;
object-fit: cover;
margin-top: 22px;
font-family: "object-fit: cover";
} I think it looks nice as is, but the readability is definitely bad. If you wanted to keep it the same I would change the link color and logo color to white, but depending on your branding it may not be an option.
... View more
01-24-2019
02:23 PM
Look for this in your theme.scss.liquid file: .template-index .header-wrapper {
opacity: 0;
z-index: 2;
-webkit-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
-moz-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
-o-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87)
} give that a position:relative: .template-index .header-wrapper {
opacity: 0;
z-index: 2;
position:relative
-webkit-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
-moz-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
-o-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) Should be as simple as that. The background color of that will be white, so if you want it something different, just like the position:Relative; you can add a background-color: black Or use a hex code for whatever color you want .template-index .header-wrapper {
opacity: 0;
z-index: 2;
position:relative;
background-color: #333
-webkit-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
-moz-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
-o-animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards;
animation: fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87)
}
... View more
01-24-2019
02:06 PM
1 Like
in your theme.scss.liquid file in your assets folder there is a margin-top of 100px on your .slick-slider class, which is a little too tall for your site. Change it to 95px: .slick-slider {
position: relative;
margin-top: 95px;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
} Just look for that and make margin-top 95px Edit: Maybe make it a little less, whatever works for you. Change it in your inspector to see what fits your needs.
... View more
01-24-2019
01:55 PM
Well that looks like a register form, so it's probably the customers/register.liquid in your templates folder. I can usually tell by looking at the url of the site. So if it says https://www.your-domain.com/pages/contact -- I know that that is going to be a page so that would be page.liquid or in your case page.liquid renders out {{ page.content }}, and that https://www.your-domain.com/collections/toilet-seats is going to be the collection.liquid. It is a bit of a guessing game until you learn how to track stuff down. When you think you've found it I suggest just typing some random stuff next to where you're looking, saving, and then refreshing the page to see if the stuff you typed appears. Then you'll know when you're in the right space.
... View more
01-24-2019
01:29 PM
1 Like
In your product.liquid underneath where you commented out the cart you'll see something like this: <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> <meta itemprop="priceCurrency" content="GBP"> <meta itemprop="price" content="6000.0"> <ul class="inline-list product-meta"> <li> <span id="productPrice-product-template" class="h1"> <span aria-hidden="true">£6,000<sup>00</sup></span> <span class="visually-hidden">£6,000.00</span></span> </li> </ul> <hr id="variantBreak" class="hr--clear hr--small"> <link itemprop="availability" href="http://schema.org/InStock"> <form method="post" action="/cart/add" id="addToCartForm-product-template" accept-charset="UTF-8" class="addToCartForm " enctype="multipart/form-data"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓"> <div class="selector-wrapper" style="display: none;"><select class="single-option-selector" data-option="option1" id="productSelect-product-template-option-0"><option value="Default Title">Default Title</option></select></div><select name="id" id="productSelect-product-template" class="product-variants product-variants-product-template" style="display: none;"> <option selected="selected" data-sku="STS-11000179" value="21740025151588">Default Title - £6,000.00 GBP</option> </select> <div class="payment-buttons payment-buttons--medium"> <span id="addToCartText-product-template"> </span> </div> </form> <hr class=""> </div> Where the price is probably like {{ product.price | money }} or something like that and there's probably other liquid output. Anyway, underneath that ul and above the <hr> you can comment all the way to the next <hr>: <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="GBP">
<meta itemprop="price" content="6000.0">
<ul class="inline-list product-meta">
<li>
<span id="productPrice-product-template" class="h1"> <span aria-hidden="true">£6,000<sup>00</sup></span> <span class="visually-hidden">£6,000.00</span></span>
</li>
</ul>
{% comment %}
<hr id="variantBreak" class="hr--clear hr--small">
<link itemprop="availability" href="http://schema.org/InStock">
<form method="post" action="/cart/add" id="addToCartForm-product-template" accept-charset="UTF-8" class="addToCartForm
" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">
<div class="selector-wrapper" style="display: none;"><select class="single-option-selector" data-option="option1" id="productSelect-product-template-option-0"><option value="Default Title">Default Title</option></select></div><select name="id" id="productSelect-product-template" class="product-variants product-variants-product-template" style="display: none;">
<option selected="selected" data-sku="STS-11000179" value="21740025151588">Default Title - £6,000.00 GBP</option>
</select>
<div class="payment-buttons payment-buttons--medium">
<span id="addToCartText-product-template"> </span>
</div>
</form>
<hr class="">
{% endcomment %}
</div>
... View more
Shopify Community
