Any reason you want to hide them? Your menu is scrollable so I don't see the issue. Wouldn't want people to miss out on parts of your site. I do see you have some data attributes though that you can target by with css: @media (max-width: 799px){
[data-mobile-dropdown-rel="where-we-plant"] {
display: none!important;
}
} This will hide your "Where We Plant" link.
... View more

You can do this with javascript or jQuery. Say you made a new product-template for this specific product. You can give your swatches data attributes to store your product urls, then take the current url and split it up and add the data attribute of the swatch you clicked on to the end of your url and load it in the same window. Here's a codepen showing how you might achieve this (in the codepen I open it in a new window just so you can see the url -- notice it changes from red-shirt to green-shirt to blue-shirt etc depending on what you click): https://codepen.io/ninthony/pen/LYPWomj Please note this is a jQuery example. You likely have jQuery already on your store, but if not you'll need to link to it in your theme.liquid in the header.
... View more

Hmm, no way we can really tell without looking at your code if it's a custom theme. If you post a link to your store I could give you a jQuery solution, or else if you want I can take a look at your code and try to find it for you. I'd need your myshopify.com url though. If you aren't comfortable posting it here you can send me a direct message(you have to enable messaging in your profile if you havent already).
... View more

We'd just need to see the footer itself in a browser so we can inspect the footer code. You don't need to make your site live, you can preview it and then there should be a little box that comes up at the bottom of your browser that allows you to share the preview -- this will generate a preview link that will expire in an hour. I went to my Default Narrative and it looks different than the example you posted or I'd just check there.
... View more

Hmm, well part of the problem is that you're comparing the product id to a string I believe. I couldn't get that evaluation to be true until I took the product id out of the quotes. However, I still couldn't get it to execute my javascript. So instead of using liquid, I did everything in javascript and got this working: <script>
//get the cart
let cart = $.getJSON('/cart.js');
// wait for the response
cart.done(function(){
//when you have the response, get the JSON and set items to cart.items
cart = cart.responseJSON;
let items = cart.items;
// make a boolean to make sure that the item you want to add isnt already in the cart (to keep the JS from firing again on page reload)
let item_in_cart_already = false;
//check the cart items and set boolean to true if the item is in the cart
for(var i = 0; i < items.length; i++){
if (items[i].product_id == 1999834054743){
item_in_cart_already = true;
}
}
//then loop through cart items again and if the item isnt in the cart, and the corresponding product is found
//add it to the cart with the same quantity as the other product.
if(!item_in_cart_already){
for(var i = 0; i < items.length; i++){
if (items[i].product_id == 1999834087511){
let variant_quantity = items[i].quantity;
Shopify.addItem(19754659905623, variant_quantity);
}
}
setTimeout(function(){
location.reload();
},1000)
}
})
</script> This is assuming you have the Shopify.addItem function in your store. You probably do already, but if you need it, here it is: Shopify.addItem = function(variant_id, qty, properties, callback) {
var qty = qty || 1;
var params = {
quantity: qty,
id: variant_id
}
if(properties != false){
params.properties = properties;
}
jQuery.ajax({
type: "POST",
url: "/cart/add.js",
data: params,
dataType: "json",
success: function(line_item) {
if ((typeof callback) === 'function') {
callback(line_item);
} else {
Shopify.onItemAdded(line_item);
}
},
error: function(XMLHttpRequest, textStatus) {
Shopify.onError(XMLHttpRequest, textStatus);
}
});
}; That's what I came up with anyway. The only issue I saw is that if they update the quantity of their product on the cart page it will not update the quantity of the additional product.
... View more

You can also double click the image in the editor and it will bring up a modal, there's an image size option which I think is "Large" by default, you can click the dropdown and select original.
... View more

You can add this to the end of the body right before the </body> in your theme.liquid in the layouts folder. <script>
$(function(){
let headerHeight = $('.site-header').height();
let cartNotification = $('.cart-popup-wrapper');
cartNotification.css('margin-top', headerHeight + "px")
});
</script>
... View more

What theme are you using? If it's a free shopify one you can just rename your current theme, and add the theme again to your store. Then you can go into the code, copy the footer.liquid file, and recreate it in your theme. If this is a paid theme, you'll need to reach out to your themes theme support.
... View more

Yeah that's the thing about sticky announcements or navigation bars. If your site has already been designed to not have one, then you have to find all the spots in the store that need to get pushed down. If you instead put it in your shop.js without the script tags it will work across all pages. Alternatively you can put it in your theme.liquid in your layouts folder in script tags at the end of the body. You can add css to your side navigation to push it down: @media (max-width: 1240px){ .Drawer__Main {
padding-top: 17px;
} }
... View more

Get rid of the padding-top:43px in your css and instead set it with javascript to get the height of the announcement bar. That way if it breaks to two lines or more you wont have to manually adjust that. First comment out the padding-top: 43px on your shopify-section-header in your theme.scss, then go into index.liquid in your templates folder and add this in script tags at the bottom of the page (or you can go into your shop.js and add this without script tags): <script> $(function(){
let navBar = $('#section-header');
let announcementHeight = $('#shopify-section-announcement').height();
navBar.css('padding-top', announcementHeight + "px"); });
</script>
... View more

He shouldn't need to add !important to anything unless the style is being applied by javascript and is inline with the element. Brian's solution will probably work, don't get me wrong. I just think there's got to be a way to do it without using !important. Perhaps being more specific in how you reference your style? For instance as an example: .container .product-form .product-form__cart-submit {
width: 70%;
} Any reason why !important is needed?
... View more

The issue is that it's not padding. The slideshow has a set height and your images span with entire width of the container. So when the screen width gets smaller, so does the overall image because it's always going to be the width of the screen, but it's height readjusts to keep it's aspect ratio, but the height of the containing div is still specifically set to say 600px. So when the image ultimately gets resized and the height drops below 600px, you start getting big blank areas of space. It's just the way the slideshow is designed... if it were me I would redesign the section to replace a second image at mobile size, but that would require quite a bit of custom code. I'll take a look at the other parts for you though too.
... View more

You can put the code into your product.liquid inside style tags at the top of the page: <style>
table tr td{
background:#fff;
}
</style> If you only have it on the product page, it will only effect that page.
... View more

I guess I'm not completely understanding. Are we talking about pages? Or the homepage? In the original screenshot you are creating a page. To use an alternate page template you would go into your Templates folder in the code editor admin, click Add a new Template, select page from the dropdown, and name it whatever you want "eg alternate-page". I don't know if you can do this in themekit as I primarily just use the code editor, but I would imagine you could just create a new file called page.alternate-page.liquid and save it in your directory and copy the contents of page.liquid into that to achieve the same effect. This would create a page.alternate-page.liquid file, which you can then select from the dropdown menu when creating new pages. It is important to note that if you create a template on a non-published theme, you will not be able to select it from the dropdown. The dropdown pulls the templates from the live theme. I do see that you can create a new index template, though I have no idea how you can implement that. This person on stackoverflow may be facing a similar situation to you: https://stackoverflow.com/questions/44497322/creating-a-secondary-index-page-with-identical-sections-as-primary-index-page-bu
... View more

Your homepage is always going to be index.liquid. You'll need to duplicate your current theme in the Admin, then connect to that specific theme with Themekit and edit index.liquid. However, if your store uses Dynamic Sections (sections you can edit in the customize editor and move up and down the page at your will) all you will see when you open index.liquid is: {{ content_for_index }} This renders everything you have set in your customize editor. If you'd like to start building a homepage with just HTML, CSS, and Liquid -- and forego the dynamic sections -- just comment out content for index and start designing: <style>
.container {
text-align: center;
font-size: 60px;
padding: 20px;
}
</style>
{% comment %}
{{ content_for_index }}
{% endcomment %}
<div class="container">
Hello world!
</div> This will just give you Hello world! in a large font in the center of the screen. Your header and footer files will probably be static sections inside of "theme.liquid" in your layouts folder. Theme.liquid applies to your whole site. So you'll probably see something like: {% section 'header' %}
{{ content_for_layout }}
{% section 'footer' %} {{ content_for_layout }} renders something different depending on the template you are on. If you're on the homepage, it renders index.liquid (which in dynamic sectioned themes means it renders {{ content_for_index }}), if you're on a page it renders page.liquid, if you're on a collection it renders collection.liquid and so on. So to edit your header and footer you'd go into your section folder or snippet folder depending on how they are included -- if they say section before the quotes you'd be looking for a section, if it says include you'd be looking for a snippet -- and then edit your files "header.liquid" or "footer.liquid" assuming that's what they are named. Hope this clears some things up.
... View more

could you also post the code for the snippet that is included? That's where you're going to have to make your html edits. In the snippets folder the "include-custom-html.liquid" is the file you'd be looking for.
... View more

So your section has a {% schema %} at the bottom of it. Inside the schema is all your settings that you can use for the section. There's many different types of data that you can allow the customize editor to access. So let's say for instance your section and schema looks like this: <div class="">
{{ section.settings.my_html }}
</div>
{% schema %}
{
"name": "Custom HTML",
"settings": [
{
"id": "my_html",
"type": "html",
"label": "Custom HTML",
"default": "<div><p>Some HTML content</p></div>"
}
]
}
{% endschema %} By default, inside the containing div that has no class at the moment, this will render your "default" html until you add something into Custom HTML in your customize editor. What I was saying, is that you can add an additional setting called "Custom Class" that you can then use for the div with (right now) no class name. Actually, I think a checkbox would be more appropriate. So say you had a checkbox for full width, you would add this to the schema, and then add a conditional statement for the class: <div class="{% if section.settings.full_width %}full-width{% else %}container{% endif %}">
{{ section.settings.my_html }}
</div>
{% schema %}
{
"name": "Custom HTML",
"settings": [
{
"id": "my_html",
"type": "html",
"label": "Custom HTML",
"default": "<div><p>Some HTML content</p></div>"
},
{
"id": "full_width",
"type": "checkbox",
"label": "Full Width",
"default": false
}
]
}
{% endschema %} Now in your customize editor there will be a checkbox called "Full Width". If "Full Width" is checked in your customize editor it will add the class "full-width", otherwise it will have the class "container".
... View more

@Pallavi this is true, but @Jasoliya gives out plenty of free help on the forums. He's one of the most helpful people here, as are you. I don't think it's unfair for he, you, or anybody to ask for compensation on edits that are more advanced.
... View more

You could add another portion to the schema. {
"id": "custom_class",
"label": "Custom Class",
"type": "text"
}, Then in the containing div for the section: <div class="{{ section.settings.custom_class }}">
</div> Then when you create your section you could type into the Custom Class text box "full-width" would output <div class="full-width">
</div> Then just make some styles for full-width
... View more