Enhance your Shopify store with the powerful Shopify Comparison Table Section. This feature allows customers to effortlessly compare products side-by-side, improving their shopping experience and aiding informed decision-making. With its lightweight and responsive design, this section seamlessly integrates into your store for optimal performance.
The Shopify Comparison Table Section is a flexible and customizable feature that enables you to showcase key product details in a structured, side-by-side format. Simply add the section to your store, configure the product attributes to display, and let your customers compare options directly on the product or collection pages.
- Customize padding for the Shopify table section.
- Add custom CSS for advanced styling options.
- Define cell values for each column with ease.
The Shopify Comparison Table Section is a lightweight and responsive feature designed to deliver a seamless browsing experience on both desktop and mobile devices. Its optimized code ensures fast load times, while the minimal design integrates effortlessly with any Shopify theme, providing compatibility across all screen sizes.
Easily configure product attributes to suit your business needs, style the table to reflect your store’s branding and add or remove columns effortlessly to match your specific requirements.
Customers can effortlessly compare product specifications, prices and features, simplifying their decision-making process. This reduces cart abandonment rates and boosts engagement by providing an interactive shopping tool.
Follow these simple steps to add a comparison table to your Shopify store:
Download the meetanshi-comparison-table.zip file from the "My Orders" section.
Extract the contents of the zip file on your computer. Open the meetanshi-comparison-table.txt file in a text editor like Notepad and copy the code.
Log in to your Shopify admin account and navigate to Online Store > Themes. Click the three dots next to the Customize button and select Edit Code.
In the left navigation bar, scroll to Sections and click Add a new section.
Enter "meetanshi-comparison-table" as the section name and click Done. Paste the copied code into the new section and save it.
Once saved, the comparison table is ready for use. Navigate to Themes > Customize and click Add a Section. Select the comparison table section to include it in your store. Customize the table using the available configuration settings.
- Heading Font Size: Adjust the font size using the slider or type a value (e.g.,
35px) in the Heading Font Size setting. - Heading Text Color: Click the Heading Text Color picker and choose a color or enter a hex code (e.g.,
#000000). - Heading Font Style: Select Italic or Normal from the Heading Font Style option.
- Heading Text Transform: Choose from None, Capitalize, Uppercase, or Lowercase in the Heading Text Transform dropdown.
- Heading Text Alignment: Pick Right, Center, or Left for text alignment.
- Section Padding Top: Set the top spacing by entering a value (e.g.,
36px) in Section Padding Top. - Section Padding Bottom: Adjust the bottom spacing by entering a value (e.g.,
36px) in Section Padding Bottom. - Section Padding Left: Set the left margin by entering a value (e.g.,
5px) in Section Padding Left. - Section Padding Top (Mobile): Set the top padding (e.g.,
36) to adjust the space at the top of the section on mobile. - Section Padding Bottom (Mobile):Set the bottom padding (e.g.,
36) to adjust the space at the bottom of the section on mobile. - Section Padding Left (Mobile): Set the left padding (e.g.,
1.5) to adjust the space on the left side of the section on mobile. - Section Padding Right (Mobile): Set the right padding (e.g.,
1.5) to adjust the space on the right side of the section on mobile.
- Border Width: Set the thickness of the row's border.
- Border Color: Choose the color for the border. It's currently set to black (#000000).
- Row Padding Top/Bottom/Left/Right: Define the space between the content and the edges of the row.
- Row Padding Top/Bottom (Mobile): Set specific padding values for mobile devices.
- Border color : Type in the desired color code (e.g., #FF0000 for red, #00FF00 for green, #0000FF for blue). Or Select the desired color from the palette.
- Heading: Set the main title or header for the product.
- Product-1 BG Color: Set the background color for the first product using the hex color code "#3F7116".
- Product-1 Text Color: Set the text color for the first product using the hex color code "#FFFFFF".
- Product-1 Sub-Text Color: Set the sub-text color for the first product using the hex color code "#FFFFFF".
- Product Font Size: Set the font size for the product text to 28 pixels.
- Product-1 Text Transform: Set the text transformation for the first product to "Capitalize".
- Product-1 Text Alignment: Set the text alignment for the first product to "Right".
- Row Title Text Color: Set the color of the row title text to the hex code "#000000".
- Row Title Font Size: Set the font size of the row title to 30 pixels.
- Row Title Font Size - Mobile: Set the font size of the row title for mobile devices to 14 pixels.
- Row Title Text Transform: Set the text transformation for the row title to "Capitalize".
- Row Title Text Alignment: Set the alignment of the row title text to "Right".
- Sub-Text Font size: Set the font size of the sub-text to 22 pixels.
- Sub-Text Font size - Mobile: Set the font size of the sub-text for mobile devices to 14 pixels.
- Sub-Text Transform: Set the text transformation for the sub-text to "Capitalize".
Click on the "Custom CSS" section to open the editor. This will be a text area where you can enter your CSS code.Once you've added the CSS code, save the changes. This will apply the new border color to the specified row.