Call to Action Button

Suggest Edits

A Call to Action (CTA) button is a powerful tool to drive user engagement and encourage specific actions, such as redirecting users to the product detail page (PDP). Follow these simple steps to integrate a CTA button, "View Product," within product cards in your Shopify store using Findify's new Shopify app built with Liquid.

Integration Steps

Step 1: Create a New Asset

Navigate to Theme → Edit Code → Assets in your Shopify admin panel.
Add a new asset and name it accordingly (e.g., customCTA.js).
Paste the provided JavaScript function into the newly created asset.

function customCTAFunction() {
	console.log('CTA Action Fired')
}

Step 2: Include Script in Theme Layout

Open the theme.liquid file in your Shopify theme editor.
Paste the following script immediately after the <head> tag to include the custom JavaScript file.

<head>
	...
	<script src="{{ 'yourAssetName.js' | asset_url }}" defer="defer"></script>
</head>

Step 3: Add Button to Product Card

Locate the findify-product.liquid file in your Shopify theme editor.
Insert the following HTML code snippet within the product card section to add the CTA button.

<div>
	<a href={{ product_url }}>
		// ... other code 
	</a>
	<button onclick="addToCart({{ id }}, {{  selected_variant_id }})" >
		Add to cart
	</button>
</div>

By following these straightforward steps, you can effortlessly integrate a Call to Action button within product cards in your Shopify store. Enhance user engagement and encourage users to explore product details with this simple yet effective feature.

For further assistance or inquiries, feel free to contact us on [email protected].

Updated 8 months ago