Is it possible to mask the variant box lines on my product pages by utilizing the Shopify Lite Buy Button?

I am trying to integrate a vertical, full-width button into my Squarespace product page. My goal is to only display the images and hide all other elements such as the product title, price, and description by setting their display property to "none".

However, I am struggling to figure out how to target the lines that are still visible beneath the images. I suspect they are related to the product variants box. Unfortunately, since I do not have a Shopify storefront, I cannot add custom CSS in the backend.

line underneath product image

If anyone has a solution to hide these lines or make them white, I would greatly appreciate it.

My website is on Squarespace - an example product page can be found here: (The Buy button is embedded in a code block)

The code I am currently using:

<div id='product-component-1596624541383'></div>
<script type="text/javascript">
  /*<![CDATA[*/
  (function() {
    var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
    if (window.ShopifyBuy) {
      if (window.ShopifyBuy.UI) {
        ShopifyBuyInit();
      } else {
        loadScript();
      }
    } else {
      loadScript();
    }

    function loadScript() {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        domain: 'wearenativ.myshopify.com',
        storefrontAccessToken: '5dd1d6831a0c331ffc7755f9dbc8e6b4',
      });
      ShopifyBuy.UI.onReady(client).then(function(ui) {
        ui.createComponent('product', {
          id: '5496686280862',
          node: document.getElementById('product-component-1596624541383'),
          moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
          options: {
            "product": {
              "styles": {
                "product": {
                  "@media (min-width: 601px)": {
                    "max-width": "100%",
                    "margin-left": "0",
                    "margin-bottom": "0px"
                  },
                  "text-align": "center",
                },
                "title": {
                  "font-family": "Gill Sans, sans-serif",
                  "font-weight": "normal",
                  "font-size": "0px",
                  "display": "none"
                },
                "button": {
                  "font-family": "Gill Sans, sans-serif",
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px",
                  ":hover": {
                    "background-color": "#ffffff"
                  },
                  "background-color": "#ffffff",
                  ":focus": {
                    "background-color": "#ffffff"
                  },
                  "border-radius": "0px",
                  "display": "none"
                },
                "quantityInput": {
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px",
                  "display": "none"
                },
                "price": {
                  "font-family": "Gill Sans, sans-serif",
                  "font-size": "0px",
                  "color": "#ffffff",
                  "display": "none"
                },
                "compareAt": {
                  "font-family": "Source Sans Pro, sans-serif",
                  "font-size": "0px",
                  "color": "#ffffff",
                  "display": "none"
                },
                "unitPrice": {
                  "font-family": "Source Sans Pro, sans-serif",
                  "font-size": "0px",
                  "color": "#ffffff",
                  "display": "none"
                },
                "description": {
                  "font-family": "Source Sans Pro, sans-serif",
                  "font-size": "0px",
                  "color": "#ffffff",
                  "display": "none"
                }
              },
              "layout": "vertical",
              "contents": {
                "img": false,
                "imgWithCarousel": true,
                "description": false,
              },
              "width": "100%",
              "text": {
                "button": "Add to cart",
                "display": "none"
              }
            },
            "productSet": {
              "styles": {
                "products": {
                  "@media (min-width: 601px)": {
                    "margin-left": "-20px",
                    "display": "none"
                  }
                }
              }
            },
            "modalProduct": {
              "contents": {
                "img": false,
                "imgWithCarousel": true,
                "button": false,
                "buttonWithQuantity": false
              },
              "styles": {
                "product": {
                  "@media (min-width: 601px)": {
                    "max-width": "100%",
                    "margin-left": "0px",
                    "margin-bottom": "0px",
                    "display": "none"
                  }
                },
                "button": {
                  "display": "none",
                  "font-family": "Source Sans Pro, sans-serif",
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px",
                  ":hover": {
                    "background-color": "#ffffff"
                  },
                  "background-color": "#ffffff",
                  ":focus": {
                    "background-color": "#ffffff"
                  },
                  "border-radius": "0px"
                },
                "quantityInput": {
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px"
                }
              },
              "text": {
                "button": "Add to cart"
              }
            },
            "option": {
              "styles": {
                "label": {
                  "display": "none"
                },
                "select": {
                  "display": "none"
                }
              }
            },
            "cart": {
              "styles": {
                "button": {
                  "font-family": "Gill Sans, sans-serif",
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px",
                  ":hover": {
                    "background-color": "#ffffff"
                  },
                  "background-color": "#ffffff",
                  ":focus": {
                    "background-color": "#ffffff"
                  },
                  "border-radius": "0px"
                }
              },
              "text": {
                "total": "Subtotal",
                "button": "Checkout"
              },
              "popup": false
            },
            "toggle": {
              "styles": {
                "toggle": {
                  "font-family": "Gill Sans, sans-serif",
                  "background-color": "#ffffff",
                  ":hover": {
                    "background-color": "#ffffff"
                  },
                  ":focus": {
                    "background-color": "#ffffff"
                  }
                },
                "count": {
                  "font-size": "0px"
                }
              }
            }
          },
        });
      });
    }
  })();
  /*]]>*/
</script>

htmlcssbuttonshopify

Answer №1

Consider including one of these snippets following the "title" element

"variation-filters": {
  "view": "hidden"
},

"variantFilters": {
  "view": "hidden"
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display single data instance from API using Angular?

My API data is structured in a way that includes various questions and their corresponding options. I am looking to display one question and its alternatives at a time, with the ability to move to the next question upon clicking a "Next" button. Since the ...

javascripthtmlangular

How do you go about indenting a paragraph in CSS following the insertion of

My objective: To have all paragraphs indented except for the ones following the .firstCharacter class. In some sections of my page, I utilize a drop cap to start off the first paragraph. I have configured all subsequent paragraph tags to be indented using ...

css

Is there a way for me to function without the need for resizing adjustments?

My Bootstrap web page is designed to remain fixed in size regardless of the browser window. I want it to be scrolled, not resized. Check out the image I uploaded: Correct Image Incorrect Image JSFiddle link <div class="row1 col-lg-12"> ...

htmlcsstwitter-bootstrap

Navigating between two HTML files in an ExpressJS project can be easily achieved by setting up routes

Recently delving into expressjs, I am struggling to navigate between two HTML files within the root folder. My project involves utilizing Bootstrap, AngularJS, and ExpressJS. In the routes directory, I have implemented the following code: var express = r ...

htmlangularjsnode.jsexpress

Challenges arise with dynamic tables (Foundation 5) within Rails application

I have tables set up in my Rails 4 App with the ZURB Foundation 5 framework. The problem lies with the mobile version of the table. It works fine on browsers and tablets, but on mobile phones, it shows the first column twice before scrolling through the r ...

htmlcssruby-on-rails-4sasszurb-foundation-5

PHP link malfunctioning

Recently, I have been working on adding links to new pages in PHP using Panique for authorization. You can find more information about Panique here. In the views directory, I created a new page called product-des.php. However, when I tried to add a link f ...

phphtml

Angular function triggered by clicking that takes two parameters

Is there a way to pass two arguments in this method? <tr *ngFor="let match of item.matches " (click)="openMatchContent(match,$event)" openMatchContent(match: any,event:any) {} When I try to run this code, I receive an error statin ...

javascriptcssangulartypescriptsass

Unable to open fancybox from a skel-layer menu

Seeking assistance with integrating a Fancybox inline content call from a Skel-layer menu (using the theme found at ) <nav id="nav"> <ul> <li><a href="#about1" class="fancybox fancybox.inline button small fit" >about< ...

javascriptphpjqueryhtmlfancybox

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

javascriptcssangularbootstrap-4

What is the method to display the input value in the table?

I am trying to display the input value on the right corner under the table with the id "realuchat", but unfortunately, the current code is not working as intended. I attempted to add a new element using JavaScript, but encountered some issues. Can someone ...

javascripthtml

Tips for concealing the loader once all pages have been loaded

Within the context of my website development project at , I am utilizing a script for infinite scrolling to consolidate multiple pages into one seamless scrolling experience. I am seeking a solution to hide the loader (the spinning icon) when no additiona ...

javascriptjqueryhtmlcssinfinite-scroll

How can I remove the bouncing effect of the top bar in Chrome when scrolling in Three

There is a frustrating problem I am encountering on my website with the joystick control. Whenever I try to move my joystick down, Chrome triggers either the refresh dropdown or the top bar bounces and goes in and out of fullscreen mode. ...

htmlcssthree.jsjoystickreact-three-fiber

php common form problems

I am currently working on a form that includes checkboxes and aims to insert the checked values into a database. My goal is to display these checkboxes as checked or unchecked based on their stored value in the database every time the page is loaded. Whil ...

phpmysqlhtmlforms

Steps to activate a single button within a deactivated fieldset

Is there a way to deactivate all elements within a Fieldset, while keeping certain buttons active? Check out this demo. <fieldset ng-disabled="true"> <legend>Personalia:</legend> Name: <input type="text"><br> Em ...

javascripthtmlangularjs

what is the best way to align text with an image using CSS

Is there a way to display a form within an image without making it messy with additional tags and text? Below is the code that I currently have: .box { width: 650px; padding-right: 15px; /* creates gap on the right edge of the image (not con ...

htmlcssweb

Position dropdowns side by side within a Bootstrap navigation bar

Struggling with utilizing Bootstrap's nav-bar component - I'm attempting to position two dropdowns next to each other on the left side of the viewport. The Bootstrap framework being used is right-to-left (rtl). Here's an example of the navba ...

htmlcssdrop-down-menubootstrap-4nav

How to align Vimeo embed to the left side

Is there a way to align a Vimeo iFrame to the left instead of it automatically centering itself? I want more control over its alignment within my flexbox container. I've created a Flexbox container named .example-div with two internal flex containers ...

htmlcssalignmentvimeovimeo-player

validating user input on a sign-in form on the server side

<form method="POST" onsubmit=" return formSubmit() " action="log-it-reports.php"> <div class="userimage"> <img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture"> ...

phphtmlauthentication

leveraging python selenium4 to locate elements by their shared class name

Having trouble finding a specific filter type button on a page due to similar class names with only one differing argument (number of column). Can't figure out how to utilize it. <div class="e-filtermenudiv e-icons e-icon-filter" _ngconte ...

htmlpython-3.xselenium-webdriverrelative-locators

How to change the divider color in Angular Material table's header row

Currently struggling with customizing the divider appearance in the Angular Material table. Despite trying various approaches in the Chrome dev tools, I am unable to modify the color and thickness of the divider after the header row. It seems that the bord ...

cssangularangular-material