Even if our Mobile Swipe2Buy is the best thing that happened to mobile e-commerce on this side of 2010 (at least that's what Team Touchize thinks) there could be circumstance where you would like to disable the swipe function. Due to the numerous different themes it's hard to know when and where you would like to disable the swipe function.
Our application is smart, but not that smart!
Solved with a class name
We've solved it by letting you add a class name to the product element you would like to disable. This means that you can modify the element in your liquid file and the application will ignore these product element.
Different themes have different setups
It will be hard to write a complete guide on where you should place the class name in your liquid files due to different setups regarding themes and applications. We can however give you pointers to follow and give an example. Below you will find an example on how you could disable the swipe function on Related Products in your product page.
Disable the swipe function on products in your Related Products section on a product page example
NOTICE! You will need to feel comfortable with the browser inspection tool, HTML and know your way around liquid files in your Shopify store before starting to follow the pointers and example. If not, we suggest that you contact your developers/agency to help you out.
Step 1 - Locate products to disable
These are the products we want to remove the swipe function from.
Step 2 - Find out which element you need to make a change to
Inspect the product with your browser inspection tool when you have Mobile Swipe2Buy enabled. Look for the element that already has the class name of
tz-anchor in their class list. This is the element you want to add a new class name to. In this example it is a link element with a class list of
grid-view-item__link grid-view-item__image-container full-width-link. Note that
tz-anchor is not included.
A tip is to check if the product or products exists inside a div element belonging to a specific section. In this example you can see that the elements are rendered inside the
This gives us a direction on where we could find the elements in the liquid files.
Step 3 - Find the elements in the liquid files
Now go to your liquid files and find the file where you can edit these elements. In our example the product-recommendations.liquid is the file that includes the product-card-grid.liquid.
Inside product-card-grid.liquid we found the elements that needs to be modified.
Step 4 - Create a new liquid file
If we add the class name to this element it will effect all the element where product-card-grid.liquid is included in your theme, and we don't want that. In this example we created a new and empty file in the same folder as product-card-grid.liquid and named the file product-recommendations-card-grid.liquid.
Step 5 - Copy and paste
Then we copied all the content inside product-card-grid.liquid and pasted it into product-recommendations-card-grid.liquid and saved the file.
Step 6 - Add the magical class name
Add the magical class name
tz-no-swipe to the element that needs to be modified and save.
Step 7 - Include the new file
Now back in the product-recommendations.liquid we included the new file instead and save.
Step 8 - Confirm the modification
Go back to your browser and inspect the product element to confirm that the new class name is added.
Step 9 - Continue to enjoy our application.
Keep up the good work and feel free to contact us at any time if you have any questions or need any assistance. To get in touch click the chat bubble in the lower right corner on this page, visit our site touchize.com or send us an email at firstname.lastname@example.org.