Documentation
Feedback
Guides

Advanced components
Store Link

The Store Link app provides blocks responsible for displaying links in other theme blocks, such as the Product Summary.

{"base64":"  ","img":{"width":1490,"height":834,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":705454,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-link-0.png"}}

Configuration

  1. Add the store-link app to your theme's dependencies in the manifest.json file. You'll, then, be able to use all the blocks exported by the store-link app and its respective props.
"dependencies": { + "vtex.store-link": "0.x" }
  1. Based on the exported list, choose the desired block and declare it in the block that will host the link. Find below an example of a link.product being used in the product-summary block:
{ "link.product#product-page": { "props": { "href": "/{slug}/p", "label": "More details >" } }, "product-summary.shelf": { "children": [ "product-summary-image", "product-summary-name", "product-rating-inline", "product-summary-space", "product-summary-price", "link.product#product-page" ] }, }

️ Note that you must place the link.product block inside a block that provides a product context (e.g., ProductSummary). From the previous example, note that a {slug} placeholder is being passed onto the href prop. When rendered, this placeholder is overwritten by the value accrued from the closest product context, generating a link like /everyday-necessaire/p.

Blocks

BlockDescription
link.productA link that consumes the product context.
linkA normal link that doesn't consume any context.

Props

All blocks exported by store-link share the same props:

Prop nameTypeDescriptionDefault value
labelstringLink text.undefined
hrefstringLink URL.#
scrollTostringElement anchor to scroll after navigation. (E.g. "#footer")undefined
targetstringWhere to display the linked URL. This prop works the same way as the target from HTML <a> element. Since the anchor element's target default is _self, this prop will be set to _self if it's undefined.undefined
displayModeenumHow the link should be displayed. Possible values are: anchor (displays a normal link with no styles) or button (displays a button that can be customized using the buttonProps prop.anchor
buttonPropsobjectHow the link button should be displayed. Use this prop only when the displayMode prop is set as button.{ variant: primary, size: regular }
escapeLinkRegexstringRegExp, with global match, used to remove special characters within product specifications. (E.g. if you want to use /[%]/g then escapeLinkRegex = [%] )undefined
relstringThis prop specifies the relationship between the current document and the linked document (for better SEO). This prop works the same way as the rel attribute from <a>, the HTML anchor element. Supported values can be found hereundefined
  • buttonProps object:
Prop nameTypeDescriptionDefault value
variantenumLink button visual proeminence. Possible values are: primary or secondary (values are set according to the VTEX Styleguide).primary
sizeenumLink button size. Possible values are: small, regular or large (values are set according to the VTEX Styleguide).regular

Modus Operandi

When creating an URL link using the href prop, you can create hypotheticals query string values, as shown in the example below:

{ "link#foo": { "props": { "href": "/login?returnUrl={queryString.returnUrl}", "label": "Sign in" } } }

Considering the href prop from the previous example, note that the URL link will be built correctly if the current page has the returnUrl query string. Otherwise, an empty value will take place.

Depending on the context used by the link.product block, you can use product variables to structure different URL paths for the href prop, such as a link to a given product department (/{department}).

Product variableDescription
brandProduct brand name.
brandIdProduct brand ID.
category1Highest level category in the category tree.
category2Second highest level category.
category3Third hieghest level category.
category4Fourth highest level category.
departmentProduct department.
productIdProduct ID.
skuIdCurrent selected SKU ID.
slugThe link text used to create the product link.

To build URLs with variables related to product specifications, use the following format: {specificationGroups.groupName.specifications.specificationName}. Replace groupName and specificationName with the specification group and the product specification names accordingly. For example:

{ "link.product#vtex": { "props": { "href": "{specificationGroups.Design.specifications.Dimensions}", "label": "VTEX" } } }

In the example above, Design is the specification group name and Dimensions is the product specification name.

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide. All blocks have the same handles.

CSS Handles
childrenContainer
label
link
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page